From 86b60c28f70d31de4abd30f72b6fcb4525fc3436 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Fri, 21 Jun 2019 22:29:21 -0700
Subject: [PATCH 1/9] Add identity color_function_type (requires some defaults
 to be set for legend CSS; also handles radius_function_type, height..., etc.

---
 examples/data/state_colors.geojson        |  94 ++++
 examples/notebooks/identity_example.ipynb | 642 ++++++++++++++++++++++
 mapboxgl/templates/main.html              |  32 +-
 mapboxgl/viz.py                           |  25 +
 4 files changed, 779 insertions(+), 14 deletions(-)
 create mode 100644 examples/data/state_colors.geojson
 create mode 100644 examples/notebooks/identity_example.ipynb

diff --git a/examples/data/state_colors.geojson b/examples/data/state_colors.geojson
new file mode 100644
index 0000000..602bfb4
--- /dev/null
+++ b/examples/data/state_colors.geojson
@@ -0,0 +1,94 @@
+{ 
+  "type": "FeatureCollection", 
+  "features": [
+    {
+      "type": "Feature", 
+      "id": "49", 
+      "properties": {
+        "name": "Utah", 
+        "density": 34.3,
+        "color": "gold"
+      }, 
+      "geometry": {
+        "type": "Polygon", 
+        "coordinates": [
+                        [
+                          [-112.164359, 41.995232], 
+                          [-111.047063, 42.000709], 
+                          [-111.047063, 40.998429], 
+                          [-109.04798, 40.998429], 
+                          [-109.053457, 39.125316], 
+                          [-109.058934, 38.27639], 
+                          [-109.042503, 38.166851], 
+                          [-109.042503, 37.000263], 
+                          [-110.499369, 37.00574], 
+                          [-114.048427, 37.000263], 
+                          [-114.04295, 41.995232], 
+                          [-112.164359, 41.995232]
+                        ]
+                      ]
+      }
+    },
+    {
+      "type": "Feature", 
+      "id": "08", 
+      "properties": {
+        "name": "Colorado", 
+        "density": 49.33,
+        "color": "skyblue"
+      }, 
+      "geometry": {
+        "type": "Polygon", 
+        "coordinates": [
+                        [
+                          [-107.919731, 41.003906], 
+                          [-105.728954, 40.998429], 
+                          [-104.053011, 41.003906], 
+                          [-102.053927, 41.003906], 
+                          [-102.053927, 40.001626], 
+                          [-102.042974, 36.994786], 
+                          [-103.001438, 37.000263], 
+                          [-104.337812, 36.994786], 
+                          [-106.868158, 36.994786], 
+                          [-107.421329, 37.000263], 
+                          [-109.042503, 37.000263], 
+                          [-109.042503, 38.166851], 
+                          [-109.058934, 38.27639], 
+                          [-109.053457, 39.125316], 
+                          [-109.04798, 40.998429], 
+                          [-107.919731, 41.003906]
+                        ]
+                      ]
+      }
+    }, 
+    {
+      "type": "Feature", 
+      "id": "56", 
+      "properties": {
+        "name": "Wyoming", 
+        "density": 5.851,
+        "color": "orange"
+      }, 
+      "geometry": {
+        "type": "Polygon", 
+        "coordinates": [
+                        [
+                          [-109.080842, 45.002073], 
+                          [-105.91517, 45.002073], 
+                          [-104.058488, 44.996596], 
+                          [-104.053011, 43.002989], 
+                          [-104.053011, 41.003906], 
+                          [-105.728954, 40.998429], 
+                          [-107.919731, 41.003906], 
+                          [-109.04798, 40.998429], 
+                          [-111.047063, 40.998429], 
+                          [-111.047063, 42.000709], 
+                          [-111.047063, 44.476286], 
+                          [-111.05254, 45.002073], 
+                          [-109.080842, 45.002073]
+                        ]
+                      ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/notebooks/identity_example.ipynb b/examples/notebooks/identity_example.ipynb
new file mode 100644
index 0000000..968275d
--- /dev/null
+++ b/examples/notebooks/identity_example.ipynb
@@ -0,0 +1,642 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe id=\"map\", srcdoc=\"<!DOCTYPE html>\n",
+       "<html>\n",
+       "<head>\n",
+       "<title>mapboxgl-jupyter viz</title>\n",
+       "<meta charset='UTF-8' />\n",
+       "<meta name='viewport'\n",
+       "      content='initial-scale=1,maximum-scale=1,user-scalable=no' />\n",
+       "<script type='text/javascript'\n",
+       "        src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>\n",
+       "<link type='text/css'\n",
+       "      href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' \n",
+       "      rel='stylesheet' />\n",
+       "\n",
+       "<style type='text/css'>\n",
+       "    body { margin:0; padding:0; }\n",
+       "    .map { position: absolute; top:0; bottom:0; width:100%; }\n",
+       "\n",
+       "    .legend {\n",
+       "        background-color: white;\n",
+       "        color: #6e6e6e;\n",
+       "        border-radius: 3px;\n",
+       "        bottom: 10px;\n",
+       "        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);\n",
+       "        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;\n",
+       "        padding: 0;\n",
+       "        position: absolute;\n",
+       "        right: 10px;\n",
+       "        z-index: 1;\n",
+       "        min-width: 100px;\n",
+       "    }\n",
+       "   .legend.horizontal {bottom: 10px; text-align: left;}\n",
+       "\n",
+       "    /* legend header */\n",
+       "    .legend .legend-header { border-radius: 3px 3px 0 0; background: white; }\n",
+       "    .legend .legend-title {\n",
+       "        padding: 6px 12px 6px 12px;\n",
+       "        text-shadow: 0 0 2px white;\n",
+       "        text-transform: capitalize;\n",
+       "        text-align: center;\n",
+       "        font-weight: bold !important;\n",
+       "        font-size: 14px;\n",
+       "        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;\n",
+       "        max-width: 160px;\n",
+       "    }\n",
+       "    .legend-title {padding: 6px 12px 6px 12px; text-shadow: 0 0 2px #FFF; text-transform: capitalize; text-align: center; max-width: 160px; font-size: 0.9em; font-weight: bold;}\n",
+       "    .legend.horizontal .legend-title {text-align: left;}\n",
+       "\n",
+       "    /* legend items */\n",
+       "    .legend-content {margin: 6px 12px 6px 12px; overflow: hidden; padding: 0; float: left; list-style: none; font-size: 0.8em;}\n",
+       "    .legend.vertical .legend-item {white-space: nowrap;}\n",
+       "    .legend-value {display: inline-block; line-height: 18px; vertical-align: top;}\n",
+       "    .legend.horizontal ul.legend-content li.legend-item .legend-value,\n",
+       "    .legend.horizontal ul.legend-content li.legend-item {display: inline-block; float: left; width: 30px; margin-bottom: 0; text-align: center; min-height: 30px;}\n",
+       "\n",
+       "    /* legend key styles */\n",
+       "    .legend-key {display: inline-block; height: 10px;}\n",
+       "    .legend-key.default, .legend-key.square {border-radius: 0;}\n",
+       "    .legend-key.circle {border-radius: 50%;}\n",
+       "    .legend-key.rounded-square {border-radius: 20%;}\n",
+       "    .legend.vertical .legend-key {width: 10px; margin-right: 5px; margin-left: 1px;}\n",
+       "    .legend.horizontal .legend-key {width: 30px; margin-right: 0; margin-top: 1px; float: left;}\n",
+       "    .legend.horizontal .legend-key.square, .legend.horizontal .legend-key.rounded-square, .legend.horizontal .legend-key.circle {margin-left: 10px; width: 10px;}\n",
+       "    .legend.horizontal .legend-key.line {margin-left: 5px;}\n",
+       "    .legend.horizontal .legend-key.line, .legend.vertical .legend-key.line {border-radius: 10%; width: 20px; height: 3px; margin-bottom: 2px;}\n",
+       "\n",
+       "    /* gradient bar alignment */\n",
+       "    .gradient-bar {margin: 6px 12px 6px 12px;}\n",
+       "    .legend.horizontal .gradient-bar {width: 88%; height: 10px;}\n",
+       "    .legend.vertical .gradient-bar {width: 10px; min-height: 50px; position: absolute; bottom: 4px;}\n",
+       "\n",
+       "    /* contiguous vertical bars (discrete) */\n",
+       "    .legend.vertical.contig .legend-key {height: 15px; width: 10px;}\n",
+       "    .legend.vertical.contig li.legend-item {height: 15px;}\n",
+       "    .legend.vertical.contig {padding-bottom: 6px;}\n",
+       "\n",
+       "    /* vertical radius legend */\n",
+       "    .legend.horizontal.legend-variable-radius ul.legend-content li.legend-item .legend-value,\n",
+       "    .legend.horizontal.legend-variable-radius ul.legend-content li.legend-item {width: 30px; min-height: 20px;}\n",
+       "\n",
+       "    /* scale annotation */\n",
+       "    .mapboxgl-ctrl.mapboxgl-ctrl-scale { border-color: #6e6e6e; \n",
+       "                                         background-color: white; \n",
+       "                                         color: #131516; }\n",
+       "</style>\n",
+       "\n",
+       "\n",
+       "    <style type='text/css'>\n",
+       "        .gradient.bordered, .legend-key.bordered { border: solid white 1px; }\n",
+       "    </style>\n",
+       "\n",
+       "\n",
+       "</head>\n",
+       "<body>\n",
+       "\n",
+       "<div id='map' class='map'></div>\n",
+       "\n",
+       "<script type='text/javascript'>\n",
+       "\n",
+       "var legendHeader;\n",
+       "\n",
+       "function calcColorLegend(myColorStops, title) {\n",
+       "    // create legend\n",
+       "    var legend = document.createElement('div'),\n",
+       "        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];\n",
+       "\n",
+       "    if ('rounded-square' === 'contiguous-bar') {\n",
+       "        legend.className = 'legend vertical contig';\n",
+       "    }\n",
+       "    else {\n",
+       "        legend.className = 'legend vertical';\n",
+       "    }\n",
+       "    legend.id = 'legend-0';\n",
+       "    document.body.appendChild(legend);\n",
+       "    // add legend header and content elements\n",
+       "    var mytitle = document.createElement('div'),\n",
+       "        legendContent = document.createElement('ul');\n",
+       "    legendHeader = document.createElement('div');\n",
+       "    mytitle.textContent = title;\n",
+       "    mytitle.className = 'legend-title'\n",
+       "    legendHeader.className = 'legend-header'\n",
+       "    legendContent.className = 'legend-content'\n",
+       "    legendHeader.appendChild(mytitle);\n",
+       "    legend.appendChild(legendHeader);\n",
+       "    legend.appendChild(legendContent);\n",
+       "    if (false === true) {\n",
+       "        var gradientText = 'linear-gradient(to right, ',\n",
+       "            gradient = document.createElement('div');\n",
+       "        gradient.className = 'gradient-bar';\n",
+       "        legend.appendChild(gradient);\n",
+       "    }\n",
+       "    // calculate a legend entries on a Mapbox GL Style Spec property function stops array\n",
+       "    for (p = 0; p < myColorStops.length; p++) {\n",
+       "        if (!!document.getElementById('legend-color-points-value-' + p)) {\n",
+       "            // update the legend if it already exists\n",
+       "            document.getElementById('legend-color-points-value-' + p).textContent = myColorStops[p][0];\n",
+       "            document.getElementById('legend-color-points-id-' + p).style.backgroundColor = myColorStops[p][1];\n",
+       "        }\n",
+       "        else {\n",
+       "            // create the legend if it doesn't yet exist\n",
+       "            var item = document.createElement('li');\n",
+       "            item.className = 'legend-item';\n",
+       "            var key = document.createElement('span');\n",
+       "            key.className = 'legend-key rounded-square';\n",
+       "            key.id = 'legend-color-points-id-' + p;\n",
+       "            key.style.backgroundColor = myColorStops[p][1];\n",
+       "            var value = document.createElement('span');\n",
+       "            value.className = 'legend-value';\n",
+       "            value.id = 'legend-color-points-value-' + p;\n",
+       "            item.appendChild(key);\n",
+       "            item.appendChild(value);\n",
+       "            legendContent.appendChild(item);\n",
+       "            \n",
+       "            data = document.getElementById('legend-color-points-value-' + p)\n",
+       "            // round number values in legend if precision defined\n",
+       "            if ((typeof(myColorStops[p][0]) == 'number') && (typeof(null) == 'number')) {\n",
+       "                data.textContent = myColorStops[p][0].toFixed(null);\n",
+       "            }\n",
+       "            else {\n",
+       "                data.textContent = myColorStops[p][0];\n",
+       "            }\n",
+       "            // add color stop to gradient list\n",
+       "            if (false === true) {\n",
+       "                if (p < myColorStops.length - 1) {\n",
+       "                    gradientText = gradientText + myColorStops[p][1] + ', ';\n",
+       "                }\n",
+       "                else {\n",
+       "                    gradientText = gradientText + myColorStops[p][1] + ')';\n",
+       "                }\n",
+       "                if ('vertical' === 'vertical') {\n",
+       "                    gradientText = gradientText.replace('to right', 'to bottom');\n",
+       "                }\n",
+       "            }\n",
+       "        }\n",
+       "    }\n",
+       "    if (false === true) {\n",
+       "        // convert to gradient scale appearance\n",
+       "        gradient.style.background = gradientText;\n",
+       "        // hide legend keys generated above\n",
+       "        var keys = document.getElementsByClassName('legend-key');\n",
+       "        for (var i=0; i < keys.length; i++) {\n",
+       "            keys[i].style.visibility = 'hidden';\n",
+       "        }\n",
+       "        if ('vertical' === 'vertical') {\n",
+       "            gradient.style.height = (legendContent.offsetHeight - 6) + 'px';\n",
+       "        }\n",
+       "    }\n",
+       "    // add class for styling bordered legend keys\n",
+       "    if (true) {\n",
+       "        var keys = document.getElementsByClassName('legend-key');\n",
+       "        for (var i=0; i < keys.length; i++) {\n",
+       "            if (keys[i]) {\n",
+       "                keys[i].classList.add('bordered');\n",
+       "            }\n",
+       "        }\n",
+       "        var gradientBars = document.getElementsByClassName('gradient-bar');\n",
+       "        for (var i=0; i < keys.length; i++) {\n",
+       "            if (gradientBars[i]) {\n",
+       "                gradientBars[i].classList.add('bordered');\n",
+       "            }\n",
+       "        }\n",
+       "    }\n",
+       "    // update right-margin for compact Mapbox attribution based on calculated legend width\n",
+       "    updateAttribMargin(legend);\n",
+       "    updateLegendMargin(legend);\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function calcRadiusLegend(myRadiusStops, title, color) {\n",
+       "\n",
+       "    // maximum legend item height\n",
+       "    var maxLegendItemHeight = 2 * myRadiusStops[myRadiusStops.length - 1][1];\n",
+       "\n",
+       "    // create legend\n",
+       "    var legend = document.createElement('div');\n",
+       "    legend.className = 'legend vertical legend-variable-radius';\n",
+       "\n",
+       "    legend.id = 'legend-1';\n",
+       "    document.body.appendChild(legend);\n",
+       "\n",
+       "    // add legend header and content elements\n",
+       "    var mytitle = document.createElement('div'),\n",
+       "        legendContent = document.createElement('ul');\n",
+       "    legendHeader = document.createElement('div');\n",
+       "    mytitle.textContent = title;\n",
+       "    mytitle.className = 'legend-title'\n",
+       "    legendHeader.className = 'legend-header'\n",
+       "    legendContent.className = 'legend-content'\n",
+       "    legendHeader.appendChild(mytitle);\n",
+       "    legend.appendChild(legendHeader);\n",
+       "    legend.appendChild(legendContent);\n",
+       "\n",
+       "    // calculate a legend entries on a Mapbox GL Style Spec property function stops array\n",
+       "    for (p = 0; p < myRadiusStops.length; p++) {\n",
+       "        if (!!document.getElementById('legend-radius-points-value-' + p)) {\n",
+       "            //update the legend if it already exists\n",
+       "            document.getElementById('legend-radius-points-value-' + p).textContent = myRadiusStops[p][0];\n",
+       "            document.getElementById('legend-radius-points-id-' + p).style.backgroundColor = color;\n",
+       "        }\n",
+       "        else {\n",
+       "            // create the legend if it doesn't yet exist\n",
+       "            var item = document.createElement('li');\n",
+       "            item.className = 'legend-item';\n",
+       "            item.height = '' + maxLegendItemHeight + 'px';\n",
+       "\n",
+       "            var key = document.createElement('span');\n",
+       "            key.className = 'legend-key rounded-square';\n",
+       "            key.id = 'legend-radius-points-id-' + p;\n",
+       "            key.style.backgroundColor = color;   \n",
+       "\n",
+       "            key.style.width = '' + myRadiusStops[p][1] * 2 + 'px';\n",
+       "            key.style.height = '' + myRadiusStops[p][1] * 2 + 'px';\n",
+       "\n",
+       "            keyVerticalMargin = (maxLegendItemHeight - myRadiusStops[p][1] * 2) * 0.5;\n",
+       "            key.style.marginTop = '' + keyVerticalMargin + 'px';\n",
+       "            key.style.marginBottom = '' + keyVerticalMargin + 'px';\n",
+       "\n",
+       "            var value = document.createElement('span');\n",
+       "            value.className = 'legend-value';\n",
+       "            value.id = 'legend-radius-points-value-' + p;\n",
+       "\n",
+       "            item.appendChild(key);\n",
+       "            item.appendChild(value);\n",
+       "            legendContent.appendChild(item);\n",
+       "            \n",
+       "            data = document.getElementById('legend-radius-points-value-' + p)\n",
+       "\n",
+       "            // round number values in legend if precision defined\n",
+       "            if ((typeof(myRadiusStops[p][0]) == 'number') && (typeof(null) == 'number')) {\n",
+       "                data.textContent = myRadiusStops[p][0].toFixed(null);\n",
+       "            }\n",
+       "            else {\n",
+       "                data.textContent = myRadiusStops[p][0];\n",
+       "            }\n",
+       "        }\n",
+       "    }\n",
+       "\n",
+       "    // add class for styling bordered legend keys\n",
+       "    if (true) {\n",
+       "        var keys = document.getElementsByClassName('legend-key');\n",
+       "        for (var i=0; i < keys.length; i++) {\n",
+       "            if (keys[i]) {\n",
+       "                keys[i].classList.add('bordered');\n",
+       "            }\n",
+       "        }\n",
+       "    }\n",
+       "\n",
+       "    // update right-margin for compact Mapbox attribution based on calculated legend width\n",
+       "    updateAttribMargin(legend);\n",
+       "    updateLegendMargin(legend);\n",
+       "\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function updateAttribMargin(legend) {\n",
+       "\n",
+       "    // default margin is based on calculated legend width\n",
+       "    var attribMargin = legend.offsetWidth + 15;\n",
+       "    \n",
+       "    // if horizontal legend layout (multiple legends are stacked vertically)\n",
+       "    if ('vertical' === 'horizontal') {\n",
+       "        document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight = (attribMargin).toString() + 'px';\n",
+       "    }\n",
+       "    // vertical legend layout means multiple legends are side-by-side\n",
+       "    else if ('vertical' === 'vertical') {\n",
+       "        var currentMargin = Number(document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight.replace('px', ''));\n",
+       "        document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight = (attribMargin + currentMargin).toString() + 'px';\n",
+       "    }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function updateLegendMargin(legend) {\n",
+       "\n",
+       "    var verticalLegends = document.getElementsByClassName('legend vertical'),\n",
+       "        horizontalLegends = document.getElementsByClassName('legend horizontal');\n",
+       "\n",
+       "    if (verticalLegends.length > 1) {\n",
+       "        for (i = 1; i < verticalLegends.length; i++) {\n",
+       "            verticalLegends[i].style.marginRight = (legend.offsetWidth - 5).toString() + 'px';\n",
+       "            var legend = verticalLegends[i];\n",
+       "        }\n",
+       "    }\n",
+       "    else if (horizontalLegends.length > 1) {\n",
+       "        for (i = 1; i < horizontalLegends.length; i++) {\n",
+       "            horizontalLegends[i].style.marginBottom = (legend.offsetHeight + 15).toString() + 'px';\n",
+       "            var legend = horizontalLegends[i];\n",
+       "        }\n",
+       "    }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function generateInterpolateExpression(propertyValue, stops) {\n",
+       "    var expression;\n",
+       "    if (propertyValue == 'zoom') {\n",
+       "        expression = ['interpolate', ['exponential', 1.2], ['zoom']]\n",
+       "    }\n",
+       "    else if (propertyValue == 'heatmap-density') {\n",
+       "        expression = ['interpolate', ['linear'], ['heatmap-density']]\n",
+       "    }\n",
+       "    else {\n",
+       "        expression = ['interpolate', ['linear'], ['get', propertyValue]]\n",
+       "    }\n",
+       "\n",
+       "    for (var i=0; i<stops.length; i++) {\n",
+       "        expression.push(stops[i][0], stops[i][1])\n",
+       "    }\n",
+       "    return expression\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function generateMatchExpression(propertyValue, stops, defaultValue) {\n",
+       "    var expression;\n",
+       "    expression = ['match', ['get', propertyValue]]\n",
+       "    for (var i=0; i<stops.length; i++) {\n",
+       "        expression.push(stops[i][0], stops[i][1])\n",
+       "    }\n",
+       "    expression.push(defaultValue)\n",
+       "    \n",
+       "    return expression\n",
+       "}\n",
+       "\n",
+       "\n",
+       "function generatePropertyExpression(expressionType, propertyValue, stops, defaultValue) {\n",
+       "    var expression;\n",
+       "    if (expressionType == 'match') {\n",
+       "        expression = generateMatchExpression(propertyValue, stops, defaultValue)\n",
+       "    }\n",
+       "    else if (expressionType == 'identity') {\n",
+       "        expression = ['get', propertyValue]\n",
+       "    }\n",
+       "    else if (propertyValue == 'identity') {\n",
+       "        expression = ['get', propertyValue]\n",
+       "    }\n",
+       "    else {\n",
+       "        expression = generateInterpolateExpression(propertyValue, stops)\n",
+       "    }\n",
+       "\n",
+       "    return expression\n",
+       "}\n",
+       "\n",
+       "</script>\n",
+       "\n",
+       "<!-- main map creation code, extended by mapboxgl/templates/choropleth.html -->\n",
+       "<script type='text/javascript'>\n",
+       "\n",
+       "    mapboxgl.accessToken = 'pk.eyJ1IjoiYWthY2FybHlhbm4iLCJhIjoiY2pha21yYnlrMmtxejJ3bzJnc3EwdDVteCJ9.K7MzsH7sWuxLDlSy-oqGkg';\n",
+       "\n",
+       "    var transformRequest = function(url, resourceType) {\n",
+       "        const isMapboxRequest = url.slice(8, 22) === 'api.mapbox.com' ||\n",
+       "          url.slice(10, 26) === 'tiles.mapbox.com';\n",
+       "      \n",
+       "        return {\n",
+       "          url: isMapboxRequest ? url.replace('?', '?pluginName=PythonMapboxgl&') : url\n",
+       "        }\n",
+       "    };\n",
+       "\n",
+       "    var map = new mapboxgl.Map({\n",
+       "        container: 'map',\n",
+       "        attributionControl: false,\n",
+       "        style: 'mapbox://styles/mapbox/light-v10?optimize=true',\n",
+       "        center: [-96, 42],\n",
+       "        zoom: 3,\n",
+       "        pitch: 0,\n",
+       "        bearing: 0,\n",
+       "        scrollZoom: true,\n",
+       "        touchZoom: true,\n",
+       "        doubleClickZoom: true,\n",
+       "        boxZoom: true,\n",
+       "        preserveDrawingBuffer: false,\n",
+       "        transformRequest: transformRequest\n",
+       "    });\n",
+       "\n",
+       "    \n",
+       "    \n",
+       "        map.addControl(new mapboxgl.AttributionControl({ compact: true }));\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    \n",
+       "\n",
+       "        map.addControl(new mapboxgl.NavigationControl());\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    \n",
+       "    \n",
+       "    \n",
+       "        \n",
+       "            calcColorLegend([], 'color');\n",
+       "        \n",
+       "    \n",
+       "\n",
+       "\n",
+       "\n",
+       "    \n",
+       "        \n",
+       "        \n",
+       "\n",
+       "    \n",
+       "\n",
+       "    \n",
+       "\n",
+       "    map.on('style.load', function() {\n",
+       "        \n",
+       "        \n",
+       "\n",
+       "        // Add geojson data source\n",
+       "        map.addSource('data', {\n",
+       "            'type': 'geojson',\n",
+       "            'data': '../data/state_colors.geojson',\n",
+       "            'buffer': 1,\n",
+       "            'maxzoom': 14\n",
+       "        });\n",
+       "\n",
+       "        // Add data layer\n",
+       "        map.addLayer({\n",
+       "            'id': 'choropleth-fill',\n",
+       "            'source': 'data',\n",
+       "            'type': 'fill',\n",
+       "            'paint': {\n",
+       "                'fill-color': ['case',\n",
+       "                    ['boolean', ['feature-state', 'hover'], false], \n",
+       "                    'black',\n",
+       "                    generatePropertyExpression('identity', 'color', [], 'grey')],\n",
+       "                'fill-opacity': 1\n",
+       "            }\n",
+       "        }, '' );\n",
+       "\n",
+       "        // Add border layer\n",
+       "        map.addLayer({\n",
+       "            'id': 'choropleth-line',\n",
+       "            'source': 'data',\n",
+       "            'type': 'line',\n",
+       "            'layout': {\n",
+       "                'line-join': 'round',\n",
+       "                'line-cap': 'round'\n",
+       "            },\n",
+       "            'paint': {\n",
+       "                \n",
+       "                'line-dasharray': [1, 0],\n",
+       "                \n",
+       "                'line-color': ['case',\n",
+       "                    ['boolean', ['feature-state', 'hover'], false], \n",
+       "                    'black',\n",
+       "                    'white'],\n",
+       "                'line-width': 1,\n",
+       "                'line-opacity': 1\n",
+       "            }\n",
+       "        }, '' );\n",
+       "\n",
+       "        // Add label layer\n",
+       "        map.addLayer({\n",
+       "            'id': 'choropleth-label',\n",
+       "            'source': 'data',\n",
+       "            'type': 'symbol',\n",
+       "            'layout': {\n",
+       "                \n",
+       "                'text-size' : generateInterpolateExpression('zoom', [[0, 8],[22, 3* 8]] ),\n",
+       "                'text-offset': [0,-1]\n",
+       "            },\n",
+       "            'paint': {\n",
+       "                'text-halo-color': 'white',\n",
+       "                'text-halo-width': generatePropertyExpression('interpolate', 'zoom', [[0,1], [18,5* 1]]),\n",
+       "                'text-color': ['case',\n",
+       "                    ['boolean', ['feature-state', 'hover'], false], \n",
+       "                    'black', '#131516']\n",
+       "            }\n",
+       "        }, '' );\n",
+       "\n",
+       "        // Optional extrusion layer\n",
+       "        \n",
+       "\n",
+       "        \n",
+       "\n",
+       "        // Popups\n",
+       "        var interactionLayer =  'choropleth-fill' ;\n",
+       "        \n",
+       "            var popupAction = 'mousemove',\n",
+       "                popupSettings =  {\n",
+       "                    closeButton: false,\n",
+       "                    closeOnClick: false\n",
+       "                };\n",
+       "        \n",
+       "\n",
+       "        // Create a popup\n",
+       "        var popup = new mapboxgl.Popup(popupSettings);\n",
+       "        \n",
+       "        \n",
+       "\n",
+       "        // Show the popup on mouseover\n",
+       "        var hoveredStateId = 0;\n",
+       "\n",
+       "        map.on(popupAction, function(e) {\n",
+       "            var features = map.queryRenderedFeatures(e.point, {layers: [interactionLayer, 'choropleth-label'] });\n",
+       "\n",
+       "            if (features.length > 0) {\n",
+       "                map.getCanvas().style.cursor = 'pointer';\n",
+       "                var f = features[0];\n",
+       "                newHoveredStateId = f.id;\n",
+       "                if (newHoveredStateId != hoveredStateId) {\n",
+       "                    map.removeFeatureState({source: 'data', id: hoveredStateId});\n",
+       "                    hoveredStateId = newHoveredStateId;\n",
+       "                }\n",
+       "                map.setFeatureState({source: 'data', id: hoveredStateId}, { hover: true});\n",
+       "                let popup_html = '<div>';\n",
+       "\n",
+       "                for (key in f.properties) {\n",
+       "                    popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'\n",
+       "                }\n",
+       "\n",
+       "                popup_html += '</div>'\n",
+       "                popup.setLngLat(e.lngLat)\n",
+       "                    .setHTML(popup_html)\n",
+       "                    .addTo(map);\n",
+       "            }\n",
+       "            else {\n",
+       "                map.getCanvas().style.cursor = '';\n",
+       "                popup.remove();\n",
+       "                map.removeFeatureState({source: 'data', id: hoveredStateId});\n",
+       "            }\n",
+       "        });\n",
+       "\n",
+       "        \n",
+       "        \n",
+       "        // Fly to selected feature on click\n",
+       "        map.on('click', interactionLayer, function(e) {\n",
+       "            map.easeTo({\n",
+       "                center: e.lngLat\n",
+       "            });\n",
+       "        });\n",
+       "\n",
+       "    });\n",
+       "\n",
+       "\n",
+       "\n",
+       "</script>\n",
+       "\n",
+       "<!-- add capability to export map or legend to image file -->\n",
+       "\n",
+       "\n",
+       "</body>\n",
+       "</html>\" style=\"width: 100%; height: 200px;\"></iframe>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "from mapboxgl.viz import *\n",
+    "viz = ChoroplethViz('../data/state_colors.geojson', \n",
+    "                    access_token=os.getenv('MAPBOX_ACCESS_TOKEN'),\n",
+    "                    center=(-96, 42), \n",
+    "                    zoom=3,\n",
+    "                    color_function_type='identity',\n",
+    "                    height='200px',\n",
+    "                    legend=False)\n",
+    "viz.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "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": 2
+}
diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 0dfc844..15dfbaf 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -14,9 +14,10 @@
 <style type='text/css'>
     body { margin:0; padding:0; }
     .map { position: absolute; top:0; bottom:0; width:100%; }
+
     .legend {
-        background-color: {{ legendFill }};
-        color: {{ legendTextColor }};
+        background-color: {{ legendFill|default("white") }};
+        color: {{ legendTextColor|default("black") }};
         border-radius: 3px;
         bottom: 10px;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
@@ -30,10 +31,10 @@
    .legend.horizontal {bottom: 10px; text-align: left;}
 
     /* legend header */
-    .legend .legend-header { border-radius: 3px 3px 0 0; background: {{ legendHeaderFill }}; }
+    .legend .legend-header { border-radius: 3px 3px 0 0; background: {{ legendHeaderFill|default("white") }}; }
     .legend .legend-title {
         padding: 6px 12px 6px 12px;
-        text-shadow: 0 0 2px {{ legendTitleHaloColor }};
+        text-shadow: 0 0 2px {{ legendTitleHaloColor|default("white") }};
         text-transform: capitalize;
         text-align: center;
         font-weight: bold !important;
@@ -98,11 +99,11 @@
     var legend = document.createElement('div'),
         legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];
 
-    if ('{{ legendKeyShape }}' === 'contiguous-bar') {
-        legend.className = 'legend {{ legendLayout }} contig';
+    if ('{{ legendKeyShape|default("circle") }}' === 'contiguous-bar') {
+        legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
     }
     else {
-        legend.className = 'legend {{ legendLayout }}';
+        legend.className = 'legend {{ legendLayout|default("vertical") }}';
     }
     legend.id = 'legend-0';
     document.body.appendChild(legend);
@@ -135,7 +136,7 @@
             var item = document.createElement('li');
             item.className = 'legend-item';
             var key = document.createElement('span');
-            key.className = 'legend-key {{ legendKeyShape }}';
+            key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
             key.id = 'legend-color-points-id-' + p;
             key.style.backgroundColor = myColorStops[p][1];
             var value = document.createElement('span');
@@ -161,7 +162,7 @@
                 else {
                     gradientText = gradientText + myColorStops[p][1] + ')';
                 }
-                if ('{{ legendLayout }}' === 'vertical') {
+                if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
                     gradientText = gradientText.replace('to right', 'to bottom');
                 }
             }
@@ -175,7 +176,7 @@
         for (var i=0; i < keys.length; i++) {
             keys[i].style.visibility = 'hidden';
         }
-        if ('{{ legendLayout }}' === 'vertical') {
+        if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
             gradient.style.height = (legendContent.offsetHeight - 6) + 'px';
         }
     }
@@ -207,7 +208,7 @@
 
     // create legend
     var legend = document.createElement('div');
-    legend.className = 'legend {{ legendLayout }} legend-variable-radius';
+    legend.className = 'legend {{ legendLayout|default("vertical") }} legend-variable-radius';
 
     legend.id = 'legend-1';
     document.body.appendChild(legend);
@@ -238,7 +239,7 @@
             item.height = '' + maxLegendItemHeight + 'px';
 
             var key = document.createElement('span');
-            key.className = 'legend-key {{ legendKeyShape }}';
+            key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
             key.id = 'legend-radius-points-id-' + p;
             key.style.backgroundColor = color;   
 
@@ -292,11 +293,11 @@
     var attribMargin = legend.offsetWidth + 15;
     
     // if horizontal legend layout (multiple legends are stacked vertically)
-    if ('{{ legendLayout }}' === 'horizontal') {
+    if ('{{ legendLayout|default("vertical") }}' === 'horizontal') {
         document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight = (attribMargin).toString() + 'px';
     }
     // vertical legend layout means multiple legends are side-by-side
-    else if ('{{ legendLayout }}' === 'vertical') {
+    else if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
         var currentMargin = Number(document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight.replace('px', ''));
         document.getElementsByClassName('mapboxgl-ctrl-attrib')[0].style.marginRight = (attribMargin + currentMargin).toString() + 'px';
     }
@@ -359,6 +360,9 @@
     if (expressionType == 'match') {
         expression = generateMatchExpression(propertyValue, stops, defaultValue)
     }
+    else if (expressionType == 'identity') {
+        expression = ['get', propertyValue]
+    }
     else if (propertyValue == 'identity') {
         expression = ['get', propertyValue]
     }
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index 1e00ee7..8adad0d 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -266,6 +266,9 @@ def add_unique_template_variables(self, options):
     def create_html(self, filename=None):
         """Create a circle visual from a geojson data source"""
         
+        # automatic behavior for property function types defined as "identity"
+        self.check_for_identity_property()
+
         if isinstance(self.style, str):
             style = "'{}'".format(self.style)
         else:
@@ -298,6 +301,10 @@ def create_html(self, filename=None):
             scalePosition=self.scale_position,
             scaleFillColor=self.scale_background_color,
             scaleTextColor=self.scale_text_color,
+            showLegend=False,
+            legendGradient=json.dumps(False),
+            legendNumericPrecision=json.dumps(0),
+            legendKeyBordersOn=json.dumps(False)
         )
 
         if self.legend:
@@ -356,6 +363,24 @@ def create_html(self, filename=None):
         else:
             return templates.format(self.template, **options)
 
+    def check_for_identity_property(self):
+        """
+        automatic behavior for property function types defined as "identity"
+        """
+        for attribute in ['color', 'radius', 'height', 'line_width']:
+            
+            # if self.***_property exists
+            if hasattr(self, '{}_property'.format(attribute)):
+
+                # if self.****_function_type == 'identity'
+                if getattr(self, '{}_function_type'.format(attribute)) == 'identity':
+                    
+                    # self.***_property = ***
+                    setattr(self, '{}_property'.format(attribute), attribute)
+                    
+                    # self.***_stops = []
+                    setattr(self, '{}_stops'.format(attribute), [])
+
 
 class CircleViz(VectorMixin, MapViz):
     """Create a circle map"""

From be6d546045f196f074554918b574d21a6ea29b06 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Fri, 21 Jun 2019 22:36:20 -0700
Subject: [PATCH 2/9] Update for height_function_type

---
 examples/data/state_colors.geojson        |  9 ++--
 examples/notebooks/identity_example.ipynb | 53 ++++++++++++++++-------
 mapboxgl/viz.py                           |  4 +-
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/examples/data/state_colors.geojson b/examples/data/state_colors.geojson
index 602bfb4..790ab8c 100644
--- a/examples/data/state_colors.geojson
+++ b/examples/data/state_colors.geojson
@@ -7,7 +7,8 @@
       "properties": {
         "name": "Utah", 
         "density": 34.3,
-        "color": "gold"
+        "color": "gold",
+        "height": 100000
       }, 
       "geometry": {
         "type": "Polygon", 
@@ -35,7 +36,8 @@
       "properties": {
         "name": "Colorado", 
         "density": 49.33,
-        "color": "skyblue"
+        "color": "skyblue",
+        "height": 300000
       }, 
       "geometry": {
         "type": "Polygon", 
@@ -67,7 +69,8 @@
       "properties": {
         "name": "Wyoming", 
         "density": 5.851,
-        "color": "orange"
+        "color": "orange",
+        "height": 200000
       }, 
       "geometry": {
         "type": "Polygon", 
diff --git a/examples/notebooks/identity_example.ipynb b/examples/notebooks/identity_example.ipynb
index 968275d..8f0d78d 100644
--- a/examples/notebooks/identity_example.ipynb
+++ b/examples/notebooks/identity_example.ipynb
@@ -5,6 +5,13 @@
    "execution_count": 1,
    "metadata": {},
    "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "True\n"
+     ]
+    },
     {
      "data": {
       "text/html": [
@@ -27,7 +34,7 @@
        "\n",
        "    .legend {\n",
        "        background-color: white;\n",
-       "        color: #6e6e6e;\n",
+       "        color: black;\n",
        "        border-radius: 3px;\n",
        "        bottom: 10px;\n",
        "        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);\n",
@@ -113,7 +120,7 @@
        "    var legend = document.createElement('div'),\n",
        "        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];\n",
        "\n",
-       "    if ('rounded-square' === 'contiguous-bar') {\n",
+       "    if ('circle' === 'contiguous-bar') {\n",
        "        legend.className = 'legend vertical contig';\n",
        "    }\n",
        "    else {\n",
@@ -150,7 +157,7 @@
        "            var item = document.createElement('li');\n",
        "            item.className = 'legend-item';\n",
        "            var key = document.createElement('span');\n",
-       "            key.className = 'legend-key rounded-square';\n",
+       "            key.className = 'legend-key circle';\n",
        "            key.id = 'legend-color-points-id-' + p;\n",
        "            key.style.backgroundColor = myColorStops[p][1];\n",
        "            var value = document.createElement('span');\n",
@@ -162,8 +169,8 @@
        "            \n",
        "            data = document.getElementById('legend-color-points-value-' + p)\n",
        "            // round number values in legend if precision defined\n",
-       "            if ((typeof(myColorStops[p][0]) == 'number') && (typeof(null) == 'number')) {\n",
-       "                data.textContent = myColorStops[p][0].toFixed(null);\n",
+       "            if ((typeof(myColorStops[p][0]) == 'number') && (typeof(0) == 'number')) {\n",
+       "                data.textContent = myColorStops[p][0].toFixed(0);\n",
        "            }\n",
        "            else {\n",
        "                data.textContent = myColorStops[p][0];\n",
@@ -195,7 +202,7 @@
        "        }\n",
        "    }\n",
        "    // add class for styling bordered legend keys\n",
-       "    if (true) {\n",
+       "    if (false) {\n",
        "        var keys = document.getElementsByClassName('legend-key');\n",
        "        for (var i=0; i < keys.length; i++) {\n",
        "            if (keys[i]) {\n",
@@ -253,7 +260,7 @@
        "            item.height = '' + maxLegendItemHeight + 'px';\n",
        "\n",
        "            var key = document.createElement('span');\n",
-       "            key.className = 'legend-key rounded-square';\n",
+       "            key.className = 'legend-key circle';\n",
        "            key.id = 'legend-radius-points-id-' + p;\n",
        "            key.style.backgroundColor = color;   \n",
        "\n",
@@ -275,8 +282,8 @@
        "            data = document.getElementById('legend-radius-points-value-' + p)\n",
        "\n",
        "            // round number values in legend if precision defined\n",
-       "            if ((typeof(myRadiusStops[p][0]) == 'number') && (typeof(null) == 'number')) {\n",
-       "                data.textContent = myRadiusStops[p][0].toFixed(null);\n",
+       "            if ((typeof(myRadiusStops[p][0]) == 'number') && (typeof(0) == 'number')) {\n",
+       "                data.textContent = myRadiusStops[p][0].toFixed(0);\n",
        "            }\n",
        "            else {\n",
        "                data.textContent = myRadiusStops[p][0];\n",
@@ -285,7 +292,7 @@
        "    }\n",
        "\n",
        "    // add class for styling bordered legend keys\n",
-       "    if (true) {\n",
+       "    if (false) {\n",
        "        var keys = document.getElementsByClassName('legend-key');\n",
        "        for (var i=0; i < keys.length; i++) {\n",
        "            if (keys[i]) {\n",
@@ -409,7 +416,7 @@
        "        style: 'mapbox://styles/mapbox/light-v10?optimize=true',\n",
        "        center: [-96, 42],\n",
        "        zoom: 3,\n",
-       "        pitch: 0,\n",
+       "        pitch: 60,\n",
        "        bearing: 0,\n",
        "        scrollZoom: true,\n",
        "        touchZoom: true,\n",
@@ -434,10 +441,6 @@
        "    \n",
        "    \n",
        "    \n",
-       "        \n",
-       "            calcColorLegend([], 'color');\n",
-       "        \n",
-       "    \n",
        "\n",
        "\n",
        "\n",
@@ -519,10 +522,26 @@
        "        // Optional extrusion layer\n",
        "        \n",
        "\n",
+       "            map.addLayer({\n",
+       "                id: 'choropleth-extrusion',\n",
+       "                type: 'fill-extrusion',            \n",
+       "                source: 'data',\n",
+       "                paint: {\n",
+       "                    'fill-extrusion-opacity': 1,\n",
+       "                    'fill-extrusion-color': ['case',\n",
+       "                        ['boolean', ['feature-state', 'hover'], false], \n",
+       "                        'black',\n",
+       "                        generatePropertyExpression('identity', 'color', [], 'grey')],\n",
+       "                    'fill-extrusion-height': generatePropertyExpression('identity', 'height', [], 0.0),\n",
+       "                }\n",
+       "            }, '');\n",
+       "\n",
+       "        \n",
+       "\n",
        "        \n",
        "\n",
        "        // Popups\n",
-       "        var interactionLayer =  'choropleth-fill' ;\n",
+       "        var interactionLayer =  'choropleth-extrusion' ;\n",
        "        \n",
        "            var popupAction = 'mousemove',\n",
        "                popupSettings =  {\n",
@@ -605,6 +624,8 @@
     "                    center=(-96, 42), \n",
     "                    zoom=3,\n",
     "                    color_function_type='identity',\n",
+    "                    height_function_type='identity',\n",
+    "                    pitch=60,\n",
     "                    height='200px',\n",
     "                    legend=False)\n",
     "viz.show()"
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index 8adad0d..81feb4e 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -721,7 +721,9 @@ def add_unique_template_variables(self, options):
             self.line_dash_array = [1, 0]
 
         # check if choropleth map should include 3-D extrusion
-        self.extrude = all([bool(self.height_property), bool(self.height_stops)])
+        self.extrude = all([bool(self.height_property), bool(self.height_stops)]) or (self.height_function_type == 'identity')
+
+        print(self.extrude)
 
         # common variables for vector and geojson-based choropleths
         options.update(dict(

From e6fbb73978d2847325009e71686c6804331c9f74 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 20 Oct 2019 14:51:10 -0700
Subject: [PATCH 3/9] Add support for 'step' function type -- need to figure
 out how this changes the legend item formats

---
 mapboxgl/errors.py           |  4 ++++
 mapboxgl/templates/main.html | 13 +++++++++++++
 mapboxgl/viz.py              | 12 ++++++++++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/mapboxgl/errors.py b/mapboxgl/errors.py
index 435b274..2b76eb3 100644
--- a/mapboxgl/errors.py
+++ b/mapboxgl/errors.py
@@ -15,4 +15,8 @@ class LegendError(ValueError):
 
 
 class DateConversionError(ValueError):
+    pass
+
+
+class ExpressionTypeError(ValueError):
     pass
\ No newline at end of file
diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 15dfbaf..6a6b2e7 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -355,6 +355,16 @@
 }
 
 
+function generateStepExpression(propertyValue, stops, defaultValue) {
+    var expression;
+    expression = ['step', ['get', propertyValue], defaultValue]
+    for (var i=0; i<stops.length; i++) {
+        expression.push(stops[i][0], stops[i][1])
+    }
+    return expression
+}
+
+
 function generatePropertyExpression(expressionType, propertyValue, stops, defaultValue) {
     var expression;
     if (expressionType == 'match') {
@@ -366,6 +376,9 @@
     else if (propertyValue == 'identity') {
         expression = ['get', propertyValue]
     }
+    else if (expressionType == 'step') {
+        expression = generateStepExpression(propertyValue, stops, defaultValue)
+    }
     else {
         expression = generateInterpolateExpression(propertyValue, stops)
     }
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index 81feb4e..8c4b43c 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -7,7 +7,7 @@
 import numpy
 import requests
 
-from mapboxgl.errors import TokenError, LegendError
+from mapboxgl.errors import TokenError, LegendError, ExpressionTypeError
 from mapboxgl.utils import color_map, numeric_map, img_encode, geojson_to_dict_list
 from mapboxgl import templates
 
@@ -72,7 +72,15 @@ def check_vector_template(self):
             self.vector_source = False
 
 
-class MapViz(object):
+class ExpressionTypeMixin(object):
+    """
+    validate the color_function_type, height_function_type, and radius_function_type arguments
+    """
+    def validate_color_function_type(self):
+        allowed_types = ['interpolate', 'match', 'identity', 'step']
+        if self.color_function_type not in allowed_types:
+            raise ExpressionTypeError('`color_function_type` must be one of `{}`.'.format(
+                '`, `'.join(allowed_types)))
 
     def __init__(self,
                  data,

From 9a52c3ad34a987eb169eeec3a77b06493ec065cb Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 27 Oct 2019 14:25:54 -0700
Subject: [PATCH 4/9] Mockup for step function legend

---
 mapboxgl/templates/main.html | 195 +++++++++++++++++++++++++++++++++++
 1 file changed, 195 insertions(+)

diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 6a6b2e7..35a1097 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -287,6 +287,201 @@
 }
 
 
+function addLegendItem(color, value, precision, colorFunctionType) {
+
+}
+
+
+function calcStepColorLegend(myColorStops, title, colorFunctionType, defaultColor) {
+
+    // create legend
+    var legend = document.createElement('div'),
+        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];
+
+    if ('{{ legendKeyShape|default("circle") }}' === 'contiguous-bar') {
+        legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
+    }
+    else {
+        legend.className = 'legend {{ legendLayout|default("vertical") }}';
+    }
+    legend.id = 'legend-0';
+    document.body.appendChild(legend);
+    // add legend header and content elements
+    var mytitle = document.createElement('div'),
+        legendContent = document.createElement('ul');
+    legendHeader = document.createElement('div');
+    mytitle.textContent = title;
+    mytitle.className = 'legend-title'
+    legendHeader.className = 'legend-header'
+    legendContent.className = 'legend-content'
+    legendHeader.appendChild(mytitle);
+    legend.appendChild(legendHeader);
+    legend.appendChild(legendContent);
+    if ({{ legendGradient|safe }} === true) {
+        var gradientText = 'linear-gradient(to right, ',
+            gradient = document.createElement('div');
+        gradient.className = 'gradient-bar';
+        legend.appendChild(gradient);
+    }
+    // calculate a legend entries on a Mapbox GL Style Spec property function stops array
+    for (p = 0; p < myColorStops.length+1; p++) {
+        
+        if (p < myColorStops.length) {
+
+            if (!!document.getElementById('legend-color-points-value-' + p)) {
+                // update the legend if it already exists
+                document.getElementById('legend-color-points-value-' + p).textContent = myColorStops[p][0];
+                document.getElementById('legend-color-points-id-' + p).style.backgroundColor = myColorStops[p][1];
+            }
+
+            else {
+                // create the legend if it doesn't yet exist
+                var item = document.createElement('li');
+                item.className = 'legend-item';
+                var key = document.createElement('span');
+                key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
+                key.id = 'legend-color-points-id-' + p;
+                if (p===0) {
+                    key.style.backgroundColor = defaultColor;
+                }
+                else {
+                    key.style.backgroundColor = myColorStops[p-1][1];
+                }
+                var value = document.createElement('span');
+                value.className = 'legend-value';
+                value.id = 'legend-color-points-value-' + p;
+                item.appendChild(key);
+                item.appendChild(value);
+                legendContent.appendChild(item);
+                
+                data = document.getElementById('legend-color-points-value-' + p);
+                
+                // round number values in legend if precision defined
+                if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
+                    data.textContent = myColorStops[p][0].toFixed({{ legendNumericPrecision }});
+                }
+                else {
+                    data.textContent = myColorStops[p][0];
+                }
+
+                // if color function type is 'match'
+                if (colorFunctionType === 'step') {
+                    
+                    if (p === 0) {
+
+                        data.textContent = '< ' + myColorStops[p][0];
+
+                    }
+
+                    else if ((p > 0) && (p < myColorStops.length + 1)) {
+
+                        if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
+                            a = myColorStops[p-1][0].toFixed({{ legendNumericPrecision }});
+                            b = myColorStops[p][0].toFixed({{ legendNumericPrecision }});
+                        }
+                        else {
+                            a = myColorStops[p-1][0];
+                            b = myColorStops[p][0];
+                        }
+
+                        data.textContent = a + ' - ' + b;
+
+                    }
+
+                }
+
+                else if (colorFunctionType === 'match' && p > 0 && p < myColorStops.length) {
+
+                    if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
+                        data.textContent = myColorStops[p-1][0].toFixed({{ legendNumericPrecision }}) + ' - ' + myColorStops[p][0].toFixed({{ legendNumericPrecision }});
+                    }
+                    else {
+                        data.textContent = myColorStops[p-1][0] + ' - ' + myColorStops[p][0];
+                    }   
+
+
+                }
+
+                // add color stop to gradient list
+                if ({{ legendGradient|safe }} === true) {
+                    if (p < myColorStops.length - 1) {
+                        gradientText = gradientText + myColorStops[p][1] + ', ';
+                    }
+                    else {
+                        gradientText = gradientText + myColorStops[p][1] + ')';
+                    }
+                    if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
+                        gradientText = gradientText.replace('to right', 'to bottom');
+                    }
+                }
+            }
+
+
+
+        }
+
+        else {
+
+
+            // create the legend if it doesn't yet exist
+            var item = document.createElement('li');
+            item.className = 'legend-item';
+            var key = document.createElement('span');
+            key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
+            key.id = 'legend-color-points-id-' + p;
+            if (p===0) {
+                key.style.backgroundColor = defaultColor;
+            }
+            else {
+                key.style.backgroundColor = myColorStops[p-1][1];
+            }
+            var value = document.createElement('span');
+            value.className = 'legend-value';
+            value.id = 'legend-color-points-value-' + p;
+            item.appendChild(key);
+            item.appendChild(value);
+            legendContent.appendChild(item);
+            
+            data = document.getElementById('legend-color-points-value-' + p);
+            data.textContent = '> ' + myColorStops[p-1][0];
+
+
+        }
+
+
+    }
+    if ({{ legendGradient|safe }} === true) {
+        // convert to gradient scale appearance
+        gradient.style.background = gradientText;
+        // hide legend keys generated above
+        var keys = document.getElementsByClassName('legend-key');
+        for (var i=0; i < keys.length; i++) {
+            keys[i].style.visibility = 'hidden';
+        }
+        if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
+            gradient.style.height = (legendContent.offsetHeight - 6) + 'px';
+        }
+    }
+    // add class for styling bordered legend keys
+    if ({{ legendKeyBordersOn|safe }}) {
+        var keys = document.getElementsByClassName('legend-key');
+        for (var i=0; i < keys.length; i++) {
+            if (keys[i]) {
+                keys[i].classList.add('bordered');
+            }
+        }
+        var gradientBars = document.getElementsByClassName('gradient-bar');
+        for (var i=0; i < keys.length; i++) {
+            if (gradientBars[i]) {
+                gradientBars[i].classList.add('bordered');
+            }
+        }
+    }
+    // update right-margin for compact Mapbox attribution based on calculated legend width
+    updateAttribMargin(legend);
+    updateLegendMargin(legend);
+}
+
 function updateAttribMargin(legend) {
 
     // default margin is based on calculated legend width

From 4c91726d1ac639f6283e37b3c9a5ef1ea7a0f105 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 27 Oct 2019 17:08:21 -0700
Subject: [PATCH 5/9] Support step function for vector data layers

---
 mapboxgl/templates/circle.html |   2 +-
 mapboxgl/templates/main.html   | 348 ++++++++++++---------------------
 mapboxgl/utils.py              |  46 +++++
 mapboxgl/viz.py                |  48 ++++-
 4 files changed, 208 insertions(+), 236 deletions(-)

diff --git a/mapboxgl/templates/circle.html b/mapboxgl/templates/circle.html
index 594cbee..cda799e 100644
--- a/mapboxgl/templates/circle.html
+++ b/mapboxgl/templates/circle.html
@@ -11,7 +11,7 @@
 
     {% if showLegend %}
         {% if colorStops and colorProperty %}
-            calcColorLegend({{ colorStops }} , "{{ colorProperty }}");
+            calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
         {% endif %}
     {% endif %}
         
diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 35a1097..3b6cc0c 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -94,111 +94,6 @@
 
 var legendHeader;
 
-function calcColorLegend(myColorStops, title) {
-    // create legend
-    var legend = document.createElement('div'),
-        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];
-
-    if ('{{ legendKeyShape|default("circle") }}' === 'contiguous-bar') {
-        legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
-    }
-    else {
-        legend.className = 'legend {{ legendLayout|default("vertical") }}';
-    }
-    legend.id = 'legend-0';
-    document.body.appendChild(legend);
-    // add legend header and content elements
-    var mytitle = document.createElement('div'),
-        legendContent = document.createElement('ul');
-    legendHeader = document.createElement('div');
-    mytitle.textContent = title;
-    mytitle.className = 'legend-title'
-    legendHeader.className = 'legend-header'
-    legendContent.className = 'legend-content'
-    legendHeader.appendChild(mytitle);
-    legend.appendChild(legendHeader);
-    legend.appendChild(legendContent);
-    if ({{ legendGradient|safe }} === true) {
-        var gradientText = 'linear-gradient(to right, ',
-            gradient = document.createElement('div');
-        gradient.className = 'gradient-bar';
-        legend.appendChild(gradient);
-    }
-    // calculate a legend entries on a Mapbox GL Style Spec property function stops array
-    for (p = 0; p < myColorStops.length; p++) {
-        if (!!document.getElementById('legend-color-points-value-' + p)) {
-            // update the legend if it already exists
-            document.getElementById('legend-color-points-value-' + p).textContent = myColorStops[p][0];
-            document.getElementById('legend-color-points-id-' + p).style.backgroundColor = myColorStops[p][1];
-        }
-        else {
-            // create the legend if it doesn't yet exist
-            var item = document.createElement('li');
-            item.className = 'legend-item';
-            var key = document.createElement('span');
-            key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
-            key.id = 'legend-color-points-id-' + p;
-            key.style.backgroundColor = myColorStops[p][1];
-            var value = document.createElement('span');
-            value.className = 'legend-value';
-            value.id = 'legend-color-points-value-' + p;
-            item.appendChild(key);
-            item.appendChild(value);
-            legendContent.appendChild(item);
-            
-            data = document.getElementById('legend-color-points-value-' + p)
-            // round number values in legend if precision defined
-            if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
-                data.textContent = myColorStops[p][0].toFixed({{ legendNumericPrecision }});
-            }
-            else {
-                data.textContent = myColorStops[p][0];
-            }
-            // add color stop to gradient list
-            if ({{ legendGradient|safe }} === true) {
-                if (p < myColorStops.length - 1) {
-                    gradientText = gradientText + myColorStops[p][1] + ', ';
-                }
-                else {
-                    gradientText = gradientText + myColorStops[p][1] + ')';
-                }
-                if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
-                    gradientText = gradientText.replace('to right', 'to bottom');
-                }
-            }
-        }
-    }
-    if ({{ legendGradient|safe }} === true) {
-        // convert to gradient scale appearance
-        gradient.style.background = gradientText;
-        // hide legend keys generated above
-        var keys = document.getElementsByClassName('legend-key');
-        for (var i=0; i < keys.length; i++) {
-            keys[i].style.visibility = 'hidden';
-        }
-        if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
-            gradient.style.height = (legendContent.offsetHeight - 6) + 'px';
-        }
-    }
-    // add class for styling bordered legend keys
-    if ({{ legendKeyBordersOn|safe }}) {
-        var keys = document.getElementsByClassName('legend-key');
-        for (var i=0; i < keys.length; i++) {
-            if (keys[i]) {
-                keys[i].classList.add('bordered');
-            }
-        }
-        var gradientBars = document.getElementsByClassName('gradient-bar');
-        for (var i=0; i < keys.length; i++) {
-            if (gradientBars[i]) {
-                gradientBars[i].classList.add('bordered');
-            }
-        }
-    }
-    // update right-margin for compact Mapbox attribution based on calculated legend width
-    updateAttribMargin(legend);
-    updateLegendMargin(legend);
-}
 
 
 function calcRadiusLegend(myRadiusStops, title, color) {
@@ -287,18 +182,100 @@
 }
 
 
-function addLegendItem(color, value, precision, colorFunctionType) {
+function addLegendItem(legendContent, itemIndex, keyShape, precision, defaultColor, colorStops, colorFunctionType) {
+
+    // create the legend item if it doesn't yet exist
+    var item = document.createElement('li');
+    item.className = 'legend-item';
+
+    // create the legend key (contains symbol for legend item)
+    var key = document.createElement('span');
+    key.className = 'legend-key ' + keyShape;
+    key.id = 'legend-color-points-id-' + itemIndex;
+
+    // determine the color to use for step color functions
+    if (colorFunctionType === 'step') {
+
+        if (itemIndex===0) {
+            key.style.backgroundColor = defaultColor;
+        }
+        else if (itemIndex === colorStops.length) {
+            key.style.backgroundColor = colorStops[itemIndex-1][1];
+        }
+        else {
+            key.style.backgroundColor = colorStops[itemIndex-1][1];
+        }
+
+    }
+    // determine the color to use for other color functions 
+    else {
+        key.style.backgroundColor = colorStops[itemIndex][1];
+    }
+
+    // determine the legend item label
+    var value = document.createElement('span');
+    value.className = 'legend-value';
+    value.id = 'legend-color-points-value-' + itemIndex;
+    item.appendChild(key);
+    item.appendChild(value);
+    legendContent.appendChild(item);
+    
+    data = document.getElementById('legend-color-points-value-' + itemIndex);
+
+    if (colorFunctionType === 'step' && itemIndex === colorStops.length) {
+        var useStop = colorStops[itemIndex-1][0];
+    }
+    else {
+        var useStop = colorStops[itemIndex][0];
+    }
+
+    // round number values in legend if precision defined
+    if ((typeof(useStop) == 'number') && (typeof(precision) == 'number')) {
+        data.textContent = useStop.toFixed(precision);
+    }
+    else {
+        data.textContent = useStop;
+    }
+
+    // update legend key text for step color functions
+    if (colorFunctionType === 'step') {
+
+        if (itemIndex === 0) {
+            data.textContent = '< ' + data.textContent;
+        }
+
+        else if (itemIndex < colorStops.length) {
+
+            if ((typeof(colorStops[itemIndex][0]) == 'number') && (typeof(precision) == 'number')) {
+                prepend = colorStops[itemIndex-1][0].toFixed(precision);
+            }
+            else {
+                prepend = colorStops[itemIndex-1][0];
+            }
+
+            data.textContent = prepend + ' - ' + data.textContent;
+
+        }
+
+        else {
+
+            data.textContent = '> ' + data.textContent;
+
+        }
+
+    }
 
 }
 
 
-function calcStepColorLegend(myColorStops, title, colorFunctionType, defaultColor) {
+function calcColorLegend(myColorStops, title, colorFunctionType, defaultColor) {
 
     // create legend
     var legend = document.createElement('div'),
-        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0];
+        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0],
+        legendKeyShape = '{{ legendKeyShape|default("circle") }}';
 
-    if ('{{ legendKeyShape|default("circle") }}' === 'contiguous-bar') {
+    if (legendKeyShape === 'contiguous-bar') {
         legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
     }
     else {
@@ -324,132 +301,51 @@
         legend.appendChild(gradient);
     }
     // calculate a legend entries on a Mapbox GL Style Spec property function stops array
-    for (p = 0; p < myColorStops.length+1; p++) {
-        
-        if (p < myColorStops.length) {
-
-            if (!!document.getElementById('legend-color-points-value-' + p)) {
-                // update the legend if it already exists
-                document.getElementById('legend-color-points-value-' + p).textContent = myColorStops[p][0];
-                document.getElementById('legend-color-points-id-' + p).style.backgroundColor = myColorStops[p][1];
-            }
-
-            else {
-                // create the legend if it doesn't yet exist
-                var item = document.createElement('li');
-                item.className = 'legend-item';
-                var key = document.createElement('span');
-                key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
-                key.id = 'legend-color-points-id-' + p;
-                if (p===0) {
-                    key.style.backgroundColor = defaultColor;
-                }
-                else {
-                    key.style.backgroundColor = myColorStops[p-1][1];
-                }
-                var value = document.createElement('span');
-                value.className = 'legend-value';
-                value.id = 'legend-color-points-value-' + p;
-                item.appendChild(key);
-                item.appendChild(value);
-                legendContent.appendChild(item);
-                
-                data = document.getElementById('legend-color-points-value-' + p);
-                
-                // round number values in legend if precision defined
-                if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
-                    data.textContent = myColorStops[p][0].toFixed({{ legendNumericPrecision }});
-                }
-                else {
-                    data.textContent = myColorStops[p][0];
-                }
-
-                // if color function type is 'match'
-                if (colorFunctionType === 'step') {
-                    
-                    if (p === 0) {
-
-                        data.textContent = '< ' + myColorStops[p][0];
-
-                    }
-
-                    else if ((p > 0) && (p < myColorStops.length + 1)) {
-
-                        if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
-                            a = myColorStops[p-1][0].toFixed({{ legendNumericPrecision }});
-                            b = myColorStops[p][0].toFixed({{ legendNumericPrecision }});
-                        }
-                        else {
-                            a = myColorStops[p-1][0];
-                            b = myColorStops[p][0];
-                        }
-
-                        data.textContent = a + ' - ' + b;
+    for (p = 0; p < myColorStops.length; p++) {
 
-                    }
+        // update the legend if it already exists
+        if (!!document.getElementById('legend-color-points-value-' + p)) {
+            document.getElementById('legend-color-points-value-' + p).textContent = myColorStops[p][0];
+            document.getElementById('legend-color-points-id-' + p).style.backgroundColor = myColorStops[p][1];
+        }
 
+        // create the legend item if it doesn't yet exist
+        else {
+            addLegendItem(legendContent, 
+                          p, 
+                          legendKeyShape, 
+                          {{ legendNumericPrecision }}, 
+                          defaultColor, 
+                          myColorStops, 
+                          colorFunctionType);
+               
+            // add color stop to gradient list
+            if ({{ legendGradient|safe }} === true) {
+                if (p < myColorStops.length - 1) {
+                    gradientText = gradientText + myColorStops[p][1] + ', ';
                 }
-
-                else if (colorFunctionType === 'match' && p > 0 && p < myColorStops.length) {
-
-                    if ((typeof(myColorStops[p][0]) == 'number') && (typeof({{ legendNumericPrecision }}) == 'number')) {
-                        data.textContent = myColorStops[p-1][0].toFixed({{ legendNumericPrecision }}) + ' - ' + myColorStops[p][0].toFixed({{ legendNumericPrecision }});
-                    }
-                    else {
-                        data.textContent = myColorStops[p-1][0] + ' - ' + myColorStops[p][0];
-                    }   
-
-
+                else {
+                    gradientText = gradientText + myColorStops[p][1] + ')';
                 }
-
-                // add color stop to gradient list
-                if ({{ legendGradient|safe }} === true) {
-                    if (p < myColorStops.length - 1) {
-                        gradientText = gradientText + myColorStops[p][1] + ', ';
-                    }
-                    else {
-                        gradientText = gradientText + myColorStops[p][1] + ')';
-                    }
-                    if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
-                        gradientText = gradientText.replace('to right', 'to bottom');
-                    }
+                if ('{{ legendLayout|default("vertical") }}' === 'vertical') {
+                    gradientText = gradientText.replace('to right', 'to bottom');
                 }
             }
-
-
-
-        }
-
-        else {
-
-
-            // create the legend if it doesn't yet exist
-            var item = document.createElement('li');
-            item.className = 'legend-item';
-            var key = document.createElement('span');
-            key.className = 'legend-key {{ legendKeyShape|default("circle") }}';
-            key.id = 'legend-color-points-id-' + p;
-            if (p===0) {
-                key.style.backgroundColor = defaultColor;
-            }
-            else {
-                key.style.backgroundColor = myColorStops[p-1][1];
-            }
-            var value = document.createElement('span');
-            value.className = 'legend-value';
-            value.id = 'legend-color-points-value-' + p;
-            item.appendChild(key);
-            item.appendChild(value);
-            legendContent.appendChild(item);
-            
-            data = document.getElementById('legend-color-points-value-' + p);
-            data.textContent = '> ' + myColorStops[p-1][0];
-
-
         }
+    }
 
-
+    // add last legend item for step-type expressions
+    if (colorFunctionType === 'step') {
+        addLegendItem(legendContent, 
+                      p, 
+                      legendKeyShape, 
+                      {{ legendNumericPrecision }}, 
+                      defaultColor, 
+                      myColorStops, 
+                      colorFunctionType);        
     }
+
+    // gradient bar styling
     if ({{ legendGradient|safe }} === true) {
         // convert to gradient scale appearance
         gradient.style.background = gradientText;
diff --git a/mapboxgl/utils.py b/mapboxgl/utils.py
index 8334b43..83f46c0 100644
--- a/mapboxgl/utils.py
+++ b/mapboxgl/utils.py
@@ -458,3 +458,49 @@ def height_map(lookup, height_stops, default_height=0.0):
 
     # default height value catch-all
     return default_height
+
+
+def step_map(lookup, color_stops, default_color='rgb(122,122,122)'):
+    """Return an rgb color value from step 'function' define by given color_stops;
+    assumes colors in color_stops provided as strings of form 'rgb(RRR,GGG,BBB)'
+    or in hex: '#RRGGBB'; compatible with color_stops or numeric_stops including
+    height_stops
+    """
+    # if no color_stops, use default color
+    if len(color_stops) == 0:
+        return default_color
+    
+    # dictionary to lookup color from match-type color_stops
+    match_map = dict((x, y) for (x, y) in color_stops)
+
+    # if lookup matches stop exactly, return corresponding color (first priority)
+    # (includes non-numeric color_stop "keys" for finding color by match)
+    if lookup in match_map.keys():
+        return match_map.get(lookup)
+
+    # if lookup value numeric, map color by interpolating from color scale
+    if isinstance(lookup, (int, float, complex)):
+
+        # try ordering stops 
+        try:
+            stops, colors = zip(*sorted(color_stops, reverse=True))
+        
+        # if not all stops are numeric, attempt looking up as if categorical stops
+        except TypeError:
+            return match_map.get(lookup, default_color)
+
+        # for step-map, all stops must be numeric
+        if not all(isinstance(x, (int, float, complex)) for x in stops):
+            return default_color
+
+        # check if lookup value is below minimum of stops
+        if float(lookup) <= stops[-1]:
+            return default_color
+        
+        # color break forms the left bound for bin assigned to corresponding color
+        for i, stop in enumerate(stops):
+            if float(lookup) >= stops[i]:
+                return colors[i]
+
+    # default color value catch-all
+    return default_color
\ No newline at end of file
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index 8c4b43c..fb4fe28 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -8,7 +8,7 @@
 import requests
 
 from mapboxgl.errors import TokenError, LegendError, ExpressionTypeError
-from mapboxgl.utils import color_map, numeric_map, img_encode, geojson_to_dict_list
+from mapboxgl.utils import color_map, numeric_map, step_map, img_encode, geojson_to_dict_list
 from mapboxgl import templates
 
 
@@ -29,7 +29,17 @@ def generate_vector_color_map(self):
         for row in self.data:
             
             # map color to JSON feature using color_property
-            color = color_map(row[self.color_property], self.color_stops, self.color_default)
+            if self.color_function_type in ['interpolate', 'match']:
+                color = color_map(row[self.color_property], self.color_stops, self.color_default)
+            
+            if self.color_function_type == 'identity':
+                try:
+                    color = row[self.color_property]
+                except KeyError:
+                    color = self.color_default
+
+            elif self.color_function_type == 'step':
+                color = step_map(row[self.color_property], self.color_stops, self.color_default)
 
             # link to vector feature using data_join_property (from JSON object)
             vector_stops.append([row[self.data_join_property], color])
@@ -55,7 +65,17 @@ def generate_vector_numeric_map(self, numeric_property):
         for row in self.data:
 
             # map value to JSON feature using the numeric property
-            value = numeric_map(row[lookup_property], numeric_stops, default)
+            if function_type in ['interpolate', 'match']:
+                value = numeric_map(row[lookup_property], numeric_stops, default)
+
+            if function_type == 'identity':
+                try:
+                    value = row[lookup_property]
+                except KeyError:
+                    value = default
+
+            elif function_type == 'step':
+                value = step_map(row[lookup_property], numeric_stops, default)
             
             # link to vector feature using data_join_property (from JSON object)
             vector_stops.append([row[self.data_join_property], value])
@@ -73,14 +93,24 @@ def check_vector_template(self):
 
 
 class ExpressionTypeMixin(object):
-    """
-    validate the color_function_type, height_function_type, and radius_function_type arguments
-    """
+
+    allowed_types = ['interpolate', 'match', 'identity', 'step']
+
     def validate_color_function_type(self):
-        allowed_types = ['interpolate', 'match', 'identity', 'step']
-        if self.color_function_type not in allowed_types:
+        """
+        validate the color_function_type, height_function_type, and radius_function_type arguments
+        """        
+        
+        if self.color_function_type not in self.allowed_types:
             raise ExpressionTypeError('`color_function_type` must be one of `{}`.'.format(
-                '`, `'.join(allowed_types)))
+                '`, `'.join(self.allowed_types)))
+
+    # def update_step_legend_labels(self):
+    #     """
+    #     """
+
+
+class MapViz(object):
 
     def __init__(self,
                  data,

From 058f9524e14583bf14265d1cda7aeea91105d660 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 27 Oct 2019 18:03:59 -0700
Subject: [PATCH 6/9] Add tests for step_map

---
 mapboxgl/utils.py   | 45 ++++++++++++++++++++++-----------------------
 tests/test_utils.py | 14 +++++++++++++-
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/mapboxgl/utils.py b/mapboxgl/utils.py
index 83f46c0..f8c1c94 100644
--- a/mapboxgl/utils.py
+++ b/mapboxgl/utils.py
@@ -460,47 +460,46 @@ def height_map(lookup, height_stops, default_height=0.0):
     return default_height
 
 
-def step_map(lookup, color_stops, default_color='rgb(122,122,122)'):
-    """Return an rgb color value from step 'function' define by given color_stops;
-    assumes colors in color_stops provided as strings of form 'rgb(RRR,GGG,BBB)'
-    or in hex: '#RRGGBB'; compatible with color_stops or numeric_stops including
-    height_stops
+def step_map(lookup, step_stops, default='rgb(122,122,122)'):
+    """Return a numeric value or rgb color value from step 'function' defined
+    by given stops; assumes colors in step_stops provided as strings; compatible 
+    with color_stops or numeric_stops including height_stops
     """
-    # if no color_stops, use default color
-    if len(color_stops) == 0:
-        return default_color
+    # if no step_stops, use default
+    if len(step_stops) == 0:
+        return default
     
-    # dictionary to lookup color from match-type color_stops
-    match_map = dict((x, y) for (x, y) in color_stops)
+    # dictionary to lookup color from match-type stops
+    match_map = dict((x, y) for (x, y) in step_stops)
 
-    # if lookup matches stop exactly, return corresponding color (first priority)
-    # (includes non-numeric color_stop "keys" for finding color by match)
+    # if lookup matches stop exactly, return corresponding color/value (first priority)
+    # (includes non-numeric color_stop/numeric_stop "keys" for finding color by match)
     if lookup in match_map.keys():
         return match_map.get(lookup)
 
-    # if lookup value numeric, map color by interpolating from color scale
+    # if lookup value numeric, map color/value with step logic from stops
     if isinstance(lookup, (int, float, complex)):
 
-        # try ordering stops 
+        # try ordering stops (descending order)
         try:
-            stops, colors = zip(*sorted(color_stops, reverse=True))
+            stops, values = zip(*sorted(step_stops, reverse=True))
         
         # if not all stops are numeric, attempt looking up as if categorical stops
         except TypeError:
-            return match_map.get(lookup, default_color)
+            return match_map.get(lookup, default)
 
         # for step-map, all stops must be numeric
         if not all(isinstance(x, (int, float, complex)) for x in stops):
-            return default_color
+            return default
 
-        # check if lookup value is below minimum of stops
+        # check if lookup value is below minimum of step_stops
         if float(lookup) <= stops[-1]:
-            return default_color
+            return default
         
-        # color break forms the left bound for bin assigned to corresponding color
+        # break forms the left bound for bin assigned to corresponding color/value
         for i, stop in enumerate(stops):
             if float(lookup) >= stops[i]:
-                return colors[i]
+                return values[i]
 
-    # default color value catch-all
-    return default_color
\ No newline at end of file
+    # default color/value catch-all
+    return default
\ No newline at end of file
diff --git a/tests/test_utils.py b/tests/test_utils.py
index e696ad2..d62a609 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -11,7 +11,7 @@
 from mapboxgl.utils import (df_to_geojson, geojson_to_dict_list, scale_between, create_radius_stops,
                             create_weight_stops, create_numeric_stops, create_color_stops, 
                             img_encode, rgb_tuple_from_str, color_map, height_map, numeric_map,
-                            convert_date_columns)
+                            convert_date_columns, step_map)
 
 
 @pytest.fixture()
@@ -171,6 +171,12 @@ def test_color_map_interp_exact():
     assert color_map(0.0, interp_stops, 'rgb(32,32,32)') == 'rgb(255,0,0)'
 
 
+def test_color_map_step():
+    """Get color for numeric lookup value in categorical color stops if number exists in stops"""
+    step_stops = [[0.0, 'rgb(255,0,0)'], [50.0, 'rgb(255,255,0)'], [1000.0, 'rgb(0,0,255)']]
+    assert step_map(17, step_stops, 'orange') == 'rgb(255,0,0)'
+
+
 def test_numeric_map():
     """Map interpolated (or matched) value from numeric stops"""
     stops = [[0.0, 0], [50.0, 5000.0], [1000.0, 100000.0]]
@@ -201,6 +207,12 @@ def test_numeric_map_exact():
     assert numeric_map(50.0, stops, 42) == 5000.0
 
 
+def test_numeric_map_step():
+    """Match value from numeric stops"""
+    step_stops = [[0.0, 0.1], [50.0, 0.5], [1000.0, 1.0]]
+    assert step_map(17, step_stops, 0.0) == 0.1
+
+
 def test_create_numeric_stops():
     """Create numeric stops from custom breaks"""
     domain = [7678.214347826088, 5793.63142857143, 1200]

From 329c05d6a9af84bfdef416cba8ae89ece8723ef3 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 27 Oct 2019 19:03:50 -0700
Subject: [PATCH 7/9] Add docs for step_map and update the ExpressionMixin to
 use for validating the functiont types before displaying a map

---
 docs/utils.md      | 21 +++++++++++++++++
 docs/viz.md        | 27 ++++++++++++++++------
 mapboxgl/errors.py |  4 ----
 mapboxgl/viz.py    | 57 +++++++++++++++++++++++++++++++++-------------
 tests/test_html.py | 31 ++++++++++++++++++++++++-
 5 files changed, 112 insertions(+), 28 deletions(-)

diff --git a/docs/utils.md b/docs/utils.md
index 7fe1873..3f4965d 100644
--- a/docs/utils.md
+++ b/docs/utils.md
@@ -243,3 +243,24 @@ from mapboxgl.utils import create_numeric_stops, height_map
 height_stops = create_numeric_stops([0, 50, 100, 500, 1500], 0, 150000)
 height = height_map(117, height_stops)
 ```
+
+## step_map
+Return a color or numeric value with a 'step'-type expression from given color_stops or numeric_stops; for use with 'step' expression type (color_function_type, radius_function_type, height_function_type).
+
+### Params
+**step_map**(_lookup, step_stops, default='rgb(122,122,122)'_)
+
+Parameter | Description
+--|--
+lookup | value maybe be numeric for interpolated values or string for categorical stops
+step_stops | height ramp stops generated from `create_numeric_stops`, or custom list of numeric or categorical stops with paired heights
+default | default value (color or numeric) used for values below the minimum color or numeric break
+
+### Usage
+```python
+from mapboxgl.utils import create_color_stops, step_map
+
+# assign color with a step function
+color_stops = create_color_stops([0, 50, 100, 500, 1500], colors='YlOrRd')
+color = step_map(73, color_stops, 'white')
+```
diff --git a/docs/viz.md b/docs/viz.md
index 46609eb..a5a2570 100644
--- a/docs/viz.md
+++ b/docs/viz.md
@@ -102,6 +102,19 @@ Generate stops array for use with match expression in mapbox template.
 Determines if features are defined as vector source based on MapViz arguments.
 
 
+## class ExpressionsMixin
+
+The `ExpressionsMixin` class is a parent class of the various `mapboxgl-jupyter` visualizations supporting validations of the combinations of viz settings and selected expression types before rendering the map. `CircleViz`, `GraduatedCircleViz`, `HeatmapViz`, `ChoroplethViz`, and `LinestringViz` inherit from this mixin class.
+
+### Methods
+**validate_function_types**(_self_)
+Raise an error if color_function_type, radius_function_type, or height_function_type do not match the allowed values (one of `interpolate`, `match`, `identity`, or `step`.)
+
+**validate_legend_settings**(_self_)
+Warning if the property function_type for the legend property is `identity` and `self.legend = True`.  Legend will not display with `identity`.
+Also raises an error if `legend_gradient` is True and color_function_type is one of `identity` or `step`.
+
+
 ## class CircleViz
 
 The `CircleViz` class handles the creation of a circle map and is built on top of the `MapViz` class.
@@ -114,8 +127,8 @@ Parameter | Description
 data | name of GeoJson file or object or JSON join-data
 color_property | property to determine circle color
 color_stops | property to determine circle color
-color_default | color of circle to use if no lookup value matches the property value. Only used for the **match** color_function_type.
-color_function_type | property to determine `type` used by Mapbox to assign color. One of 'interpolate' or 'match'. Default is interpolate
+color_default | color of circle to use if no lookup value matches the property value. Only used for the **match** or **step** color_function_type.
+color_function_type | property to determine `type` used by Mapbox to assign color. One of 'interpolate', 'match', 'identity' or 'step'. Default is interpolate
 stroke_color | color of circle outline stroke
 stroke_width | width (in pixels) of circle outline stroke
 
@@ -233,12 +246,12 @@ Parameter | Description
 data | name of GeoJson file or object or JSON join-data
 color_property | property to determine circle color.
 color_stops | property to determine circle color.
-color_default | color of the circle to use if no lookup value matches the property value. Only used for the **match** color_function_type.
-color_function_type | property to determine `type` used by Mapbox to assign color. One of "interpolate" or "match". Default is interpolate.
+color_default | color of the circle to use if no lookup value matches the property value. Only used for the **match** or **step** color_function_type.
+color_function_type | property to determine `type` used by Mapbox to assign color. One of "interpolate", "match", "identity" or "step". Default is interpolate.
 radius_property | property to determine circle radius.
 radius_stops | property to determine circle radius.
-radius_default | radius of the circle to use if no lookup value matches the property value. Only used for the **match** radius_function_type.
-radius_function_type | property to determine `type` used by Mapbox to assign radius size. One of "interpolate" or "match". Default is interpolate.
+radius_default | radius of the circle to use if no lookup value matches the property value. Only used for the **match** or **step** radius_function_type.
+radius_function_type | property to determine `type` used by Mapbox to assign radius size. One of "interpolate", "match", "identity" or "step". Default is interpolate.
 stroke_color | Color of stroke outline on circles
 stroke_width | Width of stroke outline on circles
 
@@ -368,7 +381,7 @@ data | can be either GeoJSON (containing polygon features) or JSON for data-join
 label_property | property to use for marker label | 'density'
 color_property | property to determine fill color | 'density'
 color_stops | property to determine fill color | [[0, 'red'], [0.5, 'blue'], [1, 'green']]
-color_default | property to determine default fill color in match lookups | '#F0F0F0'
+color_default | property to determine default fill color in match lookups and step lookups | '#F0F0F0'
 color_function_type | property to determine type of expression used by Mapbox to assign color | 'interpolate'
 line_color | property to determine choropleth border line color | '#FFFFFF'
 line_stroke | property to determine choropleth border line stroke (one of solid (-), dashed (--), dotted (:), dash dot (-.)) | 'solid' or '-'
diff --git a/mapboxgl/errors.py b/mapboxgl/errors.py
index 2b76eb3..48d7a36 100644
--- a/mapboxgl/errors.py
+++ b/mapboxgl/errors.py
@@ -2,10 +2,6 @@ class TokenError(ValueError):
     pass
 
 
-class ValueError(ValueError):
-    pass
-
-
 class SourceDataError(ValueError):
     pass
 
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index fb4fe28..a1bf45f 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -1,6 +1,7 @@
 import codecs
 import json
 import os
+import warnings
 
 from IPython.core.display import HTML, display
 
@@ -92,22 +93,44 @@ def check_vector_template(self):
             self.vector_source = False
 
 
-class ExpressionTypeMixin(object):
+class ExpressionsMixin(object):
 
-    allowed_types = ['interpolate', 'match', 'identity', 'step']
-
-    def validate_color_function_type(self):
+    def validate_function_types(self):
         """
-        validate the color_function_type, height_function_type, and radius_function_type arguments
+        validate the color_function_type, height_function_type, and radius_function_type
         """        
         
-        if self.color_function_type not in self.allowed_types:
-            raise ExpressionTypeError('`color_function_type` must be one of `{}`.'.format(
-                '`, `'.join(self.allowed_types)))
+        allowed_types = ['interpolate', 'match', 'identity', 'step']
+
+        for prop in ['color', 'radius', 'height']:
+
+            try:
+                function_type = getattr(self, '{}_function_type'.format(prop))
+                if function_type not in allowed_types:
+                    message = '`{0}_function_type` must be one of `{1}`.'.format(prop, 
+                        '`, `'.join(allowed_types))
+                    raise ExpressionTypeError(message)
+
+            except AttributeError:
+                pass
+
+    def validate_legend_settings(self):
+        """
+        validate that legend display settings are compatible with color_function_type and 
+        radius_function_type
+        """
+
+        if self.legend and self.color_function_type == 'identity':
+            message = ''.join(['`legend` = True is incompatible with selected ',
+                               '`color_function_type` = \'identity\'.'])
 
-    # def update_step_legend_labels(self):
-    #     """
-    #     """
+            warnings.warn(message)
+
+        if self.legend_gradient and self.color_function_type in ['step', 'identity']:
+            message = ''.join(['`legend_gradient` = True is incompatible with selected ',
+                               '`color_function_type`. `color_function_type` must be one ',
+                               'of `{}`.'.format('`, `'.join(allowed_types[:2]))])
+            raise ExpressionTypeError(message)
 
 
 class MapViz(object):
@@ -420,7 +443,7 @@ def check_for_identity_property(self):
                     setattr(self, '{}_stops'.format(attribute), [])
 
 
-class CircleViz(VectorMixin, MapViz):
+class CircleViz(ExpressionsMixin, VectorMixin, MapViz):
     """Create a circle map"""
 
     def __init__(self,
@@ -463,6 +486,8 @@ def __init__(self,
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
+        self.validate_function_types()
+
     def add_unique_template_variables(self, options):
         """Update map template variables specific to circle visual"""
         options.update(dict(
@@ -481,7 +506,7 @@ def add_unique_template_variables(self, options):
             options.update(vectorColorStops=self.generate_vector_color_map())
 
 
-class GraduatedCircleViz(VectorMixin, MapViz):
+class GraduatedCircleViz(ExpressionsMixin, VectorMixin, MapViz):
     """Create a graduated circle map"""
 
     def __init__(self,
@@ -554,7 +579,7 @@ def add_unique_template_variables(self, options):
                 vectorRadiusStops=self.generate_vector_numeric_map('radius')))
 
 
-class HeatmapViz(VectorMixin, MapViz):
+class HeatmapViz(ExpressionsMixin, VectorMixin, MapViz):
     """Create a heatmap viz"""
 
     def __init__(self,
@@ -683,7 +708,7 @@ def add_unique_template_variables(self, options):
         ))
 
 
-class ChoroplethViz(VectorMixin, MapViz):
+class ChoroplethViz(ExpressionsMixin, VectorMixin, MapViz):
     """Create a choropleth viz"""
 
     def __init__(self,
@@ -870,7 +895,7 @@ def add_unique_template_variables(self, options):
             tiles_bounds=self.tiles_bounds if self.tiles_bounds else 'undefined'))
 
 
-class LinestringViz(VectorMixin, MapViz):
+class LinestringViz(ExpressionsMixin, VectorMixin, MapViz):
     """Create a linestring viz"""
 
     def __init__(self,
diff --git a/tests/test_html.py b/tests/test_html.py
index b409a87..d8bf0b1 100644
--- a/tests/test_html.py
+++ b/tests/test_html.py
@@ -423,4 +423,33 @@ def test_display_RasterTileViz(display, data):
     """Assert that show calls the mocked display function
     """
     tiles_url = 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
-    viz = RasterTilesViz(tiles_url, access_token=TOKEN)
\ No newline at end of file
+    viz = RasterTilesViz(tiles_url, access_token=TOKEN)
+
+
+@patch('mapboxgl.viz.display')
+def test_display_step_function(display, data):
+    """Assert that show calls the mocked display function with color_function_type=step
+    """
+    viz = CircleViz(data,
+                    color_property='Avg Medicare Payments',
+                    color_function_type='step',
+                    color_stops=create_color_stops([0, 50, 100, 500, 1500], colors='YlOrRd'),
+                    label_property='Avg Medicare Payments',
+                    access_token=TOKEN)
+    viz.show()
+    display.assert_called_once()
+
+
+@patch('mapboxgl.viz.display')
+def test_display_identity_function(display, data):
+    """Assert that show calls the mocked display function with color_function_type=identity
+    """
+    for i in range(len(data['features'])):
+        data['features'][i]['color'] = 'red'
+    viz = CircleViz(data,
+                    color_property='Avg Medicare Payments',
+                    color_function_type='identity',
+                    label_property='Avg Medicare Payments',
+                    access_token=TOKEN)
+    viz.show()
+    display.assert_called_once()
\ No newline at end of file

From b788f6a72f81f0b43679912035e34d3c2dfba80e Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 27 Oct 2019 20:52:22 -0700
Subject: [PATCH 8/9] Update calcColorLegend references in html templates;
 update viz.py to refine references to the expression type validators

---
 mapboxgl/templates/choropleth.html       |  6 +-
 mapboxgl/templates/clustered_circle.html |  4 +-
 mapboxgl/templates/graduated_circle.html |  2 +-
 mapboxgl/templates/linestring.html       |  6 +-
 mapboxgl/templates/main.html             | 80 +++++++++++++-----------
 mapboxgl/viz.py                          | 46 +++++++++-----
 6 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/mapboxgl/templates/choropleth.html b/mapboxgl/templates/choropleth.html
index 621ef7d..290c1fd 100644
--- a/mapboxgl/templates/choropleth.html
+++ b/mapboxgl/templates/choropleth.html
@@ -13,13 +13,13 @@
         {% if extrudeChoropleth %}
             {% if colorStops and colorProperty and heightProperty %}
                 {% if colorProperty != heightProperty and extrudeChoropleth %}
-                    calcColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ heightProperty }}");
+                    calcColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ heightProperty }}", "{{ colorType }}", "{{ defaultColor }}");
                 {% else %}
-                    calcColorLegend({{ colorStops }}, "{{ colorProperty }}");
+                    calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
                 {% endif %}
             {% endif %}
         {% else %}
-            calcColorLegend({{ colorStops }}, "{{ colorProperty }}");
+            calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
         {% endif %}
     {% endif %}
 
diff --git a/mapboxgl/templates/clustered_circle.html b/mapboxgl/templates/clustered_circle.html
index f139985..107026d 100644
--- a/mapboxgl/templates/clustered_circle.html
+++ b/mapboxgl/templates/clustered_circle.html
@@ -10,7 +10,7 @@
 {% block legend %}
     
     {% if showLegend %}
-        calcColorLegend({{ colorStops }}, "Point Density");
+        calcColorLegend({{ colorStops }}, "Point Density", "interpolate", "{{ defaultColor }}");
     {% endif %}
 
 {% endblock legend %}
@@ -85,7 +85,7 @@
                 "circle-color": ["case",
                     ["boolean", ["feature-state", "hover"], false], 
                     "{{ highlightColor }}", 
-                    "{{ colorDefault }}"],
+                    "{{ defaultColor }}"],
                 "circle-radius" : generateInterpolateExpression( 'zoom', [[0, {{ radiusDefault }} ], [22,10 * {{ radiusDefault }}]]),
                 "circle-stroke-color": ["case",
                     ["boolean", ["feature-state", "hover"], false], 
diff --git a/mapboxgl/templates/graduated_circle.html b/mapboxgl/templates/graduated_circle.html
index 429af2e..46dd9e4 100644
--- a/mapboxgl/templates/graduated_circle.html
+++ b/mapboxgl/templates/graduated_circle.html
@@ -13,7 +13,7 @@
         
         {% if colorStops and colorProperty and radiusProperty %}
             
-            calcColorLegend({{ colorStops }}, "{{ colorProperty }}");
+            calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
 
         {% endif %}
 
diff --git a/mapboxgl/templates/linestring.html b/mapboxgl/templates/linestring.html
index 42fe980..63293cb 100644
--- a/mapboxgl/templates/linestring.html
+++ b/mapboxgl/templates/linestring.html
@@ -5,12 +5,12 @@
     {% if showLegend %}
         {% if colorStops and colorProperty and widthProperty %}
             {% if colorProperty != widthProperty %}
-                calcColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ widthProperty }}");
+                calcColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ widthProperty }}", "{{ colorType }}", "{{ defaultColor }}");
             {% else %}
-                calcColorLegend({{ colorStops }}, "{{ colorProperty }}");
+            calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
             {% endif %}
         {% elif colorStops and colorProperty %}
-            calcColorLegend({{ colorStops }}, "{{ colorProperty }}");
+        calcColorLegend({{ colorStops }}, "{{ colorProperty }}", "{{ colorType }}", "{{ defaultColor }}");
         {% endif %}
     {% endif %}
 
diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 3b6cc0c..0525319 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -47,6 +47,8 @@
 
     /* legend items */
     .legend-content {margin: 6px 12px 6px 12px; overflow: hidden; padding: 0; float: left; list-style: none; font-size: 0.8em;}
+    .legend.horizontal.step ul.legend-content {font-size: 0.5em;}
+    .legend.horizontal.step ul.legend-content li.legend-item .legend-value {line-height: 1.5em;}
     .legend.vertical .legend-item {white-space: nowrap;}
     .legend-value {display: inline-block; line-height: 18px; vertical-align: top;}
     .legend.horizontal ul.legend-content li.legend-item .legend-value,
@@ -92,34 +94,54 @@
 
 <script type='text/javascript'>
 
-var legendHeader;
+var legendHeader,
+    legendContent,
+    legendTitle;
 
 
+function initLegend(legend, title, legendIndex, legendFunction, legendKeyShape) {
 
-function calcRadiusLegend(myRadiusStops, title, color) {
-
-    // maximum legend item height
-    var maxLegendItemHeight = 2 * myRadiusStops[myRadiusStops.length - 1][1];
-
-    // create legend
-    var legend = document.createElement('div');
-    legend.className = 'legend {{ legendLayout|default("vertical") }} legend-variable-radius';
+    // assign legend class
+    if (legendFunction === 'radius') {
+        legend.className = 'legend {{ legendLayout|default("vertical") }} legend-variable-radius';
+    }
+    else if (legendKeyShape === 'contiguous-bar') {
+        legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
+    }
+    else {
+        legend.className = 'legend {{ legendLayout|default("vertical") }}';
+    }
 
-    legend.id = 'legend-1';
+    legend.id = 'legend-' + legendIndex;
     document.body.appendChild(legend);
 
     // add legend header and content elements
-    var mytitle = document.createElement('div'),
-        legendContent = document.createElement('ul');
+    legendTitle = document.createElement('div');
+    legendTitle.textContent = title;
+    legendTitle.className = 'legend-title'
+
     legendHeader = document.createElement('div');
-    mytitle.textContent = title;
-    mytitle.className = 'legend-title'
     legendHeader.className = 'legend-header'
+    legendHeader.appendChild(legendTitle);
+
+    legendContent = document.createElement('ul');
     legendContent.className = 'legend-content'
-    legendHeader.appendChild(mytitle);
+
     legend.appendChild(legendHeader);
     legend.appendChild(legendContent);
 
+}
+
+
+function calcRadiusLegend(myRadiusStops, title, color) {
+
+    // maximum legend item height
+    var legend = document.createElement('div'),
+        maxLegendItemHeight = 2 * myRadiusStops[myRadiusStops.length - 1][1];
+
+    // create legend
+    initLegend(legend, title, 1, 'radius', 'circle');
+
     // calculate a legend entries on a Mapbox GL Style Spec property function stops array
     for (p = 0; p < myRadiusStops.length; p++) {
         if (!!document.getElementById('legend-radius-points-value-' + p)) {
@@ -272,28 +294,12 @@
 
     // create legend
     var legend = document.createElement('div'),
-        legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0],
+        // legendContainer = document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0],
         legendKeyShape = '{{ legendKeyShape|default("circle") }}';
 
-    if (legendKeyShape === 'contiguous-bar') {
-        legend.className = 'legend {{ legendLayout|default("vertical") }} contig';
-    }
-    else {
-        legend.className = 'legend {{ legendLayout|default("vertical") }}';
-    }
-    legend.id = 'legend-0';
-    document.body.appendChild(legend);
-    // add legend header and content elements
-    var mytitle = document.createElement('div'),
-        legendContent = document.createElement('ul');
-    legendHeader = document.createElement('div');
-    mytitle.textContent = title;
-    mytitle.className = 'legend-title'
-    legendHeader.className = 'legend-header'
-    legendContent.className = 'legend-content'
-    legendHeader.appendChild(mytitle);
-    legend.appendChild(legendHeader);
-    legend.appendChild(legendContent);
+    initLegend(legend, title, 0, 'color', legendKeyShape);
+
+
     if ({{ legendGradient|safe }} === true) {
         var gradientText = 'linear-gradient(to right, ',
             gradient = document.createElement('div');
@@ -336,6 +342,9 @@
 
     // add last legend item for step-type expressions
     if (colorFunctionType === 'step') {
+
+        legend.className = legend.className + ' step';
+
         addLegendItem(legendContent, 
                       p, 
                       legendKeyShape, 
@@ -378,6 +387,7 @@
     updateLegendMargin(legend);
 }
 
+
 function updateAttribMargin(legend) {
 
     // default margin is based on calculated legend width
diff --git a/mapboxgl/viz.py b/mapboxgl/viz.py
index a1bf45f..1e73fbc 100644
--- a/mapboxgl/viz.py
+++ b/mapboxgl/viz.py
@@ -102,7 +102,7 @@ def validate_function_types(self):
         
         allowed_types = ['interpolate', 'match', 'identity', 'step']
 
-        for prop in ['color', 'radius', 'height']:
+        for prop in ['color', 'radius', 'height', 'line_width']:
 
             try:
                 function_type = getattr(self, '{}_function_type'.format(prop))
@@ -120,17 +120,22 @@ def validate_legend_settings(self):
         radius_function_type
         """
 
-        if self.legend and self.color_function_type == 'identity':
-            message = ''.join(['`legend` = True is incompatible with selected ',
-                               '`color_function_type` = \'identity\'.'])
+        try:
+
+            if self.legend and self.color_function_type == 'identity':
+                message = ''.join(['`legend` = True is incompatible with selected ',
+                                   '`color_function_type` = \'identity\'.'])
 
-            warnings.warn(message)
+                warnings.warn(message)
 
-        if self.legend_gradient and self.color_function_type in ['step', 'identity']:
-            message = ''.join(['`legend_gradient` = True is incompatible with selected ',
-                               '`color_function_type`. `color_function_type` must be one ',
-                               'of `{}`.'.format('`, `'.join(allowed_types[:2]))])
-            raise ExpressionTypeError(message)
+            if self.legend_gradient and self.color_function_type in ['step', 'identity']:
+                message = ''.join(['`legend_gradient` = True is incompatible with selected ',
+                                   '`color_function_type`. `color_function_type` must be one ',
+                                   'of `{}`.'.format('`, `'.join(allowed_types[:2]))])
+                raise ExpressionTypeError(message)
+        
+        except AttributeError:
+            pass
 
 
 class MapViz(object):
@@ -486,7 +491,9 @@ def __init__(self,
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
+        # raise errors if incorrectly configured
         self.validate_function_types()
+        self.validate_legend_settings()
 
     def add_unique_template_variables(self, options):
         """Update map template variables specific to circle visual"""
@@ -558,6 +565,10 @@ def __init__(self,
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
+        # raise errors if incorrectly configured
+        self.validate_function_types()
+        self.validate_legend_settings()
+
     def add_unique_template_variables(self, options):
         """Update map template variables specific to graduated circle visual"""
         options.update(dict(
@@ -579,7 +590,7 @@ def add_unique_template_variables(self, options):
                 vectorRadiusStops=self.generate_vector_numeric_map('radius')))
 
 
-class HeatmapViz(ExpressionsMixin, VectorMixin, MapViz):
+class HeatmapViz(VectorMixin, MapViz):
     """Create a heatmap viz"""
 
     def __init__(self,
@@ -689,7 +700,6 @@ def __init__(self,
         self.color_default = color_default
         self.stroke_color = stroke_color
         self.stroke_width = stroke_width
-        self.color_default = color_default
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
@@ -697,7 +707,7 @@ def add_unique_template_variables(self, options):
         """Update map template variables specific to a clustered circle visual"""
         options.update(dict(
             colorStops=self.color_stops,
-            colorDefault=self.color_default,
+            defaultColor=self.color_default,
             radiusStops=self.radius_stops,
             clusterRadius=self.clusterRadius,
             clusterMaxZoom=self.clusterMaxZoom,
@@ -767,6 +777,10 @@ def __init__(self,
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
+        # raise errors if incorrectly configured
+        self.validate_function_types()
+        self.validate_legend_settings()
+
     def add_unique_template_variables(self, options):
         """Update map template variables specific to heatmap visual"""
 
@@ -786,8 +800,6 @@ def add_unique_template_variables(self, options):
         # check if choropleth map should include 3-D extrusion
         self.extrude = all([bool(self.height_property), bool(self.height_stops)]) or (self.height_function_type == 'identity')
 
-        print(self.extrude)
-
         # common variables for vector and geojson-based choropleths
         options.update(dict(
             colorStops=self.color_stops,
@@ -948,6 +960,10 @@ def __init__(self,
         self.legend_key_shape = legend_key_shape
         self.highlight_color = highlight_color
 
+        # raise errors if incorrectly configured
+        self.validate_function_types()
+        self.validate_legend_settings()
+
     def add_unique_template_variables(self, options):
         """Update map template variables specific to linestring visual"""
 

From 7335eb7d2bd521265303108f89ee95232caf2d52 Mon Sep 17 00:00:00 2001
From: akacarlyann <akacarlyann@gmail.com>
Date: Sun, 1 Dec 2019 15:08:14 -0800
Subject: [PATCH 9/9] Drop check for propertyValue === 'identity' in main.html

---
 mapboxgl/templates/main.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/mapboxgl/templates/main.html b/mapboxgl/templates/main.html
index 0525319..d6943b3 100644
--- a/mapboxgl/templates/main.html
+++ b/mapboxgl/templates/main.html
@@ -474,9 +474,6 @@
     else if (expressionType == 'identity') {
         expression = ['get', propertyValue]
     }
-    else if (propertyValue == 'identity') {
-        expression = ['get', propertyValue]
-    }
     else if (expressionType == 'step') {
         expression = generateStepExpression(propertyValue, stops, defaultValue)
     }