{% extends "base.html" %} {% block extra_css %} {% endblock extra_css %} {% block legend %} {% if showLegend %} calcColorLegend({{ colorStops }}, "Point Density"); {% endif %} {% endblock legend %} {% block map %} map.on('style.load', function() { {% block clustered_circle %} map.addSource("data", { "type": "geojson", "data": {{ geojson_data }}, "buffer": 0, "maxzoom": {{ clusterMaxZoom }} + 1, "cluster": true, "clusterMaxZoom": {{ clusterMaxZoom }}, "clusterRadius": {{ clusterRadius }}, "generateId": true }); map.addLayer({ "id": "label", "source": "data", "type": "symbol", "maxzoom": {{ maxzoom }}, "minzoom": {{ minzoom }}, "layout": { "text-field": "{point_count_abbreviated}", "text-size" : generateInterpolateExpression('zoom', [[0, {{ labelSize }}],[22, 3* {{ labelSize }}]] ), }, "paint": { "text-halo-color": "{{ labelHaloColor }}", "text-halo-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ labelHaloWidth }}], [18,5* {{ labelHaloWidth }}]]), "text-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ labelColor }}"] } }, "{{belowLayer}}" ) map.addLayer({ "id": "circle-cluster", "source": "data", "type": "circle", "maxzoom": {{ maxzoom }}, "minzoom": {{ minzoom }}, "filter": ["has", "point_count"], "paint": { "circle-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", generateInterpolateExpression( "point_count", {{ colorStops }} )], "circle-radius" : generateInterpolateExpression( "point_count", {{ radiusStops }} ), "circle-stroke-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ strokeColor }}"], "circle-stroke-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ strokeWidth }}], [18,5* {{ strokeWidth }}]]), "circle-opacity" : {{ opacity }}, "circle-stroke-opacity" : {{ opacity }} } }, "label"); map.addLayer({ "id": "circle-unclustered", "source": "data", "type": "circle", "maxzoom": {{ maxzoom }}, "minzoom": {{ minzoom }}, "filter": ["!has", "point_count"], "paint": { "circle-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ colorDefault }}"], "circle-radius" : generateInterpolateExpression( 'zoom', [[0, {{ radiusDefault }} ], [22,10 * {{ radiusDefault }}]]), "circle-stroke-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ strokeColor }}"], "circle-stroke-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ strokeWidth }}], [18,5* {{ strokeWidth }}]]), "circle-opacity" : {{ opacity }}, "circle-stroke-opacity" : {{ opacity }} } }, "circle-cluster"); {% endblock clustered_circle %} // Popups {% if popupOpensOnHover %} var popupAction = 'mousemove', popupSettings = { closeButton: false, closeOnClick: false }; {% else %} var popupAction = 'click', popupSettings = { closeButton: true, closeOnClick: true }; {% endif %} // Create a popup var popup = new mapboxgl.Popup(popupSettings); {% block clustered_circle_popup %} var hoveredStateId = 0; // Show the popup on mouseover map.on(popupAction, function(e) { var features = map.queryRenderedFeatures(e.point, {layers: ['circle-unclustered', 'circle-cluster', 'label'] }); if (features.length > 0) { map.getCanvas().style.cursor = 'pointer'; var f = features[0]; newHoveredStateId = f.id; if (newHoveredStateId != hoveredStateId) { map.removeFeatureState({source: 'data', id: hoveredStateId}); hoveredStateId = newHoveredStateId; } map.setFeatureState({source: 'data', id: hoveredStateId}, { hover: true}); 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.lngLat) .setHTML(popup_html) .addTo(map); } else { map.getCanvas().style.cursor = ''; popup.remove(); map.removeFeatureState({source: 'data', id: hoveredStateId}); } }); {% endblock clustered_circle_popup %} map.on('click', 'circle-unclustered', function(e) { map.easeTo({ center: e.features[0].geometry.coordinates }); }); map.on('click', 'circle-cluster', function(e) { map.easeTo({ center: e.features[0].geometry.coordinates }); }); }); {% endblock map %}