{% extends "main.html" %}
{% block javascript %}
mapboxgl.accessToken = '{{ accessToken }}';
var map = new mapboxgl.Map({
container: 'map',
style: '{{ styleUrl }}',
center: {{ center }},
zoom: {{ zoom }}
});
map.addControl(new mapboxgl.NavigationControl());
document.getElementById('legend').style.visibility = 'hidden';
map.on('style.load', function() {
map.addSource("data", {
"type": "geojson",
"data": {{ geojson_data }}, //data from dataframe output to geojson
"buffer": 0,
"maxzoom": 14
});
map.addLayer({
"id": "circle",
"source": "data",
"type": "heatmap",
"paint": {
"heatmap-weight": generateInterpolateExpression( "{{ weightProperty }}", {{ weightStops }} ),
"heatmap-radius" : generateInterpolateExpression('zoom', {{ radiusStops }} ),
"heatmap-color" : generateInterpolateExpression('heatmap-density', {{ colorStops }} ),
"heatmap-opacity" : {{ opacity }}
}
}, "{{belowLayer}}" );
});
{% endblock %}