{% extends "base.html" %} {% block extra_css %} {% endblock extra_css %} {% block legend %} {% if showLegend %} {% if colorStops and colorProperty %} calcColorLegend({{ colorStops }} , "{{ colorProperty }}"); {% endif %} {% endif %} {% endblock legend %} {% block map %} map.on('style.load', function() { map.addSource("data", { "type": "geojson", "data": {{ geojson_data }}, "buffer": 1, "maxzoom": 14 }); map.addLayer({ "id": "label", "source": "data", "type": "symbol", "maxzoom": {{ maxzoom }}, "minzoom": {{ minzoom }}, "layout": { {% if labelProperty %} "text-field": "{{ labelProperty }}", {% endif %} "text-size" : generateInterpolateExpression('zoom', [[0, {{ labelSize }}],[22, 3* {{ labelSize }}]] ), "text-offset": [0,-1] }, "paint": { "text-halo-color": "{{ labelHaloColor }}", "text-halo-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ labelHaloWidth }}], [18,5* {{ labelHaloWidth }}]]), "text-color": "{{ labelColor }}" } }, "{{belowLayer}}" ) map.addLayer({ "id": "circle", "source": "data", "type": "circle", "maxzoom": {{ maxzoom }}, "minzoom": {{ minzoom }}, "paint": { {% if colorProperty %} "circle-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}" ), {% else %} "circle-color": "{{ defaultColor }}", {% endif %} "circle-radius" : generatePropertyExpression('interpolate', 'zoom', [[0,{{ radius }}], [22,10 * {{ radius }}]]), "circle-stroke-color": "{{ strokeColor }}", "circle-stroke-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ strokeWidth }}], [18,5* {{ strokeWidth }}]]), "circle-opacity" : {{ opacity }}, "circle-stroke-opacity" : {{ opacity }} } }, "label"); // Create a popup var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // Show the popup on mouseover map.on('mousemove', 'circle', function(e) { map.getCanvas().style.cursor = 'pointer'; let f = e.features[0]; let popup_html = '
  • Location: ' + f.geometry.coordinates[0].toPrecision(6) + ', ' + f.geometry.coordinates[1].toPrecision(6) + '
  • '; for (key in f.properties) { popup_html += '
  • ' + key + ': ' + f.properties[key] + '
  • ' } popup_html += '
    ' popup.setLngLat(e.features[0].geometry.coordinates) .setHTML(popup_html) .addTo(map); }); map.on('mouseleave', 'circle', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); // Fly to on click map.on('click', 'circle', function(e) { map.easeTo({ center: e.features[0].geometry.coordinates, zoom: map.getZoom() + 1 }); }); }); {% endblock map %}