Merge 2f8d2a3 into 6e95434

mapbox · Jan 31, 2019 · 2964e3c · 2964e3c
2 parents 6e95434 + 2f8d2a3
commit 2964e3c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 40 deletions.
diff --git a/mapboxgl/__init__.py b/mapboxgl/__init__.py
@@ -1,4 +1,4 @@
 from .viz import CircleViz, GraduatedCircleViz, HeatmapViz, ClusteredCircleViz, ImageViz, RasterTilesViz, ChoroplethViz, LinestringViz
 
-__version__ = "0.10.0"
+__version__ = "0.10.1"
 __all__ = ['CircleViz', 'GraduatedCircleViz', 'HeatmapViz', 'ClusteredCircleViz', 'ImageViz', 'RasterTilesViz', 'ChoroplethViz', 'LinestringViz']
diff --git a/mapboxgl/templates/choropleth.html b/mapboxgl/templates/choropleth.html
@@ -45,7 +45,10 @@
             "source": "data",
             "type": "fill",
             "paint": {
-                "fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
+                "fill-color": ["case",
+                    ["boolean", ["feature-state", "hover"], false], 
+                    "{{ highlightColor }}",
+                    generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}")],
                 "fill-opacity": {{ opacity }}
             }
         }, "{{ belowLayer }}" );
@@ -97,7 +100,10 @@
                 source: "data",
                 paint: {
                     "fill-extrusion-opacity": {{ opacity }},
-                    "fill-extrusion-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
+                    "fill-extrusion-color": ["case",
+                        ["boolean", ["feature-state", "hover"], false], 
+                        "{{ highlightColor }}",
+                        generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}")],
                     "fill-extrusion-height": generatePropertyExpression("{{ heightType }}", "{{ heightProperty }}", {{ heightStops }}, {{ defaultHeight }}),
                 }
             }, "{{ belowLayer }}");
@@ -107,6 +113,7 @@
         {% endblock choropleth %}
 
         // Popups
