{% extends "heatmap.html" %}
{% block heatmap %}
// extract JSON property used for data-driven styling to add to popup
{% if enableDataJoin %}
{% if joinData %}
// Create filter for layers from join data
let joinData = {{ joinData }},
layerFilter = ['in', "{{ vectorJoinDataProperty }}"]
joinData.forEach(function(row, index) {
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": "heatmap",
"source": "vector-data",
"source-layer": "{{ vectorLayer }}",
"type": "heatmap",
"maxzoom": {{ maxzoom }},
"minzoom": {{ minzoom }},
"paint": {
{% if radiusStops %}
"heatmap-radius": generatePropertyExpression('interpolate', 'zoom', {{ radiusStops }}),
{% endif %}
{% if enableDataJoin %}
{% if weightProperty and vectorWeightStops %}
"heatmap-weight": {
"type": "categorical",
"property": "{{ vectorJoinDataProperty }}",
"stops": {{ vectorWeightStops }},
"default": 0
},
{% endif %}
{% else %}
{% if weightProperty and weightStops %}
"heatmap-weight": generateInterpolateExpression( "{{ weightProperty }}", {{ weightStops }} ),
{% endif %}
{% endif %}
{% if intensityStops %}
"heatmap-intensity": generateInterpolateExpression('zoom', {{ intensityStops }} ),
{% endif %}
{% if colorStops %}
"heatmap-color" : generateInterpolateExpression('heatmap-density', {{ colorStops }} ),
{% endif %}
"heatmap-opacity" : {{ opacity }},
}
{% if enableDataJoin %}
, filter: layerFilter
{% endif %}
}, "{{belowLayer}}");
{% endblock heatmap %}