Add line_color, line_stroke, and line_width properties to Chloropleth…

…Viz; update url transformRequest function in map init to match implementation in master

mapboxgl/templates/chloropleth.html

@@ -1,5 +1,11 @@
 {% extends "main.html" %}
 
+<style type='text/css'>
+    .legend div span {
+        border-radius: 20%;
+    }
+</style>
+
 {% block javascript %}
 var legend = document.getElementById('legend');
 
@@ -11,16 +17,37 @@
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {
-        return {
-           url: [url.slice(0, url.indexOf("?")+1), "pluginName=PythonMapboxgl&", url.slice(url.indexOf("?")+1)].join('')
-         }
+        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 }}");
 
+function generateLineStroke(propertyValue, stops, defaultValue) {
+
+    generateMatchExpression(propertyValue, stops, defaultValue)
+
+    var expression;
+    expression = ['match', ['get', propertyValue]]
+    for (var i=0; i<stops.length; i++) {
+        expression.push(stops[i][0], stops[i][1])
+    }
+    expression.push(defaultValue)
+
+    return expression
+}
+
 map.on('style.load', function() {
 
     // Add data source
@@ -40,7 +67,24 @@
             "fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
             "fill-opacity": {{ opacity }}
         }
-    }, "{{belowLayer}}" );
+    }, "{{ belowLayer }}" );
+
+    // Add data layer
+    map.addLayer({
+        "id": "chloropleth-line",
+        "source": "data",
+        "type": "line",
+        "layout": {
+            "line-join": "round",
+            "line-cap": "round"
+        },
+        "paint": {
+            "line-dasharray": {{ lineDashArray }},
+            "line-color": "{{ lineColor }}",
+            "line-width": {{ lineWidth }},
+            "line-opacity": {{ opacity }}
+        }
+    }, "{{ belowLayer }}" );
 
     // Create a popup
     var popup = new mapboxgl.Popup({
@@ -72,7 +116,6 @@
 
     // Fly to on click
     map.on('click', 'chloropleth-fill', function(e) {
-
         map.flyTo({
             center: e.lngLat,
             zoom: map.getZoom() + 1

mapboxgl/viz.py

@@ -279,6 +279,9 @@ def __init__(self,
                  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
@@ -293,14 +296,35 @@ def __init__(self,
         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
+            defaultColor=self.color_default,
+            lineColor=self.line_color,
+            lineDashArray=self.line_dash_array,
+            lineStroke=self.line_stroke,
+            lineWidth=self.line_width,
         ))