+        var interactionLayer = {% if extrudeChoropleth %} 'choropleth-extrusion' {% else %} 'choropleth-fill' {% endif %};
         {% if popupOpensOnHover %}
             var popupAction = 'mousemove',
                 popupSettings =  {
@@ -127,45 +134,44 @@
         {% block choropleth_popup %}
 
         // Show the popup on mouseover
-        map.on(popupAction, 'choropleth-fill', function(e) {
+        var hoveredStateId = 0;
 
-            {% if popupOpensOnHover %}
+        map.on(popupAction, function(e) {
+            var features = map.queryRenderedFeatures(e.point, {layers: [interactionLayer] });
+
+            if (features.length > 0) {
                 map.getCanvas().style.cursor = 'pointer';
-            {% endif %}
-
-            let f = e.features[0];
-            let popup_html = '<div>';
+                var f = features[0];
+                newHoveredStateId = f.id;
+                if (newHoveredStateId != hoveredStateId) {
+                    map.removeFeatureState({source: 'data', id: hoveredStateId});
+                    hoveredStateId = newHoveredStateId;
+                }
+                map.setFeatureState({source: 'data', id: hoveredStateId}, { hover: true});
+                let popup_html = '<div>';
 
-            for (key in f.properties) {
-                popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'
-            }
+                for (key in f.properties) {
+                    popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'
+                }
 
-            popup_html += '</div>'
-            popup.setLngLat(e.lngLat)
-                .setHTML(popup_html)
-                .addTo(map);
+                popup_html += '</div>'
+                popup.setLngLat(e.lngLat)
+                    .setHTML(popup_html)
+                    .addTo(map);
+            }
+            else {
+                map.getCanvas().style.cursor = '';
+                popup.remove();
+                map.removeFeatureState({source: 'data', id: hoveredStateId});
+            }
         });
 
         {% endblock choropleth_popup %}
-
-        // change cursor to pointer when mouse is over the choropleth feature layer
-        map.on('mouseenter', 'choropleth-fill', function () {
-            map.getCanvas().style.cursor = 'pointer';
-        });
-
-        // reset cursor to pointer when mouse leaves the choropleth feature layer
-        map.on('mouseleave', 'choropleth-fill', function() {
-            map.getCanvas().style.cursor = '';
-            {% if popupOpensOnHover %}
-                popup.remove();
-            {% endif %}
-        });
 
-        // Fly to on click
-        map.on('click', 'choropleth-fill', function(e) {
+        // Fly to selected feature on click
+        map.on('click', interactionLayer, function(e) {
             map.flyTo({
-                center: e.lngLat,
-                zoom: map.getZoom() + 1
+                center: e.lngLat
             });
         });
 

diff --git a/mapboxgl/templates/map.html b/mapboxgl/templates/map.html
@@ -11,7 +11,8 @@
             "type": "geojson",
             "data": {{ geojson_data }},
             "buffer": 1,
-            "maxzoom": 14
+            "maxzoom": 14.
+            generateId: true
         });
 
         // Add data layer

diff --git a/mapboxgl/templates/vector_choropleth.html b/mapboxgl/templates/vector_choropleth.html
@@ -146,7 +146,8 @@
 {% block choropleth_popup %}
 
     // Show the popup on mouseover
-    map.on(popupAction, 'choropleth-fill', function(e) {
+    var interactionLayer = {% if extrudeChoropleth %} 'choropleth-extrusion' {% else %} 'choropleth-fill' {% endif %};
+    map.on(popupAction, interactionLayer, function(e) {
 
         {% if popupOpensOnHover %}
             map.getCanvas().style.cursor = 'pointer';

diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
@@ -12,7 +12,7 @@
 from mapboxgl import templates
 
 
-GL_JS_VERSION = 'v0.51.0'
+GL_JS_VERSION = 'v0.53.0-beta.1'
 
 
 class VectorMixin(object):
@@ -87,7 +87,7 @@ def __init__(self,
                  opacity=1,
                  div_id='map',
                  height='500px',
-                 style='mapbox://styles/mapbox/light-v9?optimize=true',
+                 style='mapbox://styles/mapbox/light-v10?optimize=true',
                  label_property=None,
                  label_size=8,
                  label_color='#131516',
@@ -588,6 +588,7 @@ def __init__(self,
                  height_default=0.0,
                  height_function_type='interpolate',
                  legend_key_shape='rounded-square',
+                 highlight_color='black',
                  *args,
                  **kwargs):
         """Construct a Mapviz object
@@ -607,8 +608,8 @@ def __init__(self,
         :param height_property: feature property for determining polygon height in 3D extruded choropleth map
         :param height_stops: property for determining 3D extrusion height
         :param height_default: default height for 3D extruded polygons
-        :param height_function_type: roperty to determine `type` used by Mapbox to assign height
-        
+        :param height_function_type: property to determine `type` used by Mapbox to assign height
+        :param highlight_color: color for feature selection, hover, or highlight
         """
         super(ChoroplethViz, self).__init__(data, *args, **kwargs)
 
@@ -627,6 +628,7 @@ def __init__(self,
         self.height_default = height_default
         self.height_function_type = height_function_type
         self.legend_key_shape = legend_key_shape
+        self.highlight_color = highlight_color
 
     def add_unique_template_variables(self, options):
         """Update map template variables specific to heatmap visual"""
@@ -658,6 +660,7 @@ def add_unique_template_variables(self, options):
             lineStroke=self.line_stroke,
             lineWidth=self.line_width,
             extrudeChoropleth=self.extrude,
+            highlightColor=self.highlight_color
         ))
         if self.extrude:
             options.update(dict(

diff --git a/setup.py b/setup.py
@@ -33,4 +33,4 @@
     zip_safe=False,
     install_requires=['jinja2', 'geojson', 'chroma-py', 'colour', 'matplotlib'],
     extras_require={
-        'test': ['pytest', 'pytest-cov', 'codecov', 'mock', 'jupyter', 'Sphinx', 'pandas']})
+        'test': ['pytest>=3.6', 'pytest-cov', 'codecov', 'mock', 'jupyter', 'Sphinx', 'pandas']})