PRO: Create Maps with Markers

Situation:

You have a JSON with Marker-Data you can use on Maps like Openstreeptmap.
Example: https://api.json-content-importer.com/extra/json/mapmarker.php

Such a JSON can be created out of other JSON by the JCI-PRO Plugin: See here how this is done for an RSS-Feed.

In Action:

Solution:

Create a new JCI-Tempalte with:

URL: https://api.json-content-importer.com/extra/json/mapmarker.php

Twig-Code:

<!-- you might store these libs local -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""><\/script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"><\/script>
<div id="map"></div>
<style>#map{ width: 500px; height: 500px; }</style>
<script>
var addressPoints = [
{% for k,v in markerpos %}
[{{v.0}}, {{v.1}},"{{v.2}}"]
{% if (not loop.last) %},{% endif %}
{% endfor %}
]

var map = L.map('map').setView([48.13743, 11.57549], 10);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var markers = L.markerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var marker = L.marker(new L.LatLng(a[0], a[1]), {
    title: title
  });
  marker.bindPopup(title);
  markers.addLayer(marker);
}
map.addLayer(markers);
<\/script>