{% extends "base.html" %} {% block extra_css %} {% endblock extra_css %} {% block legend %} {% if showLegend %} {% if extrudeChoropleth %} {% if colorStops and colorProperty and heightProperty %} {% if colorProperty != heightProperty and extrudeChoropleth %} calcColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ heightProperty }}"); {% else %} calcColorLegend({{ colorStops }}, "{{ colorProperty }}"); {% endif %} {% endif %} {% else %} calcColorLegend({{ colorStops }}, "{{ colorProperty }}"); {% endif %} {% endif %} {% endblock legend %} {% block map %} map.on('style.load', function() { {% block choropleth %} // Add geojson data source map.addSource("data", { "type": "geojson", "data": {{ geojson_data }}, "buffer": 1, "maxzoom": 14 }); // Add data layer map.addLayer({ "id": "choropleth-fill", "source": "data", "type": "fill", "paint": { "fill-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}")], "fill-opacity": {{ opacity }} } }, "{{ belowLayer }}" ); // Add border layer map.addLayer({ "id": "choropleth-line", "source": "data", "type": "line", "layout": { "line-join": "round", "line-cap": "round" }, "paint": { {% if lineDashArray %} "line-dasharray": {{ lineDashArray }}, {% endif %} "line-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ lineColor }}"], "line-width": {{ lineWidth }}, "line-opacity": {{ lineOpacity }} } }, "{{ belowLayer }}" ); // Add label layer map.addLayer({ "id": "choropleth-label", "source": "data", "type": "symbol", "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": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", "{{ labelColor }}"] } }, "{{ belowLayer }}" ); // Optional extrusion layer {% if extrudeChoropleth %} map.addLayer({ id: "choropleth-extrusion", type: "fill-extrusion", source: "data", paint: { "fill-extrusion-opacity": {{ opacity }}, "fill-extrusion-color": ["case", ["boolean", ["feature-state", "hover"], false], "{{ highlightColor }}", generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}")], "fill-extrusion-height": generatePropertyExpression("{{ heightType }}", "{{ heightProperty }}", {{ heightStops }}, {{ defaultHeight }}), } }, "{{ belowLayer }}"); {% endif %} {% endblock choropleth %} // Popups var interactionLayer = {% if extrudeChoropleth %} 'choropleth-extrusion' {% else %} 'choropleth-fill' {% endif %}; {% 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 choropleth_popup %} // Show the popup on mouseover var hoveredStateId = 0; map.on(popupAction, function(e) { var features = map.queryRenderedFeatures(e.point, {layers: [interactionLayer, 'choropleth-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 = '
'; 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 choropleth_popup %} // Fly to selected feature on click map.on('click', interactionLayer, function(e) { map.easeTo({ center: e.lngLat }); }); }); {% endblock map %}