Support vector tile source for additional viz types (mapbox#120)

* Update text-size to use expression based on viz.label_size property * Add new label properties to choropleth viz templates * Move label properties to base class (leverage inheritance to reduce repeated arguments) * Extract vector_color_map and numeric map (for height or line_width) to a VectorMixin class; fixes linestring bug with interpolation of color for certain color lookups with match-type * Extend CircleViz with VectorMixin (start GraduatedCircleViz, HeatmapViz, ClusteredCircleViz) * Extend vector data loading to base map and CircleMap -- datadriven styling for radius needs work * Refine color mapping in VectorMixin and update templates, viz.py * Update CircleViz template files with Jinja inheritance, establish {% block circle %} tag * Update Vector layer example for CircleViz; add geojson_file_to_dict utility and logic to viz.py to facilitate loading data from JSON object, list of Python dicts, GeoJSON filename * Refine function for parsing GeoJSON and JSON input (esp for vector visualizations) and add SourceDataError * Add support for GraduatedCircleViz template to use vector source data layer * Add support for HeatmapViz to use vector data source * Add and refine tests; update utility name for geojson_to_dict etc. * Change FileNotFoundError to IOError for Python2.7 support * Enable data from vector layers to be used for data-driven style (without using data-join technique) * Update docs for VectorMixin class, vector properties and label properties inherited from MapViz parent class * Update geojson_to_dict to geojson_to_dict_list and add docs; organize MapBox.create_html()
akacarlyann · Nov 11, 2018 · ad77d79 · ad77d79
1 parent 5fa857b
commit ad77d79
Show file tree

Hide file tree

Showing 23 changed files with 5,699 additions and 3,630 deletions.
diff --git a/docs/utils.md b/docs/utils.md
@@ -58,6 +58,16 @@ data = df_to_geojson(
 )
 ```
 
+## geojson_to_dict_list
+Convert data passed as GeoJSON object, filename, URL to a Python list of dictionaries representing the join data from each feature.
+
+### Params
+**geojson_to_dict_list**(_data_)
+
+Parameter | Description
+--|--
+data | GeoJSON join-data for use with vector tiles
+
 ## scale_between
 Scale a minimum and maximum value to an equal interval domain list, with `numStops` values in in the list.
 

diff --git a/docs/viz.md b/docs/viz.md
diff --git a/examples/data/healthcare_points.geojson b/examples/data/healthcare_points.geojson
diff --git a/examples/notebooks/circle-vector.ipynb b/examples/notebooks/circle-vector.ipynb
diff --git a/mapboxgl/errors.py b/mapboxgl/errors.py
@@ -1,5 +1,10 @@
 class TokenError(ValueError):
     pass
 
+
 class ValueError(ValueError):
     pass
+
+
+class SourceDataError(ValueError):
+	pass
diff --git a/mapboxgl/templates/choropleth.html b/mapboxgl/templates/choropleth.html
@@ -78,12 +78,13 @@
                 {% if labelProperty %}
                 "text-field": "{{ labelProperty }}",
                 {% endif %}
-                "text-size" : generateInterpolateExpression('zoom', [[0,8],[22,16]] ),
+                "text-size" : generateInterpolateExpression('zoom', [[0, {{ labelSize }}],[22, 3* {{ labelSize }}]] ),
                 "text-offset": [0,-1]
             },
             "paint": {
-                "text-halo-color": "white",
-                "text-halo-width": 1
+                "text-halo-color": "{{ labelHaloColor }}",
+                "text-halo-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ labelHaloWidth }}], [18,5* {{ labelHaloWidth }}]]),
+                "text-color": "{{ labelColor }}"
             }
         }, "{{ belowLayer }}" );
 
@@ -103,7 +104,6 @@
 
         {% endif %}
 
-
         {% endblock choropleth %}
 
         // Create a popup

diff --git a/mapboxgl/templates/circle.html b/mapboxgl/templates/circle.html
@@ -21,6 +21,8 @@
 
     map.on('style.load', function() {
 
+        {% block circle %}
+
         map.addSource("data", {
             "type": "geojson",
             "data": {{ geojson_data }},
@@ -68,11 +70,15 @@
             }
         }, "label");
 
+        {% endblock circle %}
+
         // Create a popup
         var popup = new mapboxgl.Popup({
             closeButton: false,
             closeOnClick: false
         });
+
+        {% block circle_popup %}
 
         // Show the popup on mouseover
         map.on('mousemove', 'circle', function(e) {
@@ -92,6 +98,8 @@
                 .addTo(map);
         });
 
+        {% endblock circle_popup %}
+
         map.on('mouseleave', 'circle', function() {
             map.getCanvas().style.cursor = '';
             popup.remove();

diff --git a/mapboxgl/templates/clustered_circle.html b/mapboxgl/templates/clustered_circle.html
@@ -19,6 +19,8 @@
 
     map.on('style.load', function() {
 
+        {% block clustered_circle %}
+
         map.addSource("data", {
             "type": "geojson",
             "data": {{ geojson_data }}, //data from dataframe output to geojson
@@ -80,12 +82,16 @@
             }
         }, "circle-cluster");
 
+        {% endblock clustered_circle %}
+
         // Create a popup
         var popup = new mapboxgl.Popup({
             closeButton: false,
             closeOnClick: false
         });
 
+        {% block clustered_circle_popup %}
+
         // Show the popup on mouseover
         map.on('mousemove', 'circle-unclustered', function(e) {
             map.getCanvas().style.cursor = 'pointer';
@@ -119,6 +125,8 @@
                 .addTo(map);
         });
 
+        {% endblock clustered_circle_popup %}
+
         map.on('mouseleave', 'circle-unclustered', function() {
             map.getCanvas().style.cursor = '';
             popup.remove();
@@ -129,7 +137,6 @@
             popup.remove();
         });
 
-
         map.on('click', 'circle-unclustered', function(e) {
             map.easeTo({
                 center: e.features[0].geometry.coordinates,

diff --git a/mapboxgl/templates/graduated_circle.html b/mapboxgl/templates/graduated_circle.html
@@ -21,6 +21,8 @@
 
     map.on('style.load', function() {
 
+        {% block graduated_circle %}
+
         map.addSource("data", {
             "type": "geojson",
             "data": {{ geojson_data }}, //data from dataframe output to geojson
@@ -72,11 +74,15 @@
             }
         }, "label");
 
+        {% endblock graduated_circle %}
+
         // Create a popup
         var popup = new mapboxgl.Popup({
             closeButton: false,
             closeOnClick: false
         });
+
+        {% block graduated_circle_popup %}
 
         // Show the popup on mouseover
         map.on('mousemove', 'circle', function(e) {
@@ -96,6 +102,8 @@
                 .addTo(map);
         });
 
+        {% endblock graduated_circle_popup %}
+
         map.on('mouseleave', 'circle', function() {
             map.getCanvas().style.cursor = '';
             popup.remove();

diff --git a/mapboxgl/templates/heatmap.html b/mapboxgl/templates/heatmap.html
@@ -6,6 +6,8 @@
 
     map.on('style.load', function() {
 
+    {% block heatmap %}
+
         map.addSource("data", {
             "type": "geojson",
             "data": {{ geojson_data }}, //data from dataframe output to geojson
@@ -14,7 +16,7 @@
         });
 
         map.addLayer({
-            "id": "circle",
+            "id": "heatmap",
             "source": "data",
             "type": "heatmap",
             "maxzoom": {{ maxzoom }},
@@ -35,6 +37,8 @@
                 "heatmap-opacity" : {{ opacity }}
             }
         }, "{{belowLayer}}" );
+
+    {% endblock heatmap %}
 
     });
 

diff --git a/mapboxgl/templates/linestring.html b/mapboxgl/templates/linestring.html
@@ -66,7 +66,7 @@
                 {% if labelProperty %}
                 "text-field": "{{ labelProperty }}",
                 {% endif %}
-                "text-size" : generateInterpolateExpression('zoom', [[0,8],[22,16]] ),
+                "text-size" : generateInterpolateExpression('zoom', [[0, {{ labelSize }}],[22, 3* {{ labelSize }}]] ),
                 "text-offset": [0,-1]
             },
             "paint": {

diff --git a/mapboxgl/templates/symbol.html b/mapboxgl/templates/symbol.html
@@ -0,0 +1,64 @@
+//https://www.mapbox.com/help/custom-markers-gl-js/
+
+{% extends "base.html" %}
+
+{% block legend %}{% endblock legend %}
+
+{% block map %}
+
+    map.on('style.load', function() {
+
+        // Add data source
+        map.addSource("data", {
+            "type": "geojson",
+            "data": {{ geojson_data }},
+            "buffer": 1,
+            "maxzoom": 14
+        });
+
+        // Add symbol layer
+        map.addLayer({
+            "id": "symbol",
+            "source": "data",
+            "type": "symbol",
+            "maxzoom": {{ maxzoom }},
+            "minzoom": {{ minzoom }},
+
+            "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 }}"
+            }
+        }, "{{ belowLayer }}" );        
+
+        // Add label layer
+        map.addLayer({
+            "id": "symbol-label",
+            "source": "data",
+            "type": "symbol",
+            "maxzoom": {{ maxzoom }},
+            "minzoom": {{ minzoom }},
+            "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 }}"
+            }
+        }, "{{ belowLayer }}" );
+
+    });
+
+{% endblock map %}