{% extends "choropleth.html" %} {% block choropleth %} {% if enableDataJoin %} // extract JSON property used for data-driven styling to add to popup {% if joinData %} let joinData = {{ joinData }}; var popUpKeys = {}, heightPopUpKeys = {}; // Create filter for layers from join data let layerFilter = ['in', "{{ vectorJoinDataProperty }}"] joinData.forEach(function(row, index) { popUpKeys[row["{{ dataJoinProperty }}"]] = row["{{ colorProperty }}"]; {% if extrudeChoropleth %} {% if colorProperty != heightProperty %} heightPopUpKeys[row["{{ dataJoinProperty }}"]] = row["{{ heightProperty }}"]; {% endif %} {% endif %} layerFilter.push(row["{{ dataJoinProperty }}"]); }); {% endif %} {% endif %} // Add vector data source map.addSource("vector-data", { type: "vector", url: "{{ vectorUrl }}", }); // Add layer from the vector tile source with data-driven style map.addLayer({ "id": "choropleth-fill", "type": "fill", "source": "vector-data", "source-layer": "{{ vectorLayer }}", "paint": { {% if enableDataJoin %} "fill-color": { "type": "categorical", "property": "{{ vectorJoinDataProperty }}", "stops": {{ vectorColorStops }}, "default": "{{ defaultColor }}" }, {% else %} "fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"), {% endif %} "fill-opacity": {{ opacity }} } {% if enableDataJoin %} , filter: layerFilter {% endif %} }, "{{ belowLayer }}"); // Add border layer map.addLayer({ "id": "choropleth-line", "source": "vector-data", "source-layer": "{{ vectorLayer }}", "type": "line", "layout": { "line-join": "round", "line-cap": "round" }, "paint": { {% if lineDashArray %} "line-dasharray": {{ lineDashArray }}, {% endif %} "line-color": "{{ lineColor }}", "line-width": {{ lineWidth }}, "line-opacity": {{ opacity }} } {% if enableDataJoin %} , filter: layerFilter {% endif %} }, "{{ belowLayer }}"); // Add label layer map.addLayer({ "id": "choropleth-label", "source": "vector-data", "source-layer": "{{ vectorLayer }}", "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": "{{ labelColor }}" } {% if enableDataJoin %} , filter: layerFilter {% endif %} }, "{{ belowLayer }}"); // Optional extrusion layer {% if extrudeChoropleth %} map.addLayer({ id: "choropleth-extrusion", type: "fill-extrusion", "source": "vector-data", "source-layer": "{{ vectorLayer }}", paint: { "fill-extrusion-opacity": {{ opacity }}, {% if enableDataJoin %} "fill-extrusion-color": { "type": "categorical", "property": "{{ vectorJoinDataProperty }}", "stops": {{ vectorColorStops }}, "default": "{{ defaultColor }}" }, "fill-extrusion-height": { "type": "categorical", "property": "{{ vectorJoinDataProperty }}", "stops": {{ vectorHeightStops }}, "default": {{ defaultHeight }} } {% else %} "fill-extrusion-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"), "fill-extrusion-height": generatePropertyExpression("{{ heightType }}", "{{ heightProperty }}", {{ heightStops }}, {{ defaultHeight }}), {% endif %} } {% if enableDataJoin %} , filter: layerFilter {% endif %} }, "{{ belowLayer }}"); {% endif %} {% endblock choropleth %} {% block choropleth_popup %} // Show the popup on mouseover map.on(popupAction, 'choropleth-fill', function(e) { {% if popupOpensOnHover %} map.getCanvas().style.cursor = 'pointer'; {% endif %} let f = e.features[0]; let popup_html = '
'; for (key in f.properties) { popup_html += '
  • ' + key + ': ' + f.properties[key] + '
  • ' } {% if enableDataJoin %} // Add property from joined data to vector's feature popup popup_html += '
  • ' + "{{ colorProperty }}".toUpperCase() + ': ' + popUpKeys[f.properties["{{ vectorJoinDataProperty }}"]] + '
  • ' {% if extrudeChoropleth %} {% if colorProperty != heightProperty %} popup_html += '
  • ' + "{{ heightProperty }}".toUpperCase() + ': ' + heightPopUpKeys[f.properties["{{ vectorJoinDataProperty }}"]] + '
  • ' {% endif %} {% endif %} {% endif %} popup_html += '
    ' popup.setLngLat(e.lngLat) .setHTML(popup_html) .addTo(map); }); {% endblock choropleth_popup %}