{% 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 %}