diff --git a/NEWS.rst b/NEWS.rst
index 5e0f29fd9..0d4a88c5f 100644
--- a/NEWS.rst
+++ b/NEWS.rst
@@ -13,26 +13,30 @@ Updates
 - Add new visualization API (#662)
   - Add Source class (with param detection)
   - Add Dataset methods
-    .from_table(name, context)
-    .from_query(query, context)
-    .from_geojson(data)
-    .from_dataframe(data)
-  - Add set_default_context methods
-  - Add Context in cartoframes namespace
-  - Add Map, Layer, Source, Style in cartoframes.viz namespace
+    .from_table(...)
+    .from_query(...)
+    .from_geojson(...)
+    .from_dataframe(...)
+  - Add set_default_context method
   - Use sources' context (credentials, bounds)
   - Fix Style class API for variables
   - Remove Dataset, SQL, GeoJSON sources
   - Remove sources namespace
   - Remove context from Map
   - Remove contrib namespace
-  - Update docs in vis classes
-  - Add/Update vis tests
+  - Update docs in viz classes
+  - Add/Update viz tests
   - Pass PEP 8
 - Add default style, based on the geom type (#648)
-- Add basemap None, bool and color interface (#635)
+- Add basemap None and color interface (#635)
 - Add Popup API (click and hover) (#677)
 - Apply default style for not overwritten properties (#684)
+- Add namespaces (#683)
+  - cartoframes.viz: Map, Layer, Source, Style, Popup, basemaps, helpers
+  - cartoframes.auth: Context, set_default_context
+- Add color helpers (#692)
+  - color_category
+  - color_bins
 
 0.9.2
 -----
diff --git a/cartoframes/__init__.py b/cartoframes/__init__.py
index d7b68e27e..10d8847d0 100644
--- a/cartoframes/__init__.py
+++ b/cartoframes/__init__.py
@@ -17,7 +17,7 @@
     'BinMethod',
 
     # New API
-    'Dataset'
+    'Dataset',
 
     '__version__'
 ]
diff --git a/cartoframes/assets/templates/viz/basic.html.j2 b/cartoframes/assets/templates/viz/basic.html.j2
index 22a0a4931..07d914565 100644
--- a/cartoframes/assets/templates/viz/basic.html.j2
+++ b/cartoframes/assets/templates/viz/basic.html.j2
@@ -103,9 +103,10 @@
         <div class="as-map-area">
           <div id="map"></div>
           <div class="as-map-panels">
-            <div class="as-panel as-panel--right as-panel--top">
-              <div class="as-panel__element" id="legends" style="display: none;">
-              </div>
+            <div class="as-panel as-panel--left as-panel--top">
+              {% if has_legends %}
+                {% include 'viz/legends.html.j2' %}
+              {% endif %}
             </div> <!-- as-panel -->
           </div> <!-- as-map-panels -->
         </div> <!-- as-map-area -->
diff --git a/cartoframes/assets/templates/viz/legends.html.j2 b/cartoframes/assets/templates/viz/legends.html.j2
new file mode 100644
index 000000000..63fe1dfed
--- /dev/null
+++ b/cartoframes/assets/templates/viz/legends.html.j2
@@ -0,0 +1,35 @@
+{% macro legend(legend_data, id) -%}
+  {% set type = legend_data.type %}
+  {% if type == 'basic' %}
+    <as-basic-legend id="{{id}}" slot="legends"></as-basic-legend>
+  {% elif type == 'gradient' %}
+    <as-color-gradient-legend id="{{id}}" slot="legends"></as-color-gradient-legend>
+  {% elif type == 'color_steps' %}
+    <as-color-steps-legend id="{{id}}" slot="legends"></as-color-steps-legend>
+  {% else %}
+    <div>
+      <p class="as-body as-color--error">Unknown legend type {{ type }}</p>
+    </div>
+  {% endif %}
+{%- endmacro %}
+
+<div class="as-panel__element" id="legends">
+  {% if default_legend != none %}
+  <as-legends id="basicLegendContainer" heading="Map Legend">
+    <as-basic-legend id="basicLegend" slot="legends">
+    </as-basic-legend>
+  </as-legends>
+  {% endif %}
+
+  {% for source in sources %}
+    {% if source.legend %}
+      <as-legends
+        heading="{{source.legend.heading}}"
+        description="{{source.legend.description}}"
+        source="{{source.legend.source}}"
+      >
+        {{ legend(source.legend, 'source%d_legend' % loop.index0) }}
+      </as-legends>
+    {% endif %}
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/cartoframes/assets/templates/viz/legends.js.j2 b/cartoframes/assets/templates/viz/legends.js.j2
new file mode 100644
index 000000000..7c2858539
--- /dev/null
+++ b/cartoframes/assets/templates/viz/legends.js.j2
@@ -0,0 +1,26 @@
+function createDefaultLegend(layers) {
+  const defaultLegendContainer = document.querySelector('#basicLegendContainer');
+  defaultLegendContainer.style.display = 'none';
+
+  AsBridge.VL.Legends.layersLegend(
+    '#basicLegend',
+    layers,
+    {
+      onLoad: () => defaultLegendContainer.style.display = 'unset'
+    }
+  )
+}
+
+function createLegend(layer, legendData, layerIndex) {
+  const element = document.querySelector(`#source${layerIndex}_legend`);
+
+  if (legendData.ramp) {
+    AsBridge.VL.Legends.rampLegend(
+      element,
+      layer,
+      legendData.ramp
+    );
+  } else {
+    // TODO: we don't have a bridge for this case, should this even be a case?
+  }
+}
\ No newline at end of file
diff --git a/cartoframes/assets/templates/viz/map.js.j2 b/cartoframes/assets/templates/viz/map.js.j2
index eeb19f3e6..fc84d4e1d 100644
--- a/cartoframes/assets/templates/viz/map.js.j2
+++ b/cartoframes/assets/templates/viz/map.js.j2
@@ -1,3 +1,6 @@
+{% if has_legends %}
+  {% include 'viz/legends.js.j2' %}
+{% endif %}
 {% include 'error/parser.js.j2' %}
 {% include 'utils/base64.js.j2' %}
 
@@ -39,12 +42,16 @@ function onReady() {
     map.flyTo({{ camera|clear_none|tojson }});
   {% endif %}
 
+  const layers = [];
+
   sources.forEach((elem, idx) => {
     const factory = new SourceFactory();
     const source = factory.createSource(elem);
     const viz = new carto.Viz(elem['viz']);
     const layer = new carto.Layer(`layer${idx}`, source, viz);
 
+    layers.push(layer);
+
     try {
       layer._updateLayer.catch(displayError);
     } catch (err) {
@@ -73,6 +80,10 @@ function onReady() {
       }
     }
 
+    if (elem.legend) {
+      createLegend(layer, elem.legend, idx);
+    }
+
     function setPopupsClick(tempPopup, interactivity, attrs) {
       interactivity.on('featureClick', (event) => {
           updatePopup(tempPopup, event, attrs)
@@ -139,6 +150,10 @@ function onReady() {
       }
     }
   });
+
+  {% if default_legend %}
+    createDefaultLegend(layers);
+  {% endif %}
 }
 
 function setReady () {
diff --git a/cartoframes/utils.py b/cartoframes/utils.py
index acff7f418..27e437782 100644
--- a/cartoframes/utils.py
+++ b/cartoframes/utils.py
@@ -1,4 +1,6 @@
 """general utility functions"""
+
+import re
 import sys
 import hashlib
 
@@ -111,3 +113,7 @@ def merge_dicts(dict1, dict2):
     d = dict1.copy()
     d.update(dict2)
     return d
+
+
+def text_match(regex, text):
+    return len(re.findall(regex, text, re.MULTILINE)) > 0
diff --git a/cartoframes/viz/defaults.py b/cartoframes/viz/defaults.py
index bb9cecdc4..4b207a039 100644
--- a/cartoframes/viz/defaults.py
+++ b/cartoframes/viz/defaults.py
@@ -4,10 +4,10 @@
 AIRSHIP_BRIDGE_SCRIPT = '/packages/bridge/dist/asbridge.js'
 AIRSHIP_STYLE = '/packages/styles/dist/airship.css'
 AIRSHIP_ICONS_STYLE = '/packages/icons/dist/icons.css'
-AIRSHIP_COMPONENTS_PATH = 'https://libs.cartocdn.com/airship-components/v2.0/airship.js'
-AIRSHIP_BRIDGE_PATH = 'https://libs.cartocdn.com/airship-bridge/v2.0/asbridge.js'
-AIRSHIP_STYLES_PATH = 'https://libs.cartocdn.com/airship-style/v2.0/airship.css'
-AIRSHIP_ICONS_PATH = 'https://libs.cartocdn.com/airship-icons/v2.0/icons.css'
+AIRSHIP_COMPONENTS_PATH = 'https://libs.cartocdn.com/airship-components/cartoframes/airship.js'
+AIRSHIP_BRIDGE_PATH = 'https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js'
+AIRSHIP_STYLES_PATH = 'https://libs.cartocdn.com/airship-style/cartoframes/airship.css'
+AIRSHIP_ICONS_PATH = 'https://libs.cartocdn.com/airship-icons/cartoframes/icons.css'
 
 CREDENTIALS = {
     'username': 'cartoframes',
diff --git a/cartoframes/viz/helpers/__init__.py b/cartoframes/viz/helpers/__init__.py
new file mode 100644
index 000000000..acf3b9b35
--- /dev/null
+++ b/cartoframes/viz/helpers/__init__.py
@@ -0,0 +1,16 @@
+from __future__ import absolute_import
+
+from .color_category_layer import color_category_layer
+from .color_bins_layer import color_bins_layer
+
+
+def inspect(helper):
+    import inspect
+    lines = inspect.getsource(helper)
+    print(lines)
+
+
+__all__ = [
+    'color_category_layer',
+    'color_bins_layer'
+]
diff --git a/cartoframes/viz/helpers/color_bins_layer.py b/cartoframes/viz/helpers/color_bins_layer.py
new file mode 100644
index 000000000..4162691d2
--- /dev/null
+++ b/cartoframes/viz/helpers/color_bins_layer.py
@@ -0,0 +1,32 @@
+from __future__ import absolute_import
+
+from ..layer import Layer
+
+
+def color_bins_layer(source, value, bins=5, palette='purpor', title=''):
+    return Layer(
+        source,
+        style={
+            'point': {
+                'color': 'ramp(globalQuantiles(${0},{1}),reverse({2}))'.format(value, bins, palette)
+            },
+            'line': {
+                'color': 'ramp(globalQuantiles(${0},{1}),reverse({2}))'.format(value, bins, palette)
+            },
+            'polygon': {
+                'color': 'opacity(ramp(globalQuantiles(${0},{1}),reverse({2})),0.9)'.format(value, bins, palette)
+            }
+        },
+        popup={
+            'hover': {
+                'label': title or value,
+                'value': '$' + value
+            }
+        },
+        legend={
+            'type': 'basic',
+            'ramp': 'color',
+            'heading': title or value,
+            'description': ''
+        }
+    )
diff --git a/cartoframes/viz/helpers/color_category_layer.py b/cartoframes/viz/helpers/color_category_layer.py
new file mode 100644
index 000000000..877fe9b96
--- /dev/null
+++ b/cartoframes/viz/helpers/color_category_layer.py
@@ -0,0 +1,32 @@
+from __future__ import absolute_import
+
+from ..layer import Layer
+
+
+def color_category_layer(source, value, top=11, palette='bold', title=''):
+    return Layer(
+        source,
+        style={
+            'point': {
+                'color': 'ramp(top(${0}, {1}), {2})'.format(value, top, palette)
+            },
+            'line': {
+                'color': 'ramp(top(${0}, {1}), {2})'.format(value, top, palette)
+            },
+            'polygon': {
+                'color': 'opacity(ramp(top(${0}, {1}), {2}),0.9)'.format(value, top, palette)
+            }
+        },
+        popup={
+            'hover': {
+                'label': title or value,
+                'value': '$' + value
+            }
+        },
+        legend={
+            'type': 'basic',
+            'ramp': 'color',
+            'heading': title or value,
+            'description': ''
+        }
+    )
diff --git a/cartoframes/viz/map.py b/cartoframes/viz/map.py
index 5c406d071..766c7bc6f 100644
--- a/cartoframes/viz/map.py
+++ b/cartoframes/viz/map.py
@@ -140,6 +140,7 @@ def __init__(self,
                  size=None,
                  viewport=None,
                  template=None,
+                 default_legend=None,
                  **kwargs):
 
         self.layers = _init_layers(layers)
@@ -153,12 +154,18 @@ def __init__(self,
         self._airship_path = kwargs.get('_airship_path', None)
         self._htmlMap = HTMLMap()
 
+        if default_legend is None and all(layer.legend is None for layer in self.layers):
+            self.default_legend = True
+        else:
+            self.default_legend = default_legend
+
         self._htmlMap.set_content(
             size=self.size,
             sources=self.sources,
             bounds=self.bounds,
             viewport=self.viewport,
             basemap=self.basemap,
+            default_legend=self.default_legend,
             _carto_vl_path=self._carto_vl_path,
             _airship_path=self._airship_path)
 
@@ -179,7 +186,7 @@ def _get_bounds(bounds, layers):
 
 def _init_layers(layers):
     if layers is None:
-        return None
+        return []
     if not isinstance(layers, collections.Iterable):
         return [layers]
     else:
@@ -380,14 +387,15 @@ def __init__(self):
 
     def set_content(
         self, size, sources, bounds, viewport=None, basemap=None,
+            default_legend=None,
             _carto_vl_path=defaults.CARTO_VL_PATH, _airship_path=None):
 
         self.html = self._parse_html_content(
-            size, sources, bounds, viewport, basemap,
+            size, sources, bounds, viewport, basemap, default_legend,
             _carto_vl_path, _airship_path)
 
     def _parse_html_content(
-        self, size, sources, bounds, viewport, basemap=None,
+        self, size, sources, bounds, viewport, basemap=None, default_legend=None,
             _carto_vl_path=defaults.CARTO_VL_PATH, _airship_path=None):
 
         token = ''
@@ -397,14 +405,6 @@ def _parse_html_content(
             # No basemap
             basecolor = 'white'
             basemap = ''
-        elif isinstance(basemap, bool):
-            if basemap is True:
-                # Default basemap
-                basemap = Basemaps.darkmatter
-            else:
-                # No basemap
-                basecolor = 'white'
-                basemap = ''
         elif isinstance(basemap, str):
             if basemap not in [Basemaps.voyager, Basemaps.positron, Basemaps.darkmatter]:
                 # Basemap is a color
@@ -441,6 +441,8 @@ def _parse_html_content(
                 'pitch': viewport.get('pitch')
             }
 
+        has_legends = any(source['legend'] is not None for source in sources) or default_legend
+
         return self._template.render(
             width=size[0] if size is not None else None,
             height=size[1] if size is not None else None,
@@ -450,6 +452,8 @@ def _parse_html_content(
             mapboxtoken=token,
             bounds=bounds,
             camera=camera,
+            has_legends=has_legends,
+            default_legend=default_legend,
             carto_vl_path=_carto_vl_path,
             airship_components_path=airship_components_path,
             airship_bridge_path=airship_bridge_path,
diff --git a/cartoframes/viz/popup.py b/cartoframes/viz/popup.py
index d98c21f11..a640cf5b5 100644
--- a/cartoframes/viz/popup.py
+++ b/cartoframes/viz/popup.py
@@ -64,9 +64,17 @@ def _init_popup(self, data):
             if isinstance(data, dict):
                 # TODO: error control
                 if 'click' in data:
-                    self._click = data.get('click', [])
+                    click_data = data.get('click', [])
+                    if isinstance(click_data, list):
+                        self._click = click_data
+                    else:
+                        self._click = [click_data]
                 if 'hover' in data:
-                    self._hover = data.get('hover', [])
+                    hover_data = data.get('hover', [])
+                    if isinstance(hover_data, list):
+                        self._hover = hover_data
+                    else:
+                        self._hover = [hover_data]
             else:
                 raise ValueError('Wrong popup input')
 
diff --git a/cartoframes/viz/style.py b/cartoframes/viz/style.py
index 1471073f6..0d5b79648 100644
--- a/cartoframes/viz/style.py
+++ b/cartoframes/viz/style.py
@@ -1,7 +1,7 @@
 from __future__ import absolute_import
 
 from .defaults import STYLE_DEFAULTS, STYLE_PROPERTIES
-from ..utils import merge_dicts
+from ..utils import merge_dicts, text_match
 
 
 class Style(object):
@@ -116,12 +116,12 @@ def _serialize_properties(self, properties={}):
 
     def _prune_defaults(self, defaults, style):
         output = defaults.copy()
-        if 'color:' in style:
+        if text_match(r'color\s*:', style):
             del output['color']
-        if 'width:' in style:
+        if text_match(r'width\s*:', style):
             del output['width']
-        if 'strokeWidth:' in style:
-            del output['strokeWidth']
-        if 'strokeColor:' in style:
+        if text_match(r'strokeColor\s*:', style):
             del output['strokeColor']
+        if text_match(r'strokeWidth\s*:', style):
+            del output['strokeWidth']
         return output
diff --git a/examples/debug/API/basemaps.ipynb b/examples/debug/API/basemaps.ipynb
index 8a65bc4a6..c955cf490 100644
--- a/examples/debug/API/basemaps.ipynb
+++ b/examples/debug/API/basemaps.ipynb
@@ -47,10 +47,10 @@
        "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "  \n",
        "    <!-- Include Airship -->\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-components/v2.0/airship.js&quot;></script>\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.0/asbridge.js&quot;></script>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-style/v2.0/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.0/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "    <style>\n",
        "      body {\n",
@@ -136,9 +136,23 @@
        "        <div class=&quot;as-map-area&quot;>\n",
        "          <div id=&quot;map&quot;></div>\n",
        "          <div class=&quot;as-map-panels&quot;>\n",
-       "            <div class=&quot;as-panel as-panel--right as-panel--top&quot;>\n",
-       "              <div class=&quot;as-panel__element&quot; id=&quot;legends&quot; style=&quot;display: none;&quot;>\n",
-       "              </div>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "  <as-legends id=&quot;basicLegendContainer&quot; heading=&quot;Map Legend&quot;>\n",
+       "    <as-basic-legend id=&quot;basicLegend&quot;>\n",
+       "    </as-basic-legend>\n",
+       "  </as-legends>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
        "            </div> <!-- as-panel -->\n",
        "          </div> <!-- as-map-panels -->\n",
        "        </div> <!-- as-map-area -->\n",
@@ -161,7 +175,35 @@
        "</div>\n",
        "\n",
        "    <script>\n",
-       "      /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
        "\n",
        "const UNKNOWN_FUNCTION = '<unknown>';\n",
        "\n",
@@ -534,12 +576,16 @@
        "\n",
        "  \n",
        "\n",
+       "  const layers = [];\n",
+       "\n",
        "  sources.forEach((elem, idx) => {\n",
        "    const factory = new SourceFactory();\n",
        "    const source = factory.createSource(elem);\n",
        "    const viz = new carto.Viz(elem['viz']);\n",
        "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
        "\n",
+       "    layers.push(layer);\n",
+       "\n",
        "    try {\n",
        "      layer._updateLayer.catch(displayError);\n",
        "    } catch (err) {\n",
@@ -568,6 +614,10 @@
        "      }\n",
        "    }\n",
        "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
        "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
        "      interactivity.on('featureClick', (event) => {\n",
        "          updatePopup(tempPopup, event, attrs)\n",
@@ -634,6 +684,10 @@
        "      }\n",
        "    }\n",
        "  });\n",
+       "\n",
+       "  \n",
+       "    createDefaultLegend(layers);\n",
+       "  \n",
        "}\n",
        "\n",
        "function setReady () {\n",
@@ -680,7 +734,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7fcfef5234e0>"
+       "<cartoframes.viz.map.Map at 0x7f43f238f5c0>"
       ]
      },
      "execution_count": 2,
@@ -722,10 +776,10 @@
        "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "  \n",
        "    <!-- Include Airship -->\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-components/v2.0/airship.js&quot;></script>\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.0/asbridge.js&quot;></script>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-style/v2.0/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.0/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "    <style>\n",
        "      body {\n",
@@ -811,9 +865,23 @@
        "        <div class=&quot;as-map-area&quot;>\n",
        "          <div id=&quot;map&quot;></div>\n",
        "          <div class=&quot;as-map-panels&quot;>\n",
-       "            <div class=&quot;as-panel as-panel--right as-panel--top&quot;>\n",
-       "              <div class=&quot;as-panel__element&quot; id=&quot;legends&quot; style=&quot;display: none;&quot;>\n",
-       "              </div>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "  <as-legends id=&quot;basicLegendContainer&quot; heading=&quot;Map Legend&quot;>\n",
+       "    <as-basic-legend id=&quot;basicLegend&quot;>\n",
+       "    </as-basic-legend>\n",
+       "  </as-legends>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
        "            </div> <!-- as-panel -->\n",
        "          </div> <!-- as-map-panels -->\n",
        "        </div> <!-- as-map-area -->\n",
@@ -836,7 +904,35 @@
        "</div>\n",
        "\n",
        "    <script>\n",
-       "      /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
        "\n",
        "const UNKNOWN_FUNCTION = '<unknown>';\n",
        "\n",
@@ -1209,12 +1305,16 @@
        "\n",
        "  \n",
        "\n",
+       "  const layers = [];\n",
+       "\n",
        "  sources.forEach((elem, idx) => {\n",
        "    const factory = new SourceFactory();\n",
        "    const source = factory.createSource(elem);\n",
        "    const viz = new carto.Viz(elem['viz']);\n",
        "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
        "\n",
+       "    layers.push(layer);\n",
+       "\n",
        "    try {\n",
        "      layer._updateLayer.catch(displayError);\n",
        "    } catch (err) {\n",
@@ -1243,6 +1343,10 @@
        "      }\n",
        "    }\n",
        "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
        "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
        "      interactivity.on('featureClick', (event) => {\n",
        "          updatePopup(tempPopup, event, attrs)\n",
@@ -1309,6 +1413,10 @@
        "      }\n",
        "    }\n",
        "  });\n",
+       "\n",
+       "  \n",
+       "    createDefaultLegend(layers);\n",
+       "  \n",
        "}\n",
        "\n",
        "function setReady () {\n",
@@ -1355,7 +1463,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7fd002223438>"
+       "<cartoframes.viz.map.Map at 0x7f4401135fd0>"
       ]
      },
      "execution_count": 3,
@@ -1397,10 +1505,10 @@
        "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "  \n",
        "    <!-- Include Airship -->\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-components/v2.0/airship.js&quot;></script>\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.0/asbridge.js&quot;></script>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-style/v2.0/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.0/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "    <style>\n",
        "      body {\n",
@@ -1486,9 +1594,23 @@
        "        <div class=&quot;as-map-area&quot;>\n",
        "          <div id=&quot;map&quot;></div>\n",
        "          <div class=&quot;as-map-panels&quot;>\n",
-       "            <div class=&quot;as-panel as-panel--right as-panel--top&quot;>\n",
-       "              <div class=&quot;as-panel__element&quot; id=&quot;legends&quot; style=&quot;display: none;&quot;>\n",
-       "              </div>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "  <as-legends id=&quot;basicLegendContainer&quot; heading=&quot;Map Legend&quot;>\n",
+       "    <as-basic-legend id=&quot;basicLegend&quot;>\n",
+       "    </as-basic-legend>\n",
+       "  </as-legends>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
        "            </div> <!-- as-panel -->\n",
        "          </div> <!-- as-map-panels -->\n",
        "        </div> <!-- as-map-area -->\n",
@@ -1511,7 +1633,35 @@
        "</div>\n",
        "\n",
        "    <script>\n",
-       "      /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
        "\n",
        "const UNKNOWN_FUNCTION = '<unknown>';\n",
        "\n",
@@ -1870,7 +2020,7 @@
        "            'id': 'background',\n",
        "            'type': 'background',\n",
        "            'paint': {\n",
-       "                'background-color': 'white'\n",
+       "                'background-color': '#fabada'\n",
        "            }\n",
        "        }]\n",
        "    },\n",
@@ -1884,12 +2034,16 @@
        "\n",
        "  \n",
        "\n",
+       "  const layers = [];\n",
+       "\n",
        "  sources.forEach((elem, idx) => {\n",
        "    const factory = new SourceFactory();\n",
        "    const source = factory.createSource(elem);\n",
        "    const viz = new carto.Viz(elem['viz']);\n",
        "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
        "\n",
+       "    layers.push(layer);\n",
+       "\n",
        "    try {\n",
        "      layer._updateLayer.catch(displayError);\n",
        "    } catch (err) {\n",
@@ -1918,6 +2072,10 @@
        "      }\n",
        "    }\n",
        "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
        "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
        "      interactivity.on('featureClick', (event) => {\n",
        "          updatePopup(tempPopup, event, attrs)\n",
@@ -1984,6 +2142,10 @@
        "      }\n",
        "    }\n",
        "  });\n",
+       "\n",
+       "  \n",
+       "    createDefaultLegend(layers);\n",
+       "  \n",
        "}\n",
        "\n",
        "function setReady () {\n",
@@ -2030,7 +2192,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7fcfef4c0710>"
+       "<cartoframes.viz.map.Map at 0x7f442c232400>"
       ]
      },
      "execution_count": 4,
@@ -2038,681 +2200,6 @@
      "output_type": "execute_result"
     }
    ],
-   "source": [
-    "Map(Layer('populated_places'), basemap=False)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe\n",
-       "  frameborder=\"0\"\n",
-       "  style=\"\n",
-       "    border: 1px solid #cfcfcf;\n",
-       "    width: 100%;\n",
-       "    height: 632px;\n",
-       "    \"\n",
-       "  srcDoc=\"\n",
-       "  <!DOCTYPE html>\n",
-       "  <html lang=&quot;en&quot;>\n",
-       "  <head>\n",
-       "    <title>CARTO VL + CARTOframes</title>\n",
-       "    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
-       "    <meta charset=&quot;UTF-8&quot;>\n",
-       "    <!-- Include CARTO VL JS -->\n",
-       "    <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js&quot;></script>\n",
-       "    <!-- Include Mapbox GL JS -->\n",
-       "    <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js&quot;></script>\n",
-       "    <!-- Include Mapbox GL CSS -->\n",
-       "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
-       "  \n",
-       "    <!-- Include Airship -->\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-components/v2.0/airship.js&quot;></script>\n",
-       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.0/asbridge.js&quot;></script>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-style/v2.0/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.0/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "\n",
-       "    <style>\n",
-       "      body {\n",
-       "        margin: 0;\n",
-       "        padding: 0;\n",
-       "      }\n",
-       "\n",
-       "      #map {\n",
-       "        position: absolute;\n",
-       "        height: 100%;\n",
-       "        width: 100%;\n",
-       "      }\n",
-       "\n",
-       "      #error-container {\n",
-       "        position: absolute;\n",
-       "        width: 100%;\n",
-       "        height: 100%;\n",
-       "        background-color: white;\n",
-       "        visibility: hidden;\n",
-       "        padding: 1em;\n",
-       "        font-family: &quot;Courier New&quot;, Courier, monospace;\n",
-       "        margin: 0 auto;\n",
-       "        font-size: 14px;\n",
-       "        overflow: auto;\n",
-       "      }\n",
-       "      \n",
-       "      .error-section {\n",
-       "        padding: 1em;\n",
-       "        border-radius: 5px;\n",
-       "        background-color: #fee;\n",
-       "      }\n",
-       "\n",
-       "      #error-container #error-highlight {\n",
-       "        font-weight: bold;\n",
-       "        color: inherit;\n",
-       "      }\n",
-       "\n",
-       "      #error-container #error-type {\n",
-       "        color: #008000;\n",
-       "      }\n",
-       "\n",
-       "      #error-container #error-name {\n",
-       "        color: #ba2121;\n",
-       "        text-decoration: underline;\n",
-       "      }\n",
-       "\n",
-       "      .error-details {\n",
-       "        margin-top: 1em;\n",
-       "      }\n",
-       "\n",
-       "      #error-stacktrace {\n",
-       "        list-style: none;\n",
-       "      }\n",
-       "\n",
-       "      .popup-content {\n",
-       "        display: flex;\n",
-       "        flex-direction: column;\n",
-       "        padding: 8px;\n",
-       "      }\n",
-       "\n",
-       "      .popup-name {\n",
-       "        font-size: 12px;\n",
-       "        font-weight: 400;\n",
-       "        line-height: 20px;\n",
-       "        margin-bottom: 4px;\n",
-       "      }\n",
-       "\n",
-       "      .popup-value {\n",
-       "        font-size: 16px;\n",
-       "        font-weight: 600;\n",
-       "        line-height: 20px;\n",
-       "      }\n",
-       "\n",
-       "      .popup-value:not(:last-of-type) {\n",
-       "        margin-bottom: 16px;\n",
-       "      }\n",
-       "    </style>\n",
-       "  </head>\n",
-       "\n",
-       "  <body class=&quot;as-app-body as-app&quot;>\n",
-       "    <as-responsive-content>\n",
-       "      <main class=&quot;as-main&quot;>\n",
-       "        <div class=&quot;as-map-area&quot;>\n",
-       "          <div id=&quot;map&quot;></div>\n",
-       "          <div class=&quot;as-map-panels&quot;>\n",
-       "            <div class=&quot;as-panel as-panel--right as-panel--top&quot;>\n",
-       "              <div class=&quot;as-panel__element&quot; id=&quot;legends&quot; style=&quot;display: none;&quot;>\n",
-       "              </div>\n",
-       "            </div> <!-- as-panel -->\n",
-       "          </div> <!-- as-map-panels -->\n",
-       "        </div> <!-- as-map-area -->\n",
-       "      </main> <!-- as-main -->\n",
-       "    </as-responsive-content>\n",
-       "\n",
-       "    <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
-       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
-       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
-       "  <section class=&quot;error-section&quot;>\n",
-       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>\n",
-       "    <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
-       "    <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
-       "  </section>\n",
-       "\n",
-       "  <details class=&quot;error-details&quot;>\n",
-       "    <summary>StackTrace</summary>\n",
-       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
-       "  </details>\n",
-       "</div>\n",
-       "\n",
-       "    <script>\n",
-       "      /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
-       "\n",
-       "const UNKNOWN_FUNCTION = '<unknown>';\n",
-       "\n",
-       "/**\n",
-       " * This parses the different stack traces and puts them into one format\n",
-       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
-       " */\n",
-       "function parse(stackString) {\n",
-       "  const lines = stackString.split('\\n');\n",
-       "\n",
-       "  return lines.reduce((stack, line) => {\n",
-       "    const parseResult =\n",
-       "      parseChrome(line) ||\n",
-       "      parseWinjs(line) ||\n",
-       "      parseGecko(line);\n",
-       "\n",
-       "    if (parseResult) {\n",
-       "      stack.push(parseResult);\n",
-       "    }\n",
-       "\n",
-       "    return stack;\n",
-       "  }, []);\n",
-       "}\n",
-       "\n",
-       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
-       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
-       "\n",
-       "function parseChrome(line) {\n",
-       "  const parts = chromeRe.exec(line);\n",
-       "\n",
-       "  if (!parts) {\n",
-       "    return null;\n",
-       "  }\n",
-       "\n",
-       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
-       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
-       "\n",
-       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
-       "  if (isEval && submatch != null) {\n",
-       "    // throw out eval line/column and use top-most line/column number\n",
-       "    parts[2] = submatch[1]; // url\n",
-       "    parts[3] = submatch[2]; // line\n",
-       "    parts[4] = submatch[3]; // column\n",
-       "  }\n",
-       "\n",
-       "  return {\n",
-       "    file: !isNative ? parts[2] : null,\n",
-       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
-       "    arguments: isNative ? [parts[2]] : [],\n",
-       "    lineNumber: parts[3] ? +parts[3] : null,\n",
-       "    column: parts[4] ? +parts[4] : null,\n",
-       "  };\n",
-       "}\n",
-       "\n",
-       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
-       "\n",
-       "function parseWinjs(line) {\n",
-       "  const parts = winjsRe.exec(line);\n",
-       "\n",
-       "  if (!parts) {\n",
-       "    return null;\n",
-       "  }\n",
-       "\n",
-       "  return {\n",
-       "    file: parts[2],\n",
-       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
-       "    arguments: [],\n",
-       "    lineNumber: +parts[3],\n",
-       "    column: parts[4] ? +parts[4] : null,\n",
-       "  };\n",
-       "}\n",
-       "\n",
-       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
-       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
-       "\n",
-       "function parseGecko(line) {\n",
-       "  const parts = geckoRe.exec(line);\n",
-       "\n",
-       "  if (!parts) {\n",
-       "    return null;\n",
-       "  }\n",
-       "\n",
-       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
-       "\n",
-       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
-       "  if (isEval && submatch != null) {\n",
-       "    // throw out eval line/column and use top-most line number\n",
-       "    parts[3] = submatch[1];\n",
-       "    parts[4] = submatch[2];\n",
-       "    parts[5] = null; // no column when eval\n",
-       "  }\n",
-       "\n",
-       "  return {\n",
-       "    file: parts[3],\n",
-       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
-       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
-       "    lineNumber: parts[4] ? +parts[4] : null,\n",
-       "    column: parts[5] ? +parts[5] : null,\n",
-       "  };\n",
-       "}\n",
-       "/*\n",
-       " *  base64.js\n",
-       " *\n",
-       " *  Licensed under the BSD 3-Clause License.\n",
-       " *    http://opensource.org/licenses/BSD-3-Clause\n",
-       " *\n",
-       " *  References:\n",
-       " *    http://en.wikipedia.org/wiki/Base64\n",
-       " */\n",
-       ";(function (global, factory) {\n",
-       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
-       "        ? module.exports = factory(global)\n",
-       "        : typeof define === 'function' && define.amd\n",
-       "        ? define(factory) : factory(global)\n",
-       "}((\n",
-       "    typeof self !== 'undefined' ? self\n",
-       "        : typeof window !== 'undefined' ? window\n",
-       "        : typeof global !== 'undefined' ? global\n",
-       ": this\n",
-       "), function(global) {\n",
-       "    'use strict';\n",
-       "    // existing version for noConflict()\n",
-       "    global = global || {};\n",
-       "    var _Base64 = global.Base64;\n",
-       "    var version = &quot;2.5.1&quot;;\n",
-       "    // if node.js and NOT React Native, we use Buffer\n",
-       "    var buffer;\n",
-       "    if (typeof module !== 'undefined' && module.exports) {\n",
-       "        try {\n",
-       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
-       "        } catch (err) {\n",
-       "            buffer = undefined;\n",
-       "        }\n",
-       "    }\n",
-       "    // constants\n",
-       "    var b64chars\n",
-       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
-       "    var b64tab = function(bin) {\n",
-       "        var t = {};\n",
-       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
-       "        return t;\n",
-       "    }(b64chars);\n",
-       "    var fromCharCode = String.fromCharCode;\n",
-       "    // encoder stuff\n",
-       "    var cb_utob = function(c) {\n",
-       "        if (c.length < 2) {\n",
-       "            var cc = c.charCodeAt(0);\n",
-       "            return cc < 0x80 ? c\n",
-       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
-       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
-       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
-       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
-       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
-       "        } else {\n",
-       "            var cc = 0x10000\n",
-       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
-       "                + (c.charCodeAt(1) - 0xDC00);\n",
-       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
-       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
-       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
-       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
-       "        }\n",
-       "    };\n",
-       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
-       "    var utob = function(u) {\n",
-       "        return u.replace(re_utob, cb_utob);\n",
-       "    };\n",
-       "    var cb_encode = function(ccc) {\n",
-       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
-       "        ord = ccc.charCodeAt(0) << 16\n",
-       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
-       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
-       "        chars = [\n",
-       "            b64chars.charAt( ord >>> 18),\n",
-       "            b64chars.charAt((ord >>> 12) & 63),\n",
-       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
-       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
-       "        ];\n",
-       "        return chars.join('');\n",
-       "    };\n",
-       "    var btoa = global.btoa ? function(b) {\n",
-       "        return global.btoa(b);\n",
-       "    } : function(b) {\n",
-       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
-       "    };\n",
-       "    var _encode = buffer ?\n",
-       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
-       "        ? function (u) {\n",
-       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
-       "                .toString('base64')\n",
-       "        }\n",
-       "        :  function (u) {\n",
-       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
-       "                .toString('base64')\n",
-       "        }\n",
-       "        : function (u) { return btoa(utob(u)) }\n",
-       "    ;\n",
-       "    var encode = function(u, urisafe) {\n",
-       "        return !urisafe\n",
-       "            ? _encode(String(u))\n",
-       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
-       "                return m0 == '+' ? '-' : '_';\n",
-       "            }).replace(/=/g, '');\n",
-       "    };\n",
-       "    var encodeURI = function(u) { return encode(u, true) };\n",
-       "    // decoder stuff\n",
-       "    var re_btou = new RegExp([\n",
-       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
-       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
-       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
-       "    ].join('|'), 'g');\n",
-       "    var cb_btou = function(cccc) {\n",
-       "        switch(cccc.length) {\n",
-       "        case 4:\n",
-       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
-       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
-       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
-       "                |     (0x3f & cccc.charCodeAt(3)),\n",
-       "            offset = cp - 0x10000;\n",
-       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
-       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
-       "        case 3:\n",
-       "            return fromCharCode(\n",
-       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
-       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
-       "                    |  (0x3f & cccc.charCodeAt(2))\n",
-       "            );\n",
-       "        default:\n",
-       "            return  fromCharCode(\n",
-       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
-       "                    |  (0x3f & cccc.charCodeAt(1))\n",
-       "            );\n",
-       "        }\n",
-       "    };\n",
-       "    var btou = function(b) {\n",
-       "        return b.replace(re_btou, cb_btou);\n",
-       "    };\n",
-       "    var cb_decode = function(cccc) {\n",
-       "        var len = cccc.length,\n",
-       "        padlen = len % 4,\n",
-       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
-       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
-       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
-       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
-       "        chars = [\n",
-       "            fromCharCode( n >>> 16),\n",
-       "            fromCharCode((n >>>  8) & 0xff),\n",
-       "            fromCharCode( n         & 0xff)\n",
-       "        ];\n",
-       "        chars.length -= [0, 0, 2, 1][padlen];\n",
-       "        return chars.join('');\n",
-       "    };\n",
-       "    var _atob = global.atob ? function(a) {\n",
-       "        return global.atob(a);\n",
-       "    } : function(a){\n",
-       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
-       "    };\n",
-       "    var atob = function(a) {\n",
-       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
-       "    };\n",
-       "    var _decode = buffer ?\n",
-       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
-       "        ? function(a) {\n",
-       "            return (a.constructor === buffer.constructor\n",
-       "                    ? a : buffer.from(a, 'base64')).toString();\n",
-       "        }\n",
-       "        : function(a) {\n",
-       "            return (a.constructor === buffer.constructor\n",
-       "                    ? a : new buffer(a, 'base64')).toString();\n",
-       "        }\n",
-       "        : function(a) { return btou(_atob(a)) };\n",
-       "    var decode = function(a){\n",
-       "        return _decode(\n",
-       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
-       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
-       "        );\n",
-       "    };\n",
-       "    var noConflict = function() {\n",
-       "        var Base64 = global.Base64;\n",
-       "        global.Base64 = _Base64;\n",
-       "        return Base64;\n",
-       "    };\n",
-       "    // export Base64\n",
-       "    global.Base64 = {\n",
-       "        VERSION: version,\n",
-       "        atob: atob,\n",
-       "        btoa: btoa,\n",
-       "        fromBase64: decode,\n",
-       "        toBase64: encode,\n",
-       "        utob: utob,\n",
-       "        encode: encode,\n",
-       "        encodeURI: encodeURI,\n",
-       "        btou: btou,\n",
-       "        decode: decode,\n",
-       "        noConflict: noConflict,\n",
-       "        __buffer__: buffer\n",
-       "    };\n",
-       "    // if ES5 is available, make Base64.extendString() available\n",
-       "    if (typeof Object.defineProperty === 'function') {\n",
-       "        var noEnum = function(v){\n",
-       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
-       "        };\n",
-       "        global.Base64.extendString = function () {\n",
-       "            Object.defineProperty(\n",
-       "                String.prototype, 'fromBase64', noEnum(function () {\n",
-       "                    return decode(this)\n",
-       "                }));\n",
-       "            Object.defineProperty(\n",
-       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
-       "                    return encode(this, urisafe)\n",
-       "                }));\n",
-       "            Object.defineProperty(\n",
-       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
-       "                    return encode(this, true)\n",
-       "                }));\n",
-       "        };\n",
-       "    }\n",
-       "    //\n",
-       "    // export Base64 to the namespace\n",
-       "    //\n",
-       "    if (global['Meteor']) { // Meteor.js\n",
-       "        Base64 = global.Base64;\n",
-       "    }\n",
-       "    // module.exports and AMD are mutually exclusive.\n",
-       "    // module.exports has precedence.\n",
-       "    if (typeof module !== 'undefined' && module.exports) {\n",
-       "        module.exports.Base64 = global.Base64;\n",
-       "    }\n",
-       "    else if (typeof define === 'function' && define.amd) {\n",
-       "        // AMD. Register as an anonymous module.\n",
-       "        define([], function(){ return global.Base64 });\n",
-       "    }\n",
-       "    // that's it!\n",
-       "    return {Base64: global.Base64}\n",
-       "}));\n",
-       "\n",
-       "const responsive = document.querySelector('as-responsive-content');\n",
-       "\n",
-       "function onReady() {\n",
-       "  const BASEMAPS = {\n",
-       "    DarkMatter: carto.basemaps.darkmatter,\n",
-       "    Voyager: carto.basemaps.voyager,\n",
-       "    Positron: carto.basemaps.positron\n",
-       "  };\n",
-       "\n",
-       "  if (&quot;&quot;) {\n",
-       "    mapboxgl.accessToken = &quot;&quot;;\n",
-       "  }\n",
-       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
-       "  const map = new mapboxgl.Map({\n",
-       "    container: 'map',\n",
-       "    style: BASEMAPS[''] || '' || {\n",
-       "        'version': 8,\n",
-       "        'sources': {},\n",
-       "        'layers': [{\n",
-       "            'id': 'background',\n",
-       "            'type': 'background',\n",
-       "            'paint': {\n",
-       "                'background-color': '#fabada'\n",
-       "            }\n",
-       "        }]\n",
-       "    },\n",
-       "    zoom: 9,\n",
-       "    dragRotate: false\n",
-       "  });\n",
-       "\n",
-       "  const sources = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: null, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;populated_places\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,1]))\\n&quot;}];\n",
-       "\n",
-       "  map.fitBounds([[-179.589978884, -89.9828938613], [179.383303588, 82.4833231804]], {animate: false, padding: 50, maxZoom: 14});\n",
-       "\n",
-       "  \n",
-       "\n",
-       "  sources.forEach((elem, idx) => {\n",
-       "    const factory = new SourceFactory();\n",
-       "    const source = factory.createSource(elem);\n",
-       "    const viz = new carto.Viz(elem['viz']);\n",
-       "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
-       "\n",
-       "    try {\n",
-       "      layer._updateLayer.catch(displayError);\n",
-       "    } catch (err) {\n",
-       "      throw err;\n",
-       "    }\n",
-       "\n",
-       "    layer.addTo(map);\n",
-       "\n",
-       "    if (elem.interactivity) {\n",
-       "      const interactivity = new carto.Interactivity(layer);\n",
-       "      const tempPopup = new mapboxgl.Popup({\n",
-       "        closeButton: false,\n",
-       "        closeOnClick: false\n",
-       "      });\n",
-       "\n",
-       "      interactivity.off('featureHover');\n",
-       "      interactivity.off('featureClick');\n",
-       "\n",
-       "      for (const { event, attrs } of elem.interactivity) {\n",
-       "        if (event === 'click') {\n",
-       "          setPopupsClick(tempPopup, interactivity, attrs);\n",
-       "        }\n",
-       "        if (event === 'hover') {\n",
-       "          setPopupsHover(tempPopup, interactivity, attrs);\n",
-       "        }\n",
-       "      }\n",
-       "    }\n",
-       "\n",
-       "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
-       "      interactivity.on('featureClick', (event) => {\n",
-       "          updatePopup(tempPopup, event, attrs)\n",
-       "      });\n",
-       "    }\n",
-       "    \n",
-       "    function setPopupsHover(tempPopup, interactivity, attrs) {\n",
-       "      interactivity.on('featureHover', (event) => {\n",
-       "          updatePopup(tempPopup, event, attrs)\n",
-       "      });\n",
-       "    }\n",
-       "\n",
-       "    function updatePopup(layer_popup, event, attrs) {\n",
-       "      if (event.features.length > 0) {\n",
-       "        const feature = event.features[0];\n",
-       "\n",
-       "        let popupHTML = '';\n",
-       "        \n",
-       "        attrs.forEach((item) => {\n",
-       "          let value = feature.variables[item.name].value;\n",
-       "          if (typeof value === 'number') {\n",
-       "            if (Math.abs(value) > 1000) {\n",
-       "              value = value.toExponential(2);\n",
-       "            } else if (!Number.isInteger(value)) {\n",
-       "              value = value.toFixed(2);\n",
-       "            }\n",
-       "          }\n",
-       "          popupHTML += `\n",
-       "            <span class=&quot;popup-name&quot;>${item.label}</span>\n",
-       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
-       "          `;\n",
-       "        });\n",
-       "        \n",
-       "        layer_popup\n",
-       "            .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
-       "            .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
-       "        \n",
-       "        if (!layer_popup.isOpen()) {\n",
-       "          layer_popup.addTo(map);\n",
-       "        }\n",
-       "      } else {\n",
-       "        layer_popup.remove();\n",
-       "      }\n",
-       "    }\n",
-       "\n",
-       "    function SourceFactory() {\n",
-       "      const sourceTypes = {\n",
-       "        GeoJSON: (elem) => new carto.source.GeoJSON(_decodeJSONQuery(elem.query)),\n",
-       "        Query: (elem) => {\n",
-       "          const auth = {\n",
-       "            username: elem.credentials['username'],\n",
-       "            apiKey: elem.credentials['api_key'] || 'default_public'\n",
-       "          };\n",
-       "          const config = {\n",
-       "            serverURL: elem.credentials['base_url'] || `https://${elem.credentials['username']}.carto.com/`\n",
-       "          };\n",
-       "          return new carto.source.SQL(elem.query, auth, config)\n",
-       "        },\n",
-       "        MVT: (elem) => new carto.source.MVT(elem.query.file, JSON.parse(elem.query.metadata)),\n",
-       "      }\n",
-       "\n",
-       "      this.createSource = (elem) => {\n",
-       "        return sourceTypes[elem.type](elem);\n",
-       "      }\n",
-       "    }\n",
-       "  });\n",
-       "}\n",
-       "\n",
-       "function setReady () {\n",
-       "  try {\n",
-       "    onReady()\n",
-       "  } catch (e) {\n",
-       "    displayError(e);\n",
-       "  }\n",
-       "}\n",
-       "\n",
-       "function displayError(e) {\n",
-       "  const error$ = document.getElementById('error-container');\n",
-       "  const errors$ = error$.getElementsByClassName('errors');\n",
-       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
-       "\n",
-       "  errors$[0].innerHTML = e.name;\n",
-       "  errors$[1].innerHTML = e.name;\n",
-       "  errors$[2].innerHTML = e.type;\n",
-       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
-       "\n",
-       "  error$.style.visibility = 'visible';\n",
-       "\n",
-       "  const stack = parse(e.stack);\n",
-       "  const list = stack.map(item => {\n",
-       "    return `<li>\n",
-       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
-       "      (${item.file}:${item.lineNumber}:${item.column})\n",
-       "    </li>`;\n",
-       "  });\n",
-       "\n",
-       "  stacktrace$.innerHTML = list.join('\\n');\n",
-       "}\n",
-       "\n",
-       "function _decodeJSONQuery(query) {\n",
-       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
-       "}\n",
-       "\n",
-       "responsive.addEventListener('ready', setReady);\n",
-       "    </script>\n",
-       "  </body>\n",
-       "  </html>\n",
-       "\">\n",
-       "\n",
-       "</iframe>"
-      ],
-      "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7fcfef4c0c18>"
-      ]
-     },
-     "execution_count": 5,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
    "source": [
     "Map(Layer('populated_places'), basemap='#fabada')"
    ]
diff --git a/examples/debug/API/helpers.ipynb b/examples/debug/API/helpers.ipynb
new file mode 100644
index 000000000..801c4b23e
--- /dev/null
+++ b/examples/debug/API/helpers.ipynb
@@ -0,0 +1,2317 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import Context, set_default_context\n",
+    "from cartoframes.viz import Map\n",
+    "\n",
+    "# Context\n",
+    "context = Context(\n",
+    "    base_url='https://cartovl.carto.com/',\n",
+    "    api_key='default_public'\n",
+    ")\n",
+    "set_default_context(context)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "  <html lang=&quot;en&quot;>\n",
+       "  <head>\n",
+       "    <title>CARTO VL + CARTOframes</title>\n",
+       "    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "    <meta charset=&quot;UTF-8&quot;>\n",
+       "    <!-- Include CARTO VL JS -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL JS -->\n",
+       "    <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL CSS -->\n",
+       "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "  \n",
+       "    <!-- Include Airship -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "    <style>\n",
+       "      body {\n",
+       "        margin: 0;\n",
+       "        padding: 0;\n",
+       "      }\n",
+       "\n",
+       "      #map {\n",
+       "        position: absolute;\n",
+       "        height: 100%;\n",
+       "        width: 100%;\n",
+       "      }\n",
+       "\n",
+       "      #error-container {\n",
+       "        position: absolute;\n",
+       "        width: 100%;\n",
+       "        height: 100%;\n",
+       "        background-color: white;\n",
+       "        visibility: hidden;\n",
+       "        padding: 1em;\n",
+       "        font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "        margin: 0 auto;\n",
+       "        font-size: 14px;\n",
+       "        overflow: auto;\n",
+       "      }\n",
+       "      \n",
+       "      .error-section {\n",
+       "        padding: 1em;\n",
+       "        border-radius: 5px;\n",
+       "        background-color: #fee;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-highlight {\n",
+       "        font-weight: bold;\n",
+       "        color: inherit;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-type {\n",
+       "        color: #008000;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-name {\n",
+       "        color: #ba2121;\n",
+       "        text-decoration: underline;\n",
+       "      }\n",
+       "\n",
+       "      .error-details {\n",
+       "        margin-top: 1em;\n",
+       "      }\n",
+       "\n",
+       "      #error-stacktrace {\n",
+       "        list-style: none;\n",
+       "      }\n",
+       "\n",
+       "      .popup-content {\n",
+       "        display: flex;\n",
+       "        flex-direction: column;\n",
+       "        padding: 8px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-name {\n",
+       "        font-size: 12px;\n",
+       "        font-weight: 400;\n",
+       "        line-height: 20px;\n",
+       "        margin-bottom: 4px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value {\n",
+       "        font-size: 16px;\n",
+       "        font-weight: 600;\n",
+       "        line-height: 20px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value:not(:last-of-type) {\n",
+       "        margin-bottom: 16px;\n",
+       "      }\n",
+       "    </style>\n",
+       "  </head>\n",
+       "\n",
+       "  <body class=&quot;as-app-body as-app&quot;>\n",
+       "    <as-responsive-content>\n",
+       "      <main class=&quot;as-main&quot;>\n",
+       "        <div class=&quot;as-map-area&quot;>\n",
+       "          <div id=&quot;map&quot;></div>\n",
+       "          <div class=&quot;as-map-panels&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legends\n",
+       "        heading=&quot;Neighborhoods&quot;\n",
+       "        description=&quot;&quot;\n",
+       "        source=&quot;&quot;\n",
+       "      >\n",
+       "        \n",
+       "  \n",
+       "    <as-basic-legend id=&quot;source0_legend&quot; slot=&quot;legends&quot;></as-basic-legend>\n",
+       "  \n",
+       "      </as-legends>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        </div> <!-- as-map-area -->\n",
+       "      </main> <!-- as-main -->\n",
+       "    </as-responsive-content>\n",
+       "\n",
+       "    <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "    <script>\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const sources = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [{&quot;attrs&quot;: [{&quot;label&quot;: &quot;Neighborhoods&quot;, &quot;name&quot;: &quot;v8e0f74&quot;}], &quot;event&quot;: &quot;hover&quot;}], &quot;legend&quot;: {&quot;description&quot;: &quot;&quot;, &quot;heading&quot;: &quot;Neighborhoods&quot;, &quot;ramp&quot;: &quot;color&quot;, &quot;type&quot;: &quot;basic&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;sf_neighborhoods\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8e0f74: $name\\ncolor: ramp(top($name, 11), bold)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;}];\n",
+       "\n",
+       "  map.fitBounds([[-122.514947579485, 37.7080892080235], [-122.356966876637, 37.8332976403531]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [];\n",
+       "\n",
+       "  sources.forEach((elem, idx) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const source = factory.createSource(elem);\n",
+       "    const viz = new carto.Viz(elem['viz']);\n",
+       "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
+       "\n",
+       "    layers.push(layer);\n",
+       "\n",
+       "    try {\n",
+       "      layer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    layer.addTo(map);\n",
+       "\n",
+       "    if (elem.interactivity) {\n",
+       "      const interactivity = new carto.Interactivity(layer);\n",
+       "      const tempPopup = new mapboxgl.Popup({\n",
+       "        closeButton: false,\n",
+       "        closeOnClick: false\n",
+       "      });\n",
+       "\n",
+       "      interactivity.off('featureHover');\n",
+       "      interactivity.off('featureClick');\n",
+       "\n",
+       "      for (const { event, attrs } of elem.interactivity) {\n",
+       "        if (event === 'click') {\n",
+       "          setPopupsClick(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "        if (event === 'hover') {\n",
+       "          setPopupsHover(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
+       "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureClick', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "    \n",
+       "    function setPopupsHover(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureHover', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "\n",
+       "    function updatePopup(layer_popup, event, attrs) {\n",
+       "      if (event.features.length > 0) {\n",
+       "        const feature = event.features[0];\n",
+       "\n",
+       "        let popupHTML = '';\n",
+       "        \n",
+       "        attrs.forEach((item) => {\n",
+       "          let value = feature.variables[item.name].value;\n",
+       "          if (typeof value === 'number') {\n",
+       "            if (Math.abs(value) > 1000) {\n",
+       "              value = value.toExponential(2);\n",
+       "            } else if (!Number.isInteger(value)) {\n",
+       "              value = value.toFixed(2);\n",
+       "            }\n",
+       "          }\n",
+       "          popupHTML += `\n",
+       "            <span class=&quot;popup-name&quot;>${item.label}</span>\n",
+       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "          `;\n",
+       "        });\n",
+       "        \n",
+       "        layer_popup\n",
+       "            .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "            .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "        \n",
+       "        if (!layer_popup.isOpen()) {\n",
+       "          layer_popup.addTo(map);\n",
+       "        }\n",
+       "      } else {\n",
+       "        layer_popup.remove();\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    function SourceFactory() {\n",
+       "      const sourceTypes = {\n",
+       "        GeoJSON: (elem) => new carto.source.GeoJSON(_decodeJSONQuery(elem.query)),\n",
+       "        Query: (elem) => {\n",
+       "          const auth = {\n",
+       "            username: elem.credentials['username'],\n",
+       "            apiKey: elem.credentials['api_key'] || 'default_public'\n",
+       "          };\n",
+       "          const config = {\n",
+       "            serverURL: elem.credentials['base_url'] || `https://${elem.credentials['username']}.carto.com/`\n",
+       "          };\n",
+       "          return new carto.source.SQL(elem.query, auth, config)\n",
+       "        },\n",
+       "        MVT: (elem) => new carto.source.MVT(elem.query.file, JSON.parse(elem.query.metadata)),\n",
+       "      }\n",
+       "\n",
+       "      this.createSource = (elem) => {\n",
+       "        return sourceTypes[elem.type](elem);\n",
+       "      }\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  \n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "    </script>\n",
+       "  </body>\n",
+       "  </html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x7f3540922128>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from cartoframes.viz.helpers import color_category_layer\n",
+    "\n",
+    "# Simplest version\n",
+    "Map(\n",
+    "    color_category_layer('sf_neighborhoods', 'name')\n",
+    ")\n",
+    "\n",
+    "# With all params\n",
+    "Map(\n",
+    "    color_category_layer('sf_neighborhoods', 'name', top=11, palette='bold', title='Neighborhoods')\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "  <html lang=&quot;en&quot;>\n",
+       "  <head>\n",
+       "    <title>CARTO VL + CARTOframes</title>\n",
+       "    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "    <meta charset=&quot;UTF-8&quot;>\n",
+       "    <!-- Include CARTO VL JS -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL JS -->\n",
+       "    <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL CSS -->\n",
+       "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "  \n",
+       "    <!-- Include Airship -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "    <style>\n",
+       "      body {\n",
+       "        margin: 0;\n",
+       "        padding: 0;\n",
+       "      }\n",
+       "\n",
+       "      #map {\n",
+       "        position: absolute;\n",
+       "        height: 100%;\n",
+       "        width: 100%;\n",
+       "      }\n",
+       "\n",
+       "      #error-container {\n",
+       "        position: absolute;\n",
+       "        width: 100%;\n",
+       "        height: 100%;\n",
+       "        background-color: white;\n",
+       "        visibility: hidden;\n",
+       "        padding: 1em;\n",
+       "        font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "        margin: 0 auto;\n",
+       "        font-size: 14px;\n",
+       "        overflow: auto;\n",
+       "      }\n",
+       "      \n",
+       "      .error-section {\n",
+       "        padding: 1em;\n",
+       "        border-radius: 5px;\n",
+       "        background-color: #fee;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-highlight {\n",
+       "        font-weight: bold;\n",
+       "        color: inherit;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-type {\n",
+       "        color: #008000;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-name {\n",
+       "        color: #ba2121;\n",
+       "        text-decoration: underline;\n",
+       "      }\n",
+       "\n",
+       "      .error-details {\n",
+       "        margin-top: 1em;\n",
+       "      }\n",
+       "\n",
+       "      #error-stacktrace {\n",
+       "        list-style: none;\n",
+       "      }\n",
+       "\n",
+       "      .popup-content {\n",
+       "        display: flex;\n",
+       "        flex-direction: column;\n",
+       "        padding: 8px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-name {\n",
+       "        font-size: 12px;\n",
+       "        font-weight: 400;\n",
+       "        line-height: 20px;\n",
+       "        margin-bottom: 4px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value {\n",
+       "        font-size: 16px;\n",
+       "        font-weight: 600;\n",
+       "        line-height: 20px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value:not(:last-of-type) {\n",
+       "        margin-bottom: 16px;\n",
+       "      }\n",
+       "    </style>\n",
+       "  </head>\n",
+       "\n",
+       "  <body class=&quot;as-app-body as-app&quot;>\n",
+       "    <as-responsive-content>\n",
+       "      <main class=&quot;as-main&quot;>\n",
+       "        <div class=&quot;as-map-area&quot;>\n",
+       "          <div id=&quot;map&quot;></div>\n",
+       "          <div class=&quot;as-map-panels&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legends\n",
+       "        heading=&quot;Roads&quot;\n",
+       "        description=&quot;&quot;\n",
+       "        source=&quot;&quot;\n",
+       "      >\n",
+       "        \n",
+       "  \n",
+       "    <as-basic-legend id=&quot;source0_legend&quot; slot=&quot;legends&quot;></as-basic-legend>\n",
+       "  \n",
+       "      </as-legends>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        </div> <!-- as-map-area -->\n",
+       "      </main> <!-- as-main -->\n",
+       "    </as-responsive-content>\n",
+       "\n",
+       "    <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "    <script>\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const sources = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [{&quot;attrs&quot;: [{&quot;label&quot;: &quot;Roads&quot;, &quot;name&quot;: &quot;v08256c&quot;}], &quot;event&quot;: &quot;hover&quot;}], &quot;legend&quot;: {&quot;description&quot;: &quot;&quot;, &quot;heading&quot;: &quot;Roads&quot;, &quot;ramp&quot;: &quot;color&quot;, &quot;type&quot;: &quot;basic&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;sfcta_congestion_roads\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v08256c: $direction\\ncolor: ramp(top($direction, 4), bold)\\nwidth: ramp(linear(zoom(),0,18),[0.5,4])\\n&quot;}];\n",
+       "\n",
+       "  map.fitBounds([[-122.513606194578, 37.7081003674475], [-122.358856546873, 37.814208369554]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [];\n",
+       "\n",
+       "  sources.forEach((elem, idx) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const source = factory.createSource(elem);\n",
+       "    const viz = new carto.Viz(elem['viz']);\n",
+       "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
+       "\n",
+       "    layers.push(layer);\n",
+       "\n",
+       "    try {\n",
+       "      layer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    layer.addTo(map);\n",
+       "\n",
+       "    if (elem.interactivity) {\n",
+       "      const interactivity = new carto.Interactivity(layer);\n",
+       "      const tempPopup = new mapboxgl.Popup({\n",
+       "        closeButton: false,\n",
+       "        closeOnClick: false\n",
+       "      });\n",
+       "\n",
+       "      interactivity.off('featureHover');\n",
+       "      interactivity.off('featureClick');\n",
+       "\n",
+       "      for (const { event, attrs } of elem.interactivity) {\n",
+       "        if (event === 'click') {\n",
+       "          setPopupsClick(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "        if (event === 'hover') {\n",
+       "          setPopupsHover(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
+       "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureClick', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "    \n",
+       "    function setPopupsHover(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureHover', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "\n",
+       "    function updatePopup(layer_popup, event, attrs) {\n",
+       "      if (event.features.length > 0) {\n",
+       "        const feature = event.features[0];\n",
+       "\n",
+       "        let popupHTML = '';\n",
+       "        \n",
+       "        attrs.forEach((item) => {\n",
+       "          let value = feature.variables[item.name].value;\n",
+       "          if (typeof value === 'number') {\n",
+       "            if (Math.abs(value) > 1000) {\n",
+       "              value = value.toExponential(2);\n",
+       "            } else if (!Number.isInteger(value)) {\n",
+       "              value = value.toFixed(2);\n",
+       "            }\n",
+       "          }\n",
+       "          popupHTML += `\n",
+       "            <span class=&quot;popup-name&quot;>${item.label}</span>\n",
+       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "          `;\n",
+       "        });\n",
+       "        \n",
+       "        layer_popup\n",
+       "            .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "            .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "        \n",
+       "        if (!layer_popup.isOpen()) {\n",
+       "          layer_popup.addTo(map);\n",
+       "        }\n",
+       "      } else {\n",
+       "        layer_popup.remove();\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    function SourceFactory() {\n",
+       "      const sourceTypes = {\n",
+       "        GeoJSON: (elem) => new carto.source.GeoJSON(_decodeJSONQuery(elem.query)),\n",
+       "        Query: (elem) => {\n",
+       "          const auth = {\n",
+       "            username: elem.credentials['username'],\n",
+       "            apiKey: elem.credentials['api_key'] || 'default_public'\n",
+       "          };\n",
+       "          const config = {\n",
+       "            serverURL: elem.credentials['base_url'] || `https://${elem.credentials['username']}.carto.com/`\n",
+       "          };\n",
+       "          return new carto.source.SQL(elem.query, auth, config)\n",
+       "        },\n",
+       "        MVT: (elem) => new carto.source.MVT(elem.query.file, JSON.parse(elem.query.metadata)),\n",
+       "      }\n",
+       "\n",
+       "      this.createSource = (elem) => {\n",
+       "        return sourceTypes[elem.type](elem);\n",
+       "      }\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  \n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "    </script>\n",
+       "  </body>\n",
+       "  </html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x7f3506a8fdd8>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from cartoframes.viz.helpers import color_category_layer\n",
+    "\n",
+    "# Simplest version\n",
+    "Map(\n",
+    "    color_category_layer('sfcta_congestion_roads', 'direction')\n",
+    ")\n",
+    "\n",
+    "# With all params\n",
+    "Map(\n",
+    "    color_category_layer('sfcta_congestion_roads', 'direction', top=4, palette='bold', title='Roads')\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "  <html lang=&quot;en&quot;>\n",
+       "  <head>\n",
+       "    <title>CARTO VL + CARTOframes</title>\n",
+       "    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "    <meta charset=&quot;UTF-8&quot;>\n",
+       "    <!-- Include CARTO VL JS -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL JS -->\n",
+       "    <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js&quot;></script>\n",
+       "    <!-- Include Mapbox GL CSS -->\n",
+       "    <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "  \n",
+       "    <!-- Include Airship -->\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "    <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.js&quot;></script>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "    <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "    <style>\n",
+       "      body {\n",
+       "        margin: 0;\n",
+       "        padding: 0;\n",
+       "      }\n",
+       "\n",
+       "      #map {\n",
+       "        position: absolute;\n",
+       "        height: 100%;\n",
+       "        width: 100%;\n",
+       "      }\n",
+       "\n",
+       "      #error-container {\n",
+       "        position: absolute;\n",
+       "        width: 100%;\n",
+       "        height: 100%;\n",
+       "        background-color: white;\n",
+       "        visibility: hidden;\n",
+       "        padding: 1em;\n",
+       "        font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "        margin: 0 auto;\n",
+       "        font-size: 14px;\n",
+       "        overflow: auto;\n",
+       "      }\n",
+       "      \n",
+       "      .error-section {\n",
+       "        padding: 1em;\n",
+       "        border-radius: 5px;\n",
+       "        background-color: #fee;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-highlight {\n",
+       "        font-weight: bold;\n",
+       "        color: inherit;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-type {\n",
+       "        color: #008000;\n",
+       "      }\n",
+       "\n",
+       "      #error-container #error-name {\n",
+       "        color: #ba2121;\n",
+       "        text-decoration: underline;\n",
+       "      }\n",
+       "\n",
+       "      .error-details {\n",
+       "        margin-top: 1em;\n",
+       "      }\n",
+       "\n",
+       "      #error-stacktrace {\n",
+       "        list-style: none;\n",
+       "      }\n",
+       "\n",
+       "      .popup-content {\n",
+       "        display: flex;\n",
+       "        flex-direction: column;\n",
+       "        padding: 8px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-name {\n",
+       "        font-size: 12px;\n",
+       "        font-weight: 400;\n",
+       "        line-height: 20px;\n",
+       "        margin-bottom: 4px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value {\n",
+       "        font-size: 16px;\n",
+       "        font-weight: 600;\n",
+       "        line-height: 20px;\n",
+       "      }\n",
+       "\n",
+       "      .popup-value:not(:last-of-type) {\n",
+       "        margin-bottom: 16px;\n",
+       "      }\n",
+       "    </style>\n",
+       "  </head>\n",
+       "\n",
+       "  <body class=&quot;as-app-body as-app&quot;>\n",
+       "    <as-responsive-content>\n",
+       "      <main class=&quot;as-main&quot;>\n",
+       "        <div class=&quot;as-map-area&quot;>\n",
+       "          <div id=&quot;map&quot;></div>\n",
+       "          <div class=&quot;as-map-panels&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "                \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legends\n",
+       "        heading=&quot;Pop max&quot;\n",
+       "        description=&quot;&quot;\n",
+       "        source=&quot;&quot;\n",
+       "      >\n",
+       "        \n",
+       "  \n",
+       "    <as-basic-legend id=&quot;source0_legend&quot; slot=&quot;legends&quot;></as-basic-legend>\n",
+       "  \n",
+       "      </as-legends>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "              \n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        </div> <!-- as-map-area -->\n",
+       "      </main> <!-- as-main -->\n",
+       "    </as-responsive-content>\n",
+       "\n",
+       "    <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "    <script>\n",
+       "      \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#basicLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#basicLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#source${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.ramp) {\n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.ramp\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const sources = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [{&quot;attrs&quot;: [{&quot;label&quot;: &quot;Pop max&quot;, &quot;name&quot;: &quot;vfdf67e&quot;}], &quot;event&quot;: &quot;hover&quot;}], &quot;legend&quot;: {&quot;description&quot;: &quot;&quot;, &quot;heading&quot;: &quot;Pop max&quot;, &quot;ramp&quot;: &quot;color&quot;, &quot;type&quot;: &quot;basic&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;populated_places\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vfdf67e: $pop_max\\ncolor: ramp(globalQuantiles($pop_max,5),reverse(purpor))\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,1]))\\n&quot;}];\n",
+       "\n",
+       "  map.fitBounds([[-179.589978884, -89.9828938613], [179.383303588, 82.4833231804]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [];\n",
+       "\n",
+       "  sources.forEach((elem, idx) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const source = factory.createSource(elem);\n",
+       "    const viz = new carto.Viz(elem['viz']);\n",
+       "    const layer = new carto.Layer(`layer${idx}`, source, viz);\n",
+       "\n",
+       "    layers.push(layer);\n",
+       "\n",
+       "    try {\n",
+       "      layer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    layer.addTo(map);\n",
+       "\n",
+       "    if (elem.interactivity) {\n",
+       "      const interactivity = new carto.Interactivity(layer);\n",
+       "      const tempPopup = new mapboxgl.Popup({\n",
+       "        closeButton: false,\n",
+       "        closeOnClick: false\n",
+       "      });\n",
+       "\n",
+       "      interactivity.off('featureHover');\n",
+       "      interactivity.off('featureClick');\n",
+       "\n",
+       "      for (const { event, attrs } of elem.interactivity) {\n",
+       "        if (event === 'click') {\n",
+       "          setPopupsClick(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "        if (event === 'hover') {\n",
+       "          setPopupsHover(tempPopup, interactivity, attrs);\n",
+       "        }\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    if (elem.legend) {\n",
+       "      createLegend(layer, elem.legend, idx);\n",
+       "    }\n",
+       "\n",
+       "    function setPopupsClick(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureClick', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "    \n",
+       "    function setPopupsHover(tempPopup, interactivity, attrs) {\n",
+       "      interactivity.on('featureHover', (event) => {\n",
+       "          updatePopup(tempPopup, event, attrs)\n",
+       "      });\n",
+       "    }\n",
+       "\n",
+       "    function updatePopup(layer_popup, event, attrs) {\n",
+       "      if (event.features.length > 0) {\n",
+       "        const feature = event.features[0];\n",
+       "\n",
+       "        let popupHTML = '';\n",
+       "        \n",
+       "        attrs.forEach((item) => {\n",
+       "          let value = feature.variables[item.name].value;\n",
+       "          if (typeof value === 'number') {\n",
+       "            if (Math.abs(value) > 1000) {\n",
+       "              value = value.toExponential(2);\n",
+       "            } else if (!Number.isInteger(value)) {\n",
+       "              value = value.toFixed(2);\n",
+       "            }\n",
+       "          }\n",
+       "          popupHTML += `\n",
+       "            <span class=&quot;popup-name&quot;>${item.label}</span>\n",
+       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "          `;\n",
+       "        });\n",
+       "        \n",
+       "        layer_popup\n",
+       "            .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "            .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "        \n",
+       "        if (!layer_popup.isOpen()) {\n",
+       "          layer_popup.addTo(map);\n",
+       "        }\n",
+       "      } else {\n",
+       "        layer_popup.remove();\n",
+       "      }\n",
+       "    }\n",
+       "\n",
+       "    function SourceFactory() {\n",
+       "      const sourceTypes = {\n",
+       "        GeoJSON: (elem) => new carto.source.GeoJSON(_decodeJSONQuery(elem.query)),\n",
+       "        Query: (elem) => {\n",
+       "          const auth = {\n",
+       "            username: elem.credentials['username'],\n",
+       "            apiKey: elem.credentials['api_key'] || 'default_public'\n",
+       "          };\n",
+       "          const config = {\n",
+       "            serverURL: elem.credentials['base_url'] || `https://${elem.credentials['username']}.carto.com/`\n",
+       "          };\n",
+       "          return new carto.source.SQL(elem.query, auth, config)\n",
+       "        },\n",
+       "        MVT: (elem) => new carto.source.MVT(elem.query.file, JSON.parse(elem.query.metadata)),\n",
+       "      }\n",
+       "\n",
+       "      this.createSource = (elem) => {\n",
+       "        return sourceTypes[elem.type](elem);\n",
+       "      }\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  \n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "    </script>\n",
+       "  </body>\n",
+       "  </html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x7f350620a6d8>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from cartoframes.viz.helpers import color_bins_layer\n",
+    "\n",
+    "# Simplest version\n",
+    "Map(\n",
+    "    color_bins_layer('populated_places', 'pop_max')\n",
+    ")\n",
+    "\n",
+    "# With all params\n",
+    "Map(\n",
+    "    color_bins_layer('populated_places', 'pop_max', bins=5, palette='purpor', title='Pop max')\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "def color_category_layer(source, value, top=11, palette='bold', title=''):\n",
+      "    return Layer(\n",
+      "        source,\n",
+      "        style={\n",
+      "            'point': {\n",
+      "                'color': 'ramp(top(${0}, {1}), {2})'.format(value, top, palette)\n",
+      "            },\n",
+      "            'line': {\n",
+      "                'color': 'ramp(top(${0}, {1}), {2})'.format(value, top, palette)\n",
+      "            },\n",
+      "            'polygon': {\n",
+      "                'color': 'ramp(top(${0}, {1}), {2})'.format(value, top, palette)\n",
+      "            }\n",
+      "        },\n",
+      "        popup={\n",
+      "            'hover': {\n",
+      "                'label': title or value,\n",
+      "                'value': '$' + value\n",
+      "            }\n",
+      "        },\n",
+      "        legend={\n",
+      "            'type': 'basic',\n",
+      "            'ramp': 'color',\n",
+      "            'heading': title or value,\n",
+      "            'description': ''\n",
+      "        }\n",
+      "    )\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "from cartoframes.viz.helpers import inspect, color_category_layer\n",
+    "\n",
+    "inspect(color_category_layer)"
+   ]
+  }
+ ],
+ "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.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/examples/debug/API/popup.ipynb b/examples/debug/API/popup.ipynb
index 85ab6a91e..42137af53 100644
--- a/examples/debug/API/popup.ipynb
+++ b/examples/debug/API/popup.ipynb
@@ -680,7 +680,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7f60e49c3908>"
+       "<cartoframes.viz.map.Map at 0x7f86f13e14a8>"
       ]
      },
      "execution_count": 2,
@@ -707,7 +707,7 @@
     "        'populated_places',\n",
     "        'color: blue',\n",
     "        {\n",
-    "            'hover': ['$name'],\n",
+    "            'hover': '$name',\n",
     "            'click': ['$name', '$pop_max']\n",
     "        }\n",
     "    )\n",
@@ -1377,7 +1377,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7f60e4973dd8>"
+       "<cartoframes.viz.map.Map at 0x7f86e24df0f0>"
       ]
      },
      "execution_count": 3,
