Merge 07bf5e5 into d6c6582

examples/chloropleth-viz-example.ipynb

@@ -0,0 +1,124 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Mapboxgl Python Library\n",
+    "\n",
+    "https://github.com/mapbox/mapboxgl-jupyter"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd\n",
+    "import sys\n",
+    "import os\n",
+    "\n",
+    "from mapboxgl.viz import *\n",
+    "from mapboxgl.utils import *\n",
+    "from mapboxgl.colors import *\n",
+    "\n",
+    "# Must be a public token, starting with `pk`\n",
+    "token = os.getenv('MAPBOX_ACCESS_TOKEN')\n",
+    "\n",
+    "with open('us-states.geojson', 'r') as f:\n",
+    "    data = json.load(f)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Chloropleths with interpolated color assignment"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sample_color_stops = [\n",
+    "    [0.0, 'rgb(255,255,204)'],\n",
+    "    [100.0, 'rgb(255,237,160)'],\n",
+    "    [500.0, 'rgb(253,141,60)'],\n",
+    "    [2000.0, 'rgb(227,26,28)'],\n",
+    "    [5000.0, 'rgb(189,0,38)'],\n",
+    "    [10000.0,'rgb(128,0,38)']\n",
+    "]\n",
+    "    \n",
+    "    \n",
+    "viz = ChloroplethViz(data, opacity=0.8)\n",
+    "viz.color_property = 'density'\n",
+    "viz.color_stops = sample_color_stops\n",
+    "viz.color_function_type = 'interpolate'\n",
+    "viz.default_color = '#bada55'\n",
+    "viz.center = (-96, 37.8)\n",
+    "viz.zoom = 3\n",
+    "viz.below_layer = 'waterway-label'\n",
+    "viz.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Chloropleths with match-type color scheme"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "match_color_stops = [\n",
+    "    ['Massachusetts', 'rgb(46,204,113)'],\n",
+    "    ['Utah', 'rgb(231,76,60)'],\n",
+    "    ['California', 'rgb(142,68,173)'],\n",
+    "]\n",
+    "    \n",
+    "viz = ChloroplethViz(data, opacity=0.8)\n",
+    "viz.color_property = 'name'\n",
+    "viz.color_stops = match_color_stops\n",
+    "viz.color_function_type = 'match'\n",
+    "viz.color_default = 'rgba(52,73,94,0.5)'\n",
+    "viz.center = (-96, 37.8)\n",
+    "viz.zoom = 3\n",
+    "viz.below_layer = 'waterway-label'\n",
+    "viz.show()"
+   ]
+  }
+ ],
+ "metadata": {
+  "anaconda-cloud": {
+   "attach-environment": true,
+   "environment": "Root",
+   "summary": "Mapboxgl Python Data Visualization example"
+  },
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.6.1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

mapboxgl/templates/chloropleth.html

@@ -0,0 +1,114 @@
+{% extends "main.html" %}
+
+<style type='text/css'>
+    .legend div span {
+        border-radius: 20%;
+    }
+</style>
+
+{% block javascript %}
+var legend = document.getElementById('legend');
+
+mapboxgl.accessToken = '{{ accessToken }}';
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: '{{ styleUrl }}', 
+    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}
+        }
+    }
+});
+
+map.addControl(new mapboxgl.NavigationControl());
+
+calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }}");
+
+map.on('style.load', function() {
+
+    // Add geojson data source
+    map.addSource("data", {
+        "type": "geojson",
+        "data": {{ geojson_data }},
+        "buffer": 1,
+        "maxzoom": 14
+    });
+
+    // Add data layer
+    map.addLayer({
+        "id": "chloropleth-fill",
+        "source": "data",
+        "type": "fill",
+        "paint": {
+            "fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
+            "fill-opacity": {{ opacity }}
+        }
+    }, "{{ belowLayer }}" );
+
+    // Add data layer
+    map.addLayer({
+        "id": "chloropleth-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 }}" );
+
+    // Create a popup
+    var popup = new mapboxgl.Popup({
+        closeButton: false,
+        closeOnClick: false
+    });
+
+    // Show the popup on mouseover
+    map.on('mousemove', 'chloropleth-fill', function(e) {
+        map.getCanvas().style.cursor = 'pointer';
+
+        let f = e.features[0];
+        let popup_html = '<div>';
+
+        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);
+    });
+
+    map.on('mouseleave', 'chloropleth-fill', function() {
+        map.getCanvas().style.cursor = '';
+        popup.remove();
+    });
+
+    // Fly to on click
+    map.on('click', 'chloropleth-fill', function(e) {
+        map.flyTo({
+            center: e.lngLat,
+            zoom: map.getZoom() + 1
+        });
+    });
+
+});
+{% endblock %}

mapboxgl/viz.py

@@ -274,3 +274,63 @@ def add_unique_template_variables(self, options):
             clusterRadius=self.clusterRadius,
             clusterMaxZoom=self.clusterMaxZoom
         ))
+
+
+class ChloroplethViz(MapViz):
+    """Create a heatmap viz"""
+
+    def __init__(self,
+                 data,
+                 color_property=None,
+                 color_stops=None,
+                 color_default='grey',
+                 color_function_type='interpolate',
+                 line_color='white',
+                 line_stroke='solid',
+                 line_width=1,
+                 *args,
+                 **kwargs):
+        """Construct a Mapviz object
+
+        :param weight_property: property to determine heatmap weight. EX. "population"
+
+        """
+        super(ChloroplethViz, self).__init__(data, *args, **kwargs)
+
+        self.template = 'chloropleth'
+        self.color_property = color_property
+        self.color_stops = color_stops
+        self.color_default = color_default
+        self.color_function_type = color_function_type
+        self.line_color = line_color
+        self.line_stroke = line_stroke
+        self.line_width = line_width
+
+    def add_unique_template_variables(self, options):
+        """Update map template variables specific to heatmap visual"""
+
+        # set line stroke dash interval based on line_stroke property
+        if self.line_stroke == "dashed":
+            self.line_dash_array = [6, 4]
+        elif self.line_stroke == "dotted":
+            self.line_dash_array = [0.5, 4]
+        elif self.line_stroke == "dash dot":
+            self.line_dash_array = [6, 4, 0.5, 4]
+        elif self.line_stroke == "solid":
+            self.line_dash_array = [1, 0]
+        else:
+            # default to solid line
+            self.line_dash_array = [1, 0]
+
+        options.update(dict(
+            geojson_data=json.dumps(self.data, ensure_ascii=False),
+            colorProperty=self.color_property,
+            colorType=self.color_function_type,
+            colorStops=self.color_stops,
+            defaultColor=self.color_default,
+            lineColor=self.line_color,
+            lineDashArray=self.line_dash_array,
+            lineStroke=self.line_stroke,
+            lineWidth=self.line_width,
+        ))
+