Refactor HTML templates to use Jinja template inheritance for initial…

…ization of map, navigation control, etc. (#86)

mapboxgl/templates/base.html

@@ -1,44 +1,36 @@
 {% extends "main.html" %}
 
 {% block javascript %}
-var legend = document.getElementById('legend');
-legend.remove();
-
-mapboxgl.accessToken = '{{ accessToken }}';
-
-var map = new mapboxgl.Map({
-    container: 'map',
-    style: {{ style }},
-    center: {{ center }},
-    zoom: {{ zoom }},
-    transformRequest: (url, resourceType)=> {
-        return {
-           url: [url.slice(0, url.indexOf("?")+1), "pluginName=PythonMapboxgl&", url.slice(url.indexOf("?")+1)].join('')
-         }
-    }
-});
-
-map.addControl(new mapboxgl.NavigationControl());
-
-map.on('style.load', function() {
-
-    // Add data source
-    map.addSource("data", {
-        "type": "geojson",
-        "data": {{ geojson_data }},
-        "buffer": 1,
-        "maxzoom": 14
-    });
-
-    // Add data layer
-    map.addLayer({
-        "id": "circle",
-        "source": "data",
-        "type": "circle",
-        "maxzoom": {{ maxzoom }},
-        "minzoom": {{ minzoom }},
-        "paint": {"circle-radius": 1}
+
+    mapboxgl.accessToken = '{{ accessToken }}';
+
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: {{ style }},
+        center: {{ center }},
+        zoom: {{ zoom }},
+        transformRequest: (url, resourceType)=> {
+            if ( url.slice(0,22) == 'https://api.mapbox.com' ) {
+                //Add Python Plugin identifier for Mapbox API traffic
+                return {
+                   url: [url.slice(0, url.indexOf("?")+1), "pluginName=PythonMapboxgl&", url.slice(url.indexOf("?")+1)].join('')
+                 }
+             }
+             else {
+                 //Do not transform URL for non Mapbox GET requests
+                 return {url: url}
+             }
+        }
     });
 
-});
+    {% block navigation %}
+
+        map.addControl(new mapboxgl.NavigationControl());
+
+    {% endblock navigation %}
+
+    {% block legend %}{% endblock legend %}
+
+    {% block map %}{% endblock map %}
+
 {% endblock %}

mapboxgl/templates/choropleth.html

@@ -1,4 +1,4 @@
-{% extends "main.html" %}
+{% extends "base.html" %}
 
 <!-- update legend item key style -->
 {% block extra_css %}
@@ -7,136 +7,117 @@
     </style>
 {% endblock extra_css %}
 
-{% block javascript %}
-var legend = document.getElementById('legend');
-
-mapboxgl.accessToken = '{{ accessToken }}';
-
-var map = new mapboxgl.Map({
-    container: 'map',
-    style: {{ style }}, 
-    center: {{ center }},
-    zoom: {{ zoom }},
-    transformRequest: (url, resourceType)=> {
-        if ( url.slice(0,22) == 'https://api.mapbox.com' ) {
-            //Add Python Plugin identifier for Mapbox API traffic
-            return {
-               url: [url.slice(0, url.indexOf("?")+1), "pluginName=PythonMapboxgl&", url.slice(url.indexOf("?")+1)].join('')
+{% block legend %}
+
+    var legend = document.getElementById('legend');
+    calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }}");
+
+{% 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": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
+                "fill-opacity": {{ opacity }}
             }
-        }
-        else {
-            //Do not transform URL for non Mapbox GET requests
-            return {url: url}
-        }
-    }
-});
-
-map.addControl(new mapboxgl.NavigationControl());
-
-calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }}");
-
-map.on('style.load', function() {
-
-    {% block choropleth %}
-
-    // Add geojson data source
-    map.addSource("data", {
-        "type": "geojson",
-        "data": {{ geojson_data }},
-        "buffer": 1,
-        "maxzoom": 14
-    });
+        }, "{{ 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": "{{ lineColor }}",
+                "line-width": {{ lineWidth }},
+                "line-opacity": {{ opacity }}
+            }
+        }, "{{ 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,8],[22,16]] ),
+                "text-offset": [0,-1]
+            },
+            "paint": {
+                "text-halo-color": "white",
+                "text-halo-width": 1
+            }
+        }, "{{belowLayer}}" );
 
-    // Add data layer
-    map.addLayer({
-        "id": "choropleth-fill",
-        "source": "data",
-        "type": "fill",
-        "paint": {
-            "fill-color": 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": "{{ lineColor }}",
-            "line-width": {{ lineWidth }},
-            "line-opacity": {{ opacity }}
-        }
-    }, "{{ 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,8],[22,16]] ),
-            "text-offset": [0,-1]
-        },
-        "paint": {
-            "text-halo-color": "white",
-            "text-halo-width": 1
-        }
-    }, "{{belowLayer}}" );
-
-    {% endblock choropleth %}
-
-    // Create a popup
-    var popup = new mapboxgl.Popup({
-        closeButton: false,
-        closeOnClick: false
-    });
-
-    {% block choropleth_popup %}
+        {% endblock choropleth %}
 
-    // Show the popup on mouseover
-    map.on('mousemove', 'choropleth-fill', function(e) {
-        map.getCanvas().style.cursor = 'pointer';
+        // Create a popup
+        var popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false
+        });
 
-        let f = e.features[0];
-        let popup_html = '<div>';
+        {% block choropleth_popup %}
 
-        for (key in f.properties) {
-            popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'
-        }
+        // Show the popup on mouseover
+        map.on('mousemove', 'choropleth-fill', function(e) {
+            map.getCanvas().style.cursor = 'pointer';
+
+            let f = e.features[0];
+            let popup_html = '<div>';
 
-        popup_html += '</div>'
-        popup.setLngLat(e.lngLat)
-            .setHTML(popup_html)
-            .addTo(map);
-    });
+            for (key in f.properties) {
+                popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'
+            }
 
-    {% endblock choropleth_popup %}
+            popup_html += '</div>'
+            popup.setLngLat(e.lngLat)
+                .setHTML(popup_html)
+                .addTo(map);
+        });
 
-    map.on('mouseleave', 'choropleth-fill', function() {
-        map.getCanvas().style.cursor = '';
-        popup.remove();
-    });
-
-    // Fly to on click
-    map.on('click', 'choropleth-fill', function(e) {
-        map.flyTo({
-            center: e.lngLat,
-            zoom: map.getZoom() + 1
+        {% endblock choropleth_popup %}
+
+        map.on('mouseleave', 'choropleth-fill', function() {
+            map.getCanvas().style.cursor = '';
+            popup.remove();
+        });
+
+        // Fly to on click
+        map.on('click', 'choropleth-fill', function(e) {
+            map.flyTo({
+                center: e.lngLat,
+                zoom: map.getZoom() + 1
+            });
         });
-    });
 
-});
+    });
 
-{% endblock %}
+{% endblock map %}