@@ -2072,7 +2072,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7f60aa2b0198>"
+       "<cartoframes.viz.map.Map at 0x7f86e1c70080>"
       ]
      },
      "execution_count": 4,
@@ -2108,10 +2108,10 @@
     "        'populated_places',\n",
     "        'color: blue',\n",
     "        {\n",
-    "            'hover': [{\n",
+    "            'hover': {\n",
     "                'label': 'Name',\n",
     "                'value': '$name'\n",
-    "            }],\n",
+    "            },\n",
     "            'click': [{\n",
     "                'label': 'Name',\n",
     "                'value': '$name'\n",
@@ -2787,7 +2787,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.map.Map at 0x7f60aa2b0748>"
+       "<cartoframes.viz.map.Map at 0x7f86e24cd2b0>"
       ]
      },
      "execution_count": 5,
diff --git a/setup.py b/setup.py
index 1c0f2f2f4..008368ff1 100644
--- a/setup.py
+++ b/setup.py
@@ -17,6 +17,7 @@ def walk_subpkg(name):
             data_files.append(os.path.join(sub_dir, f))
     return data_files
 
+
 REQUIRES = [
     'pandas>=0.20.1',
     'webcolors>=1.7.0',
@@ -52,7 +53,7 @@ def walk_subpkg(name):
 
 about = {}
 with open(os.path.join(here, 'cartoframes', '__version__.py'), 'r', 'utf-8') as f:
-        exec(f.read(), about)
+    exec(f.read(), about)
 
 setup(
     name=about['__title__'],
diff --git a/test/test_utils.py b/test/test_utils.py
index d3b024fa6..c1f123dcc 100644
--- a/test/test_utils.py
+++ b/test/test_utils.py
@@ -4,8 +4,6 @@
 import unittest
 from collections import OrderedDict
 
-import pandas as pd
-
 from cartoframes.utils import (dict_items, cssify, importify_params)
 
 
diff --git a/test/viz/test_popup.py b/test/viz/test_popup.py
index 4dcf99dcc..0547685b2 100644
--- a/test/viz/test_popup.py
+++ b/test/viz/test_popup.py
@@ -23,6 +23,20 @@ def test_popup_init(self):
             'value': '$pop'
         }])
 
+        popup = Popup({
+            'click': '$pop',
+            'hover': {
+                'label': 'Pop',
+                'value': '$pop'
+            }
+        })
+
+        self.assertEqual(popup._click, ['$pop'])
+        self.assertEqual(popup._hover, [{
+            'label': 'Pop',
+            'value': '$pop'
+        }])
+
     def test_popup_interactivity(self):
         """Popup should return a proper interactivity object"""
         popup = Popup({