<link rel=“stylesheet” href=“{{ 'assets/css/mapbox-gl.min.css' | absolute_url }}” media=“all”> <link rel=“stylesheet” href=“{{ 'assets/css/mapbox-gl.panel.min.css' | absolute_url }}” media=“all”> <div class=“intro {{ include.style.header.joined }} {{ include.style.header.color }}”>
<h2 class="major">{{ include.header.title }}</h2> <p>{{ include.header.description }}</p>
</div> <div id='map-container'></div> <script> var data_points;
function fillMapContainer() {
fetch("{{ include.data.file | absolute_url }}") .then(response => response.json()) .then(json => data_points = json); mapboxgl.accessToken = "{{ include.data.token }}"; var map = new mapboxgl.Map({ container: "map-container", style: "{{ include.data.style }}", center: [{{ include.data.center.longitude | default: 0.0 }}, {{ include.data.center.latitude | default: 0.0 }}], zoom: {{ include.data.zoom | default: 1 }}, dragPan: true }); map.on('load', function () { map.addLayer({ "id": "points", "type": "symbol", "source": { "type": "geojson", "data": data_points }, "layout": { // get the icon name from the source's "icon" property // concatenate the name to get an icon from the style's sprite sheet "icon-image": ["concat", ["get", "icon"], "-15"], "icon-size": 1, "icon-allow-overlap": true, // get the title name from the source's "title" property "text-field": ["get", "{{ include.data.markers.title | default: 'name' }}"], "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-offset": [0, 0.6], "text-anchor": "top" }, "paint": { "icon-color": "#ffcc00", "icon-halo-color": "#2266AA", "text-color": "#ffffff" } }); }); // When a click event occurs on a feature in the places layer, open a popup at the // location of the feature, with description HTML from its properties. map.on('click', 'points', function(e) { var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.{{ include.data.markers.popup.text }}; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on('mouseenter', 'points', function() { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'points', function() { map.getCanvas().style.cursor = ''; });
} </script> <script src=“{{ 'assets/js/mapbox-gl.min.js' | absolute_url }}” onload=“fillMapContainer()” defer ></script>