From f59731b749e462a51857f792f50b8dd92ff57f77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 6 May 2020 08:58:44 +0200
Subject: [PATCH 1/3] Update is_static default to False in Layout

---
 cartoframes/viz/layout.py     | 10 +++++-----
 tests/unit/viz/test_layout.py |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/cartoframes/viz/layout.py b/cartoframes/viz/layout.py
index 4d2d2b225..a703b901f 100644
--- a/cartoframes/viz/layout.py
+++ b/cartoframes/viz/layout.py
@@ -16,8 +16,8 @@ class Layout:
         M_SIZE (number, optional): Number of rows of the layout
         viewport (dict, optional): Properties for display of the maps viewport.
             Keys can be `bearing` or `pitch`.
-        is_static (boolean, optional): By default, all the maps in each visualization
-            are static images due to performance reasons. In order to set them interactive,
+        is_static (boolean, optional): By default is False. All the maps in each visualization
+            are interactive. In order to set them static images for performance reasons
             set `is_static` to True.
         map_height (number, optional): Height in pixels for each visualization.
             Default is 250.
@@ -66,12 +66,12 @@ class Layout:
         ...     Map(Layer('table_in_your_account'))
         >>> ], viewport={ 'zoom': 2 })
 
-        Create an interactive layout
+        Create an static layout
 
         >>> Layout([
         ...    Map(Layer('table_in_your_account')), Map(Layer('table_in_your_account')),
         ...    Map(Layer('table_in_your_account')), Map(Layer('table_in_your_account'))
-        >>> ], is_static=False)
+        >>> ], is_static=True)
 
     """
     def __init__(self,
@@ -81,7 +81,7 @@ def __init__(self,
                  viewport=None,
                  map_height=250,
                  full_height=True,
-                 is_static=True,
+                 is_static=False,
                  **kwargs):
 
         self._maps = maps
diff --git a/tests/unit/viz/test_layout.py b/tests/unit/viz/test_layout.py
index 48d7f790d..6d80c57e2 100644
--- a/tests/unit/viz/test_layout.py
+++ b/tests/unit/viz/test_layout.py
@@ -22,7 +22,7 @@ def test__init(self):
         assert layout._n_size == 0
         assert layout._m_size == 1
         assert layout._viewport is None
-        assert layout._is_static is True
+        assert layout._is_static is False
 
     def test__init_maps(self):
         """Layout should init properly"""
@@ -97,7 +97,7 @@ def test_is_static(self):
         layout = Layout([
             Map(Layer(Source(SOURCE))),
             Map(Layer(Source(SOURCE)))
-        ], viewport={'zoom': 5})
+        ], is_static=True)
 
         assert layout._layout[0].get('is_static') is True
         assert layout._layout[1].get('is_static') is True

From 3f0c9336b9ec63410a96c735fa1905846c6c64e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 6 May 2020 09:17:01 +0200
Subject: [PATCH 2/3] Update examples and guides

---
 examples/map_layout/custom_layout.ipynb       | 300 ++++++++-------
 examples/map_layout/default_layout.ipynb      | 136 +++----
 examples/map_layout/interactive_layout.ipynb  |  24 +-
 examples/map_layout/layout_titles.ipynb       | 123 +++---
 examples/map_layout/layout_viewport.ipynb     | 361 ++++++++----------
 examples/map_layout/save_image_layout.ipynb   | 195 ++++------
 .../publish_visualization_layout.ipynb        |   2 +-
 guides/05-Visualization.ipynb                 |   2 +-
 8 files changed, 552 insertions(+), 591 deletions(-)

diff --git a/examples/map_layout/custom_layout.ipynb b/examples/map_layout/custom_layout.ipynb
index d84542ff4..fd40fd54d 100644
--- a/examples/map_layout/custom_layout.ipynb
+++ b/examples/map_layout/custom_layout.ipynb
@@ -94,6 +94,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -150,24 +155,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -175,25 +170,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -277,30 +284,40 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -311,30 +328,40 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-3&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -518,19 +545,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -842,7 +862,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -951,7 +970,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -989,16 +1008,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1036,15 +1056,10 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
        "const show_info = 'None' === 'true';\n",
        "const is_static = 'true' === 'true';\n",
        "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
-       "\n",
        "init({\n",
        "  show_info,\n",
        "  is_static,\n",
@@ -1057,7 +1072,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x118196290>"
+       "<cartoframes.viz.layout.Layout at 0x7f85517c8cc0>"
       ]
      },
      "execution_count": 2,
@@ -1071,7 +1086,7 @@
     "    Map(Layer('drought_wk_2')),\n",
     "    Map(Layer('drought_wk_3')),\n",
     "    Map(Layer('drought_wk_4'))\n",
-    "], 2,2)"
+    "], 2, 2, is_static=True)"
    ]
   },
   {
@@ -1138,6 +1153,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -1194,24 +1214,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -1219,25 +1229,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -1321,60 +1343,92 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
+       "    </div>\n",
+       "  \n",
+       "    <div class=&quot;layout-map-row&quot;>\n",
+       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
+       "    </div>\n",
+       "  \n",
+       "    <div class=&quot;layout-map-row&quot;>\n",
+       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
+       "    </div>\n",
+       "  \n",
+       "    <div class=&quot;layout-map-row&quot;>\n",
+       "    \n",
+       "      \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-3&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -1558,19 +1612,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -1882,7 +1929,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -1991,7 +2037,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -2029,16 +2075,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -2076,15 +2123,10 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
        "const show_info = 'None' === 'true';\n",
        "const is_static = 'true' === 'true';\n",
        "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
-       "\n",
        "init({\n",
        "  show_info,\n",
        "  is_static,\n",
@@ -2097,7 +2139,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x1181c4b10>"
+       "<cartoframes.viz.layout.Layout at 0x7f8551778908>"
       ]
      },
      "execution_count": 3,
@@ -2111,7 +2153,7 @@
     "    Map(Layer('drought_wk_2')),\n",
     "    Map(Layer('drought_wk_3')),\n",
     "    Map(Layer('drought_wk_4'))\n",
-    "], 1,4)"
+    "], 1, 4, is_static=True)"
    ]
   }
  ],
@@ -2131,7 +2173,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/default_layout.ipynb b/examples/map_layout/default_layout.ipynb
index 9089b0b5f..06e241a67 100644
--- a/examples/map_layout/default_layout.ipynb
+++ b/examples/map_layout/default_layout.ipynb
@@ -94,6 +94,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -150,24 +155,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -175,25 +170,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -277,53 +284,60 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -507,19 +521,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -831,7 +838,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -940,7 +946,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -978,16 +984,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1025,14 +1032,9 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: null, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: null}];\n",
        "const show_info = 'None' === 'true';\n",
-       "const is_static = 'true' === 'true';\n",
-       "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
+       "const is_static = 'False' === 'true';\n",
        "\n",
        "init({\n",
        "  show_info,\n",
@@ -1046,7 +1048,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x11d72ba90>"
+       "<cartoframes.viz.layout.Layout at 0x7f9bba199b70>"
       ]
      },
      "execution_count": 2,
@@ -1079,7 +1081,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/interactive_layout.ipynb b/examples/map_layout/interactive_layout.ipynb
index c4bca818a..23281cfb6 100644
--- a/examples/map_layout/interactive_layout.ipynb
+++ b/examples/map_layout/interactive_layout.ipynb
@@ -13,9 +13,7 @@
    "source": [
     "Use the `Layout` class to create a variety of map views for comparison. \n",
     "\n",
-    "For more information, run `help(Layout)`.\n",
-    "\n",
-    "In this example, by setting `is_static=False`, all maps in the Layout are interactive meaning they can be zoomed and/or panned."
+    "For more information, run `help(Layout)`."
    ]
   },
   {
@@ -32,7 +30,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
     {
@@ -60,11 +58,11 @@
        "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "\n",
        "  <!-- Include Airship -->\n",
-       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship.js&quot;></script>\n",
-       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship/airship.esm.js&quot;></script>\n",
-       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3.1-rc.1/asbridge.min.js&quot;></script>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3.1-rc.1/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3.1-rc.1/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
        "\n",
@@ -1088,10 +1086,10 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x123809eb8>"
+       "<cartoframes.viz.layout.Layout at 0x7f64ac7888d0>"
       ]
      },
-     "execution_count": 5,
+     "execution_count": 2,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -1100,7 +1098,7 @@
     "Layout([\n",
     "    Map(Layer('drought_wk_1', color_bins_style('dm', method='equal', palette='pinkyl'))),\n",
     "    Map(Layer('drought_wk_4', color_bins_style('dm', method='equal', palette='pinkyl'))),\n",
-    "], is_static=False, map_height=500, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
+    "], map_height=500, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
    ]
   }
  ],
@@ -1120,7 +1118,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.3"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/layout_titles.ipynb b/examples/map_layout/layout_titles.ipynb
index 4b9c1ab61..a75100482 100644
--- a/examples/map_layout/layout_titles.ipynb
+++ b/examples/map_layout/layout_titles.ipynb
@@ -94,6 +94,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -150,24 +155,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -175,25 +170,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -277,34 +284,48 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          <p>US Drought: Week 1</p>\n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "          <header class=&quot;layout-map-cell--header&quot;>\n",
+       "            <p>US Drought: Week 1</p>\n",
+       "          </header>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          <p>US Drought: Week 2</p>\n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "          <header class=&quot;layout-map-cell--header&quot;>\n",
+       "            <p>US Drought: Week 2</p>\n",
+       "          </header>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -488,19 +509,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -812,7 +826,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -921,7 +934,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -959,16 +972,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1006,14 +1020,9 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 2}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: &quot;US Drought: Week 1&quot;, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 2}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 2}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: &quot;US Drought: Week 2&quot;, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 2}}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 2}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: &quot;US Drought: Week 1&quot;, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 2}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 2}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: &quot;US Drought: Week 2&quot;, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 2}}];\n",
        "const show_info = 'None' === 'true';\n",
-       "const is_static = 'true' === 'true';\n",
-       "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
+       "const is_static = 'False' === 'true';\n",
        "\n",
        "init({\n",
        "  show_info,\n",
@@ -1027,7 +1036,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x11e29bf10>"
+       "<cartoframes.viz.layout.Layout at 0x7f02429e6ba8>"
       ]
      },
      "execution_count": 2,
@@ -1059,7 +1068,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/layout_viewport.ipynb b/examples/map_layout/layout_viewport.ipynb
index 0295b6a1b..5b3b57f88 100644
--- a/examples/map_layout/layout_viewport.ipynb
+++ b/examples/map_layout/layout_viewport.ipynb
@@ -101,6 +101,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -157,24 +162,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -182,25 +177,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -284,108 +291,80 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-3&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -569,19 +548,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -893,7 +865,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -1002,7 +973,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -1040,16 +1011,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1087,15 +1059,10 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 18.9154930058839], [-80.7043209276455, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 20.1674444320099], [-98.6742914174104, 62.0996895176849]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_2 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 20.1674444320099], [-86.6143420571782, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_3 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458671406852, 20.1674444320099], [-96.9550013593997, 62.0996895176849]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_4 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 18.9154930058839], [-80.7043209276455, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 20.1674444320099], [-98.6742914174104, 62.0996895176849]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_2 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_2 where dm = 3&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 20.1674444320099], [-86.6143420571782, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_3 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_3 where dm = 3&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458671406852, 20.1674444320099], [-96.9550013593997, 62.0996895176849]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_4 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_4 where dm = 3&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
        "const show_info = 'None' === 'true';\n",
        "const is_static = 'true' === 'true';\n",
        "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
-       "\n",
        "init({\n",
        "  show_info,\n",
        "  is_static,\n",
@@ -1108,7 +1075,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x1161bbfd0>"
+       "<cartoframes.viz.layout.Layout at 0x7f312da7f940>"
       ]
      },
      "execution_count": 2,
@@ -1122,7 +1089,7 @@
     "    Map(Layer('select * from drought_wk_2 where dm = 3', basic_style(color='#e15383'))),\n",
     "    Map(Layer('select * from drought_wk_3 where dm = 3', basic_style(color='#e15383'))),\n",
     "    Map(Layer('select * from drought_wk_4 where dm = 3', basic_style(color='#e15383'))),\n",
-    "], viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
+    "], is_static=True, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
    ]
   },
   {
@@ -1196,6 +1163,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -1252,24 +1224,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -1277,25 +1239,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -1379,99 +1353,80 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
+       "\n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-3&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -1655,19 +1610,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -1979,7 +1927,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -2088,7 +2035,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -2126,16 +2073,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -2173,15 +2121,10 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: null, &quot;pitch&quot;: null, &quot;zoom&quot;: 0.5}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;zoom&quot;: 0.5}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-158.206784227781, 17.9272041277537], [-66.1771321587841, 62.1302147705527]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 1&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#ffc285, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-157.306259152299, 18.9250397763754], [-77.7068457909159, 57.1689091618778]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 2&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#fa8a76, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 18.9154930058839], [-80.7043209276455, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: null, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;basic&quot;, &quot;variable&quot;: &quot;&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: null, &quot;pitch&quot;: null, &quot;zoom&quot;: 0.5}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#826DBA\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;zoom&quot;: 0.5}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-158.206784227781, 17.9272041277537], [-66.1771321587841, 62.1302147705527]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 1&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_1 where dm = 1&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#ffc285, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-157.306259152299, 18.9250397763754], [-77.7068457909159, 57.1689091618778]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 2&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_1 where dm = 2&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#fa8a76, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-156.458138800649, 18.9154930058839], [-80.7043209276455, 56.2933104001473]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;select * from drought_wk_1 where dm = 3&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: opacity(#e15383, 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
        "const show_info = 'None' === 'true';\n",
        "const is_static = 'true' === 'true';\n",
        "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
-       "\n",
        "init({\n",
        "  show_info,\n",
        "  is_static,\n",
@@ -2194,7 +2137,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x109807510>"
+       "<cartoframes.viz.layout.Layout at 0x7f312da50cc0>"
       ]
      },
      "execution_count": 3,
@@ -2208,7 +2151,7 @@
     "    Map(Layer('select * from drought_wk_1 where dm = 1', basic_style(color='#ffc285'))),\n",
     "    Map(Layer('select * from drought_wk_1 where dm = 2', basic_style(color='#fa8a76'))),\n",
     "    Map(Layer('select * from drought_wk_1 where dm = 3', basic_style(color='#e15383'))),\n",
-    "], viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
+    "], is_static=True, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
    ]
   }
  ],
@@ -2228,7 +2171,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/save_image_layout.ipynb b/examples/map_layout/save_image_layout.ipynb
index 598e4db6a..74c77ecb7 100644
--- a/examples/map_layout/save_image_layout.ipynb
+++ b/examples/map_layout/save_image_layout.ipynb
@@ -15,7 +15,7 @@
     "\n",
     "For more information, run `help(Layout)`.\n",
     "\n",
-    "Layouts, by default, are static images. To save a layout image, right click and select the option \"Save Image As...\""
+    "Layouts can be static by using the `is_static=True` flag. To save a layout image, right click and select the option \"Save Image As...\""
    ]
   },
   {
@@ -94,6 +94,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -150,24 +155,14 @@
        "  height: 250px;\n",
        "  justify-content: center;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 8px;\n",
        "  position: relative;\n",
        "}\n",
        "\n",
-       ".layout-map-cell-legend {\n",
-       "  flex-direction: row;\n",
-       "}\n",
-       "\n",
-       "h2.as-widget-header__header {\n",
-       "  font-size: 12px;\n",
-       "  line-height: 12px;\n",
-       "  padding: 8px 0;\n",
-       "}\n",
-       "\n",
        ".layout-map {\n",
        "  background-color: silver;\n",
        "  height: 100%;\n",
-       "  width: 85%;\n",
        "}\n",
        "\n",
        ".layout-map > .as-map-area,\n",
@@ -175,25 +170,37 @@
        "  height: 100%;\n",
        "}\n",
        "\n",
+       ".layer-selector {\n",
+       "  margin-bottom: 12px;\n",
+       "}\n",
+       "\n",
        ".layout-map-container {\n",
        "  align-items: center;\n",
        "  display: flex;\n",
-       "  flex-direction: row;\n",
+       "  flex-direction: column;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "  padding: 0 8px;\n",
        "}\n",
        "\n",
        ".layout-map-row {\n",
        "  display: flex;\n",
-       "  flex-direction: column;\n",
+       "  flex-direction: row;\n",
        "  justify-content: space-around;\n",
        "  width: 100%;\n",
+       "  height: 100%;\n",
        "}\n",
        "\n",
        ".layout-legends {\n",
        "  background-color: white;\n",
        "}\n",
+       "\n",
+       ".layout-map-cell--section {\n",
+       "  position: relative;\n",
+       "  width: 100%;\n",
+       "  height: 100%;\n",
+       "}\n",
        "</style>\n",
        "    <style>\n",
        "    #error-container {\n",
@@ -277,108 +284,80 @@
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-0&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-1&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-2&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
-       "    </div>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
        "      \n",
        "      \n",
        "      \n",
        "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 250px&quot;>\n",
-       "          \n",
-       "          \n",
-       "            \n",
-       "            \n",
+       "      \n",
+       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
+       "        \n",
        "\n",
-       "<div id=&quot;legends&quot; class=&quot;legends layout-legends&quot;>\n",
-       "  \n",
-       "    \n",
-       "  \n",
-       "</div>\n",
-       "          \n",
+       "        <section class=&quot;layout-map-cell--section&quot;>\n",
        "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <div class=&quot;as-main layout-map&quot; id=&quot;main-container-3&quot;>\n",
+       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
        "            <div class=&quot;as-map-area&quot;>\n",
        "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div> <!-- as-map-area -->\n",
-       "          </div> <!-- as-main -->\n",
+       "            </div>\n",
+       "            \n",
+       "\n",
+       "          </as-responsive-content>\n",
+       "        </section>\n",
        "      </div>\n",
        "    \n",
        "    </div>\n",
@@ -562,19 +541,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -886,7 +858,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -995,7 +966,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -1033,16 +1004,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1080,15 +1052,10 @@
        "}());\n",
        "</script>\n",
        "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;vf4424c&quot;, &quot;title&quot;: &quot;Week 1&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Week 1&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;options&quot;: {}, &quot;title&quot;: &quot;Week 1&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vf4424c: $dm\\ncolor: opacity(ramp(globalEqIntervals($dm, 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;vf4424c&quot;, &quot;title&quot;: &quot;Week 2&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Week 2&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;options&quot;: {}, &quot;title&quot;: &quot;Week 2&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vf4424c: $dm\\ncolor: opacity(ramp(globalEqIntervals($dm, 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;vf4424c&quot;, &quot;title&quot;: &quot;Week 3&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Week 3&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;options&quot;: {}, &quot;title&quot;: &quot;Week 3&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vf4424c: $dm\\ncolor: opacity(ramp(globalEqIntervals($dm, 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;vf4424c&quot;, &quot;title&quot;: &quot;Week 4&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Week 4&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;options&quot;: {}, &quot;title&quot;: &quot;Week 4&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vf4424c: $dm\\ncolor: opacity(ramp(globalEqIntervals($dm, 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
+       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 1&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: &quot;Week 1&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 2&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: &quot;Week 2&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 3&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;title&quot;: &quot;Week 3&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 4&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;title&quot;: &quot;Week 4&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
        "const show_info = 'None' === 'true';\n",
        "const is_static = 'true' === 'true';\n",
        "\n",
-       "maps.forEach((map) => {\n",
-       "  map.has_legends = false;\n",
-       "  map.layer_selector = false;\n",
-       "});\n",
-       "\n",
        "init({\n",
        "  show_info,\n",
        "  is_static,\n",
@@ -1101,7 +1068,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x114949e50>"
+       "<cartoframes.viz.layout.Layout at 0x7f5c6461f048>"
       ]
      },
      "execution_count": 2,
@@ -1113,11 +1080,11 @@
     "style = color_bins_style('dm', method='equal', palette='pinkyl')\n",
     "\n",
     "Layout([\n",
-    "    Map(Layer('drought_wk_1', style, title='Week 1')),\n",
-    "    Map(Layer('drought_wk_2', style, title='Week 2')),\n",
-    "    Map(Layer('drought_wk_3', style, title='Week 3')),\n",
-    "    Map(Layer('drought_wk_4', style, title='Week 4'))\n",
-    "], viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
+    "    Map(Layer('drought_wk_1', style, title='Week 1', default_legend=False)),\n",
+    "    Map(Layer('drought_wk_2', style, title='Week 2', default_legend=False)),\n",
+    "    Map(Layer('drought_wk_3', style, title='Week 3', default_legend=False)),\n",
+    "    Map(Layer('drought_wk_4', style, title='Week 4', default_legend=False))\n",
+    "], is_static=True, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
    ]
   }
  ],
@@ -1137,7 +1104,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,
diff --git a/examples/publish_and_share/publish_visualization_layout.ipynb b/examples/publish_and_share/publish_visualization_layout.ipynb
index 55779282f..aaf619e3c 100644
--- a/examples/publish_and_share/publish_visualization_layout.ipynb
+++ b/examples/publish_and_share/publish_visualization_layout.ipynb
@@ -34,7 +34,7 @@
     "layout_viz = Layout([\n",
     "    Map(Layer('public_table')),\n",
     "    Map(Layer('private_table'))\n",
-    "])"
+    "], is_static=True)"
    ]
   },
   {
diff --git a/guides/05-Visualization.ipynb b/guides/05-Visualization.ipynb
index 227ebc943..6510d32cd 100644
--- a/guides/05-Visualization.ipynb
+++ b/guides/05-Visualization.ipynb
@@ -7781,7 +7781,7 @@
     "        ),\n",
     "        Layer(stores_gdf)\n",
     "    ]),\n",
-    "],2,2,viewport={'zoom': 10, 'lat': 40.64, 'lng': -73.92}, map_height=400)"
+    "],2,2,viewport={'zoom': 10, 'lat': 40.64, 'lng': -73.92}, map_height=400, is_static=True)"
    ]
   },
   {

From 4bc5fee70a18abfff3ff17391a2e62fa5a212247 Mon Sep 17 00:00:00 2001
From: cmongut <cmongut@gmail.com>
Date: Wed, 6 May 2020 19:45:55 +0200
Subject: [PATCH 3/3] Make layout examples interactive by default. Replace
 interactive example with static one. Remove the save image example as we are
 not listing it and doesn't add a lot of value.

---
 docs/developer-center/examples/examples.json |    6 +-
 examples/map_layout/custom_layout.ipynb      |    2 +-
 examples/map_layout/interactive_layout.ipynb | 1126 ------------------
 examples/map_layout/save_image_layout.ipynb  | 1112 -----------------
 4 files changed, 4 insertions(+), 2242 deletions(-)
 delete mode 100644 examples/map_layout/interactive_layout.ipynb
 delete mode 100644 examples/map_layout/save_image_layout.ipynb

diff --git a/docs/developer-center/examples/examples.json b/docs/developer-center/examples/examples.json
index f3ec46acf..700ac6e7d 100644
--- a/docs/developer-center/examples/examples.json
+++ b/docs/developer-center/examples/examples.json
@@ -307,9 +307,9 @@
             "path": "map_layout",
             "group": "Layout"
         }, {
-            "title": "Make layout interactive",
-            "desc": "Create an interactive visualization layout",
-            "file": "interactive_layout",
+            "title": "Make layout static",
+            "desc": "Create a static visualization layout",
+            "file": "static_layout",
             "path": "map_layout",
             "group": "Layout"
         }]
diff --git a/examples/map_layout/custom_layout.ipynb b/examples/map_layout/custom_layout.ipynb
index fd40fd54d..674b0f83e 100644
--- a/examples/map_layout/custom_layout.ipynb
+++ b/examples/map_layout/custom_layout.ipynb
@@ -2173,7 +2173,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.7"
+   "version": "3.7.3"
   }
  },
  "nbformat": 4,
diff --git a/examples/map_layout/interactive_layout.ipynb b/examples/map_layout/interactive_layout.ipynb
deleted file mode 100644
index 23281cfb6..000000000
--- a/examples/map_layout/interactive_layout.ipynb
+++ /dev/null
@@ -1,1126 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "# Interactive Layout"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Use the `Layout` class to create a variety of map views for comparison. \n",
-    "\n",
-    "For more information, run `help(Layout)`."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from cartoframes.auth import set_default_credentials\n",
-    "from cartoframes.viz import Map, Layer, Layout, color_bins_style\n",
-    "\n",
-    "set_default_credentials('cartoframes')"
-   ]
-  },
-  {
-   "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: 500px;;\n",
-       "    \"\n",
-       "  srcDoc=\"\n",
-       "  <!DOCTYPE html>\n",
-       "<html lang=&quot;en&quot;>\n",
-       "<head>\n",
-       "  <title>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.4/carto-vl.min.js&quot;></script>\n",
-       "  <!-- Include Mapbox GL JS -->\n",
-       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
-       "  <!-- Include Mapbox GL CSS -->\n",
-       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
-       "\n",
-       "  <!-- Include Airship -->\n",
-       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship.js&quot;></script>\n",
-       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship/airship.esm.js&quot;></script>\n",
-       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3/asbridge.min.js&quot;></script>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "\n",
-       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
-       "\n",
-       "  <!-- External libraries -->\n",
-       "  \n",
-       "  <!-- pako -->\n",
-       "  <script src=&quot;https://libs.cartocdn.com/cartoframes/dependencies/pako_inflate.min.js&quot;></script>\n",
-       "\n",
-       "  <!-- base64-js -->\n",
-       "  <script src='https://libs.cartocdn.com/cartoframes/dependencies/base64.js'></script>\n",
-       "  <!-- html2canvas -->\n",
-       "  <script src=&quot;https://libs.cartocdn.com/cartoframes/dependencies/html2canvas.min.js&quot;></script>\n",
-       "\n",
-       "  \n",
-       "  <style>\n",
-       "  body {\n",
-       "    margin: 0;\n",
-       "    padding: 0;\n",
-       "  }\n",
-       "\n",
-       "  aside.as-sidebar {\n",
-       "    min-width: 300px;\n",
-       "  }\n",
-       "\n",
-       "  .map-image {\n",
-       "    display: none;\n",
-       "    max-width: 100%;\n",
-       "    height: auto;\n",
-       "  }\n",
-       "\n",
-       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
-       "    font-size: 14px;\n",
-       "    line-height: 14px;\n",
-       "  }\n",
-       "</style>\n",
-       "  <style>\n",
-       "  .map {\n",
-       "    position: absolute;\n",
-       "    height: 100%;\n",
-       "    width: 100%;\n",
-       "  }\n",
-       "\n",
-       "  .map-info {\n",
-       "    position: absolute;\n",
-       "    bottom: 0;\n",
-       "    padding: 0 5px;\n",
-       "    background-color: rgba(255, 255, 255, 0.5);\n",
-       "    margin: 0;\n",
-       "    color: rgba(0, 0, 0, 0.75);\n",
-       "    font-size: 12px;\n",
-       "    width: auto;\n",
-       "    height: 18px;\n",
-       "    font-family: 'Open Sans';\n",
-       "  }\n",
-       "\n",
-       "  .map-footer {\n",
-       "    background: #F2F6F9;\n",
-       "    font-family: Roboto;\n",
-       "    font-size: 12px;\n",
-       "    line-height: 24px;\n",
-       "    color: #162945;\n",
-       "    text-align: center;\n",
-       "    z-index: 2;\n",
-       "  }\n",
-       "\n",
-       "  .map-footer a {\n",
-       "    text-decoration: none;\n",
-       "  }\n",
-       "\n",
-       "  .map-footer a:hover {\n",
-       "    text-decoration: underline;\n",
-       "  }\n",
-       "</style>\n",
-       "  <style>\n",
-       ".layout-map-cell p {\n",
-       "  font-family: Roboto;\n",
-       "  font-size: 14px;\n",
-       "}\n",
-       "\n",
-       ".layout-map.as-main {\n",
-       "  width: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-map-cell {\n",
-       "  align-items: center;\n",
-       "  display: flex;\n",
-       "  flex-direction: column;\n",
-       "  height: 250px;\n",
-       "  justify-content: center;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "  padding: 8px;\n",
-       "  position: relative;\n",
-       "}\n",
-       "\n",
-       ".layout-map {\n",
-       "  background-color: silver;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-map > .as-map-area,\n",
-       ".map-image > .as-map-area {\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layer-selector {\n",
-       "  margin-bottom: 12px;\n",
-       "}\n",
-       "\n",
-       ".layout-map-container {\n",
-       "  align-items: center;\n",
-       "  display: flex;\n",
-       "  flex-direction: column;\n",
-       "  justify-content: space-around;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "  padding: 0 8px;\n",
-       "}\n",
-       "\n",
-       ".layout-map-row {\n",
-       "  display: flex;\n",
-       "  flex-direction: row;\n",
-       "  justify-content: space-around;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-legends {\n",
-       "  background-color: white;\n",
-       "}\n",
-       "\n",
-       ".layout-map-cell--section {\n",
-       "  position: relative;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "</style>\n",
-       "    <style>\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",
-       "      z-index: 1000;\n",
-       "      color: black;\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",
-       "    }\n",
-       "\n",
-       "    #error-container #error-content {\n",
-       "      margin-top: 0.4em;\n",
-       "    }\n",
-       "\n",
-       "    .error-details {\n",
-       "      margin-top: 1em;\n",
-       "    }\n",
-       "\n",
-       "    #error-stacktrace {\n",
-       "      list-style: none;\n",
-       "    }\n",
-       "</style>\n",
-       "  <style>\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",
-       "  <main id=&quot;main-container&quot; class=&quot;layout-map-container&quot;>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "              \n",
-       "              <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
-       "                <div class=&quot;as-panel as-panel--vertical as-panel--top as-panel--left&quot;>\n",
-       "                  \n",
-       "\n",
-       "<div class=&quot;as-panel__element&quot; id=&quot;legends-0&quot;>\n",
-       "  <as-layer-selector id=&quot;layer-selector-0&quot; class=&quot;layer-selector&quot;>\n",
-       "    \n",
-       "      \n",
-       "        \n",
-       "        \n",
-       "        <div slot=&quot;as-checkbox-layer-0-slot&quot;>\n",
-       "          \n",
-       "            \n",
-       "              <as-legend\n",
-       "                heading=&quot;dm&quot;\n",
-       "                description=&quot;&quot;>\n",
-       "                <as-legend-color-bins id=&quot;layer0_map0_legend0&quot; slot=&quot;legends&quot;></as-legend-color-bins>\n",
-       "                \n",
-       "              </as-legend>\n",
-       "            \n",
-       "          \n",
-       "        </div>\n",
-       "      \n",
-       "    \n",
-       "  </as-layer-selector>\n",
-       "</div>\n",
-       "                </div>\n",
-       "              </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell layout-map-cell-legend&quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "              \n",
-       "              <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
-       "                <div class=&quot;as-panel as-panel--vertical as-panel--top as-panel--left&quot;>\n",
-       "                  \n",
-       "\n",
-       "<div class=&quot;as-panel__element&quot; id=&quot;legends-1&quot;>\n",
-       "  <as-layer-selector id=&quot;layer-selector-1&quot; class=&quot;layer-selector&quot;>\n",
-       "    \n",
-       "      \n",
-       "        \n",
-       "        \n",
-       "        <div slot=&quot;as-checkbox-layer-0-slot&quot;>\n",
-       "          \n",
-       "            \n",
-       "              <as-legend\n",
-       "                heading=&quot;dm&quot;\n",
-       "                description=&quot;&quot;>\n",
-       "                <as-legend-color-bins id=&quot;layer0_map1_legend0&quot; slot=&quot;legends&quot;></as-legend-color-bins>\n",
-       "                \n",
-       "              </as-legend>\n",
-       "            \n",
-       "          \n",
-       "        </div>\n",
-       "      \n",
-       "    \n",
-       "  </as-layer-selector>\n",
-       "</div>\n",
-       "                </div>\n",
-       "              </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "    </div>\n",
-       "  \n",
-       "  </main>\n",
-       "\n",
-       "  \n",
-       "\n",
-       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
-       "  <section class=&quot;error-section&quot;>\n",
-       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
-       "    <section id=&quot;error-content&quot;>\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",
-       "  </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",
-       "</body>\n",
-       "<script>\n",
-       "  var init = (function () {\n",
-       "  'use strict';\n",
-       "\n",
-       "  const BASEMAPS = {\n",
-       "    DarkMatter: carto.basemaps.darkmatter,\n",
-       "    Voyager: carto.basemaps.voyager,\n",
-       "    Positron: carto.basemaps.positron\n",
-       "  };\n",
-       "\n",
-       "  const attributionControl = new mapboxgl.AttributionControl({\n",
-       "    compact: false\n",
-       "  });\n",
-       "\n",
-       "  const FIT_BOUNDS_SETTINGS = { animate: false, padding: 50, maxZoom: 16 };\n",
-       "\n",
-       "  /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\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",
-       "\n",
-       "  const UNKNOWN_FUNCTION = '<unknown>';\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",
-       "  const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\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 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",
-       "  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",
-       "  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",
-       "  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",
-       "  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.type;\n",
-       "    errors$[2].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 format(value) {\n",
-       "    if (Array.isArray(value)) {\n",
-       "      const [first, second] = value;\n",
-       "      if (first === -Infinity) {\n",
-       "        return `< ${formatValue(second)}`;\n",
-       "      }\n",
-       "      if (second === Infinity) {\n",
-       "        return `> ${formatValue(first)}`;\n",
-       "      }\n",
-       "      return `${formatValue(first)} - ${formatValue(second)}`;\n",
-       "    }\n",
-       "    return formatValue(value);\n",
-       "  }\n",
-       "\n",
-       "  function formatValue(value) {\n",
-       "    if (typeof value === 'number') {\n",
-       "      return formatNumber(value);\n",
-       "    }\n",
-       "    return value;\n",
-       "  }\n",
-       "\n",
-       "  function formatNumber(value) {\n",
-       "    if (!Number.isInteger(value)) {\n",
-       "      return value.toLocaleString(undefined, {\n",
-       "        minimumFractionDigits: 2,\n",
-       "        maximumFractionDigits: 3\n",
-       "      });\n",
-       "    }\n",
-       "    return value.toLocaleString();\n",
-       "  }\n",
-       "\n",
-       "  function updateViewport(map) {\n",
-       "    function updateMapInfo() {\n",
-       "      const mapInfo$ = document.getElementById('map-info');\n",
-       "      const center = map.getCenter();\n",
-       "      const lat = center.lat.toFixed(6);\n",
-       "      const lng = center.lng.toFixed(6);\n",
-       "      const zoom = map.getZoom().toFixed(2);\n",
-       "    \n",
-       "      mapInfo$.innerText = `viewport={'zoom': ${zoom}, 'lat': ${lat}, 'lng': ${lng}}`;\n",
-       "    }\n",
-       "\n",
-       "    updateMapInfo();\n",
-       "\n",
-       "    map.on('zoom', updateMapInfo);\n",
-       "    map.on('move', updateMapInfo); \n",
-       "  }\n",
-       "\n",
-       "  function getBasecolorSettings(basecolor) {\n",
-       "    return {\n",
-       "      'version': 8,\n",
-       "      'sources': {},\n",
-       "      'layers': [{\n",
-       "          'id': 'background',\n",
-       "          'type': 'background',\n",
-       "          'paint': {\n",
-       "              'background-color': basecolor\n",
-       "          }\n",
-       "      }]\n",
-       "    };\n",
-       "  }\n",
-       "\n",
-       "  function getImageElement(mapIndex) {\n",
-       "    const id = mapIndex !== undefined ? `map-image-${mapIndex}` : 'map-image';\n",
-       "    return document.getElementById(id);\n",
-       "  }\n",
-       "\n",
-       "  function getContainerElement(mapIndex) {\n",
-       "    const id = mapIndex !== undefined ? `main-container-${mapIndex}` : 'main-container';\n",
-       "    return document.getElementById(id);\n",
-       "  }\n",
-       "\n",
-       "  function saveImage(mapIndex) {\n",
-       "    const img = getImageElement(mapIndex);\n",
-       "    const container = getContainerElement(mapIndex);\n",
-       "\n",
-       "    html2canvas(container)\n",
-       "      .then((canvas) => setMapImage(canvas, img, container));\n",
-       "  }\n",
-       "\n",
-       "  function setMapImage(canvas, img, container) {\n",
-       "    const src = canvas.toDataURL();\n",
-       "    img.setAttribute('src', src);\n",
-       "    img.style.display = 'block';\n",
-       "    container.style.display = 'none';\n",
-       "  }\n",
-       "\n",
-       "  function resetPopupClick(interactivity) {\n",
-       "    interactivity.off('featureClick');\n",
-       "  }\n",
-       "\n",
-       "  function resetPopupHover(interactivity) {\n",
-       "    interactivity.off('featureHover');\n",
-       "  }\n",
-       "\n",
-       "  function setPopupsClick(map, clickPopup, hoverPopup, interactivity, attrs) {\n",
-       "    interactivity.on('featureClick', (event) => {\n",
-       "      updatePopup(map, clickPopup, event, attrs);\n",
-       "      hoverPopup.remove();\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function setPopupsHover(map, hoverPopup, interactivity, attrs) {\n",
-       "    interactivity.on('featureHover', (event) => {\n",
-       "      updatePopup(map, hoverPopup, event, attrs);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function updatePopup(map, popup, event, attrs) {\n",
-       "    if (event.features.length > 0) {\n",
-       "      let popupHTML = '';\n",
-       "      const layerIDs = [];\n",
-       "\n",
-       "      for (const feature of event.features) {\n",
-       "        if (layerIDs.includes(feature.layerId)) {\n",
-       "          continue;\n",
-       "        }\n",
-       "        // Track layers to add only one feature per layer\n",
-       "        layerIDs.push(feature.layerId);\n",
-       "    \n",
-       "        for (const item of attrs) {\n",
-       "          const variable = feature.variables[item.name];\n",
-       "          if (variable) {\n",
-       "            let value = variable.value;\n",
-       "            value = formatValue(value);\n",
-       "\n",
-       "            popupHTML = `\n",
-       "            <span class=&quot;popup-name&quot;>${item.title}</span>\n",
-       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
-       "          ` + popupHTML;\n",
-       "          }\n",
-       "        }\n",
-       "      }\n",
-       "\n",
-       "      popup\n",
-       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
-       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
-       "\n",
-       "      if (!popup.isOpen()) {\n",
-       "        popup.addTo(map);\n",
-       "      }\n",
-       "    } else {\n",
-       "      popup.remove();\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function setInteractivity(map, interactiveLayers, interactiveMapLayers) {\n",
-       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
-       "\n",
-       "    const clickPopup = new mapboxgl.Popup({\n",
-       "      closeButton: true,\n",
-       "      closeOnClick: false\n",
-       "    });\n",
-       "\n",
-       "    const hoverPopup = new mapboxgl.Popup({\n",
-       "      closeButton: false,\n",
-       "      closeOnClick: false\n",
-       "    });\n",
-       "\n",
-       "    const { clickAttrs, hoverAttrs } = _setInteractivityAttrs(interactiveLayers);\n",
-       "\n",
-       "    resetPopupClick(map);\n",
-       "    resetPopupHover(map);\n",
-       "\n",
-       "    if (clickAttrs.length > 0) {\n",
-       "      setPopupsClick(map, clickPopup, hoverPopup, interactivity, clickAttrs);\n",
-       "    }\n",
-       "\n",
-       "    if (hoverAttrs.length > 0) {\n",
-       "      setPopupsHover(map, hoverPopup, interactivity, hoverAttrs);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function _setInteractivityAttrs(interactiveLayers) {\n",
-       "    let clickAttrs = [];\n",
-       "    let hoverAttrs = [];\n",
-       "\n",
-       "    interactiveLayers.forEach((interactiveLayer) => {\n",
-       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
-       "        if (interactivityDef.event === 'click') {\n",
-       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
-       "        } else if (interactivityDef.event === 'hover') {\n",
-       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
-       "        }\n",
-       "      });\n",
-       "    });\n",
-       "\n",
-       "    return { clickAttrs, hoverAttrs };\n",
-       "  }\n",
-       "\n",
-       "  function renderWidget(widget, value) {\n",
-       "    widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
-       "\n",
-       "    if (value && widget.element) {\n",
-       "      widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function renderBridge(bridge, widget, mapLayer) {\n",
-       "    widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
-       "\n",
-       "    switch (widget.type) {\n",
-       "      case 'histogram':\n",
-       "        const type = _getWidgetType(mapLayer, widget.value, widget.prop);\n",
-       "        const histogram = type === 'category' ? 'categoricalHistogram' : 'numericalHistogram';\n",
-       "        bridge[histogram](widget.element, widget.value, widget.options);\n",
-       "\n",
-       "        break;\n",
-       "      case 'category':\n",
-       "        bridge.category(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "      case 'animation':\n",
-       "        widget.options.propertyName = widget.prop;\n",
-       "        bridge.animationControls(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "      case 'time-series':\n",
-       "        widget.options.propertyName = widget.prop;\n",
-       "        bridge.timeSeries(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function bridgeLayerWidgets(map, mapLayer, mapSource, widgets) {\n",
-       "    const bridge = new AsBridge.VL.Bridge({\n",
-       "      carto: carto,\n",
-       "      layer: mapLayer,\n",
-       "      source: mapSource,\n",
-       "      map: map\n",
-       "    });\n",
-       "\n",
-       "    widgets\n",
-       "      .filter((widget) => widget.has_bridge)\n",
-       "      .forEach((widget) => renderBridge(bridge, widget, mapLayer));\n",
-       "\n",
-       "    bridge.build();\n",
-       "  }\n",
-       "\n",
-       "  function _getWidgetType(layer, property, value) {\n",
-       "    return layer.metadata && layer.metadata.properties[value] ?\n",
-       "      layer.metadata.properties[value].type\n",
-       "      : _getWidgetPropertyType(layer, property);\n",
-       "  }\n",
-       "\n",
-       "  function _getWidgetPropertyType(layer, property) {\n",
-       "    return layer.metadata && layer.metadata.properties[property] ?\n",
-       "      layer.metadata.properties[property].type\n",
-       "      : null;\n",
-       "  }\n",
-       "\n",
-       "  function createLegends(layer, legends, layerIndex, mapIndex=0) {\n",
-       "    if (legends.length) {\n",
-       "      legends.forEach((legend, legendIndex) => _createLegend(layer, legend, layerIndex, legendIndex, mapIndex));\n",
-       "    } else {\n",
-       "      _createLegend(layer, legends, layerIndex, 0, mapIndex);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function _createLegend(layer, legend, layerIndex, legendIndex, mapIndex=0) {\n",
-       "    const element = document.querySelector(`#layer${layerIndex}_map${mapIndex}_legend${legendIndex}`);\n",
-       "\n",
-       "    if (legend.prop) {\n",
-       "      const othersLabel = 'Others';   // TODO: i18n\n",
-       "      const prop = legend.prop;\n",
-       "      const dynamic = legend.dynamic;\n",
-       "      const order = legend.ascending ? 'ASC' : 'DESC';\n",
-       "      const variable = legend.variable;\n",
-       "      const config = { othersLabel, variable, order };\n",
-       "      const options = { format, config, dynamic };\n",
-       "\n",
-       "      if (legend.type.startsWith('size-continuous')) {\n",
-       "        config.samples = 4;\n",
-       "      }\n",
-       "\n",
-       "      AsBridge.VL.Legends.rampLegend(element, layer, prop, options);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function SourceFactory() {\n",
-       "    const sourceTypes = { GeoJSON, Query, MVT };\n",
-       "\n",
-       "    this.createSource = (layer) => {\n",
-       "      return sourceTypes[layer.type](layer);\n",
-       "    };\n",
-       "  }\n",
-       "\n",
-       "  function GeoJSON(layer) {\n",
-       "    const options = JSON.parse(JSON.stringify(layer.options));\n",
-       "    const data = _decodeJSONData(layer.data, layer.encode_data);\n",
-       "\n",
-       "    return new carto.source.GeoJSON(data, options);\n",
-       "  }\n",
-       "\n",
-       "  function Query(layer) {\n",
-       "    const auth = {\n",
-       "      username: layer.credentials.username,\n",
-       "      apiKey: layer.credentials.api_key || 'default_public'\n",
-       "    };\n",
-       "\n",
-       "    const config = {\n",
-       "      serverURL: layer.credentials.base_url || `https://${layer.credentials.username}.carto.com/`\n",
-       "    };\n",
-       "\n",
-       "    return new carto.source.SQL(layer.data, auth, config);\n",
-       "  }\n",
-       "\n",
-       "  function MVT(layer) {\n",
-       "    return new carto.source.MVT(layer.data.file, JSON.parse(layer.data.metadata));\n",
-       "  }\n",
-       "\n",
-       "  function _decodeJSONData(data, encodeData) {\n",
-       "    try {\n",
-       "      if (encodeData) {\n",
-       "        const decodedJSON = pako.inflate(atob(data), { to: 'string' });\n",
-       "        return JSON.parse(decodedJSON);\n",
-       "      } else {\n",
-       "        return JSON.parse(data);\n",
-       "      }\n",
-       "    } catch(error) {\n",
-       "      throw new Error(`\n",
-       "      Error: &quot;${error}&quot;. CARTOframes is not able to parse your local data because it is too large.\n",
-       "      Please, disable the data compresion with encode_data=False in your Layer class.\n",
-       "    `);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  const factory = new SourceFactory();\n",
-       "\n",
-       "  function initMapLayer(layer, layerIndex, numLayers, hasLegends, map, mapIndex) {\n",
-       "    const mapSource = factory.createSource(layer);\n",
-       "    const mapViz = new carto.Viz(layer.viz);\n",
-       "    const mapLayer = new carto.Layer(`layer${layerIndex}`, mapSource, mapViz);\n",
-       "    const mapLayerIndex = numLayers - layerIndex - 1;\n",
-       "\n",
-       "    try {\n",
-       "      mapLayer._updateLayer.catch(displayError);\n",
-       "    } catch (e) {\n",
-       "      throw e;\n",
-       "    }\n",
-       "\n",
-       "    mapLayer.addTo(map);\n",
-       "\n",
-       "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
-       "    setLayerWidgets(map, layer, mapLayer, mapLayerIndex, mapSource);\n",
-       "\n",
-       "    return mapLayer;\n",
-       "  }\n",
-       "\n",
-       "  function getInteractiveLayers(layers, mapLayers) {\n",
-       "    const interactiveLayers = [];\n",
-       "    const interactiveMapLayers = [];\n",
-       "\n",
-       "    layers.forEach((layer, index) => {\n",
-       "      if (layer.interactivity) {\n",
-       "        interactiveLayers.push(layer);\n",
-       "        interactiveMapLayers.push(mapLayers[index]);\n",
-       "      }\n",
-       "    });\n",
-       "\n",
-       "    return { interactiveLayers, interactiveMapLayers };\n",
-       "  }\n",
-       "\n",
-       "  function setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends) {\n",
-       "    if (hasLegends && layer.legends) {\n",
-       "      createLegends(mapLayer, layer.legends, mapLayerIndex, mapIndex);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function setLayerWidgets(map, layer, mapLayer, mapLayerIndex, mapSource) {\n",
-       "    if (layer.widgets.length) {\n",
-       "      initLayerWidgets(layer.widgets, mapLayerIndex);\n",
-       "      updateLayerWidgets(layer.widgets, mapLayer);\n",
-       "      bridgeLayerWidgets(map, mapLayer, mapSource, layer.widgets);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function initLayerWidgets(widgets, mapLayerIndex) {\n",
-       "    widgets.forEach((widget, widgetIndex) => {\n",
-       "      const id = `layer${mapLayerIndex}_widget${widgetIndex}`;\n",
-       "      widget.id = id;\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function updateLayerWidgets(widgets, mapLayer) {\n",
-       "    mapLayer.on('updated', () => renderLayerWidgets(widgets, mapLayer));\n",
-       "  }\n",
-       "\n",
-       "  function renderLayerWidgets(widgets, mapLayer) {\n",
-       "    const variables = mapLayer.viz.variables;\n",
-       "\n",
-       "    widgets\n",
-       "      .filter((widget) => !widget.has_bridge)\n",
-       "      .forEach((widget) => {\n",
-       "        const name = widget.variable_name;\n",
-       "        const value = getWidgetValue(name, variables);\n",
-       "        renderWidget(widget, value);\n",
-       "      });\n",
-       "  }\n",
-       "\n",
-       "  function getWidgetValue(name, variables) {\n",
-       "    return name && variables[name] ? variables[name].value : null;\n",
-       "  }\n",
-       "\n",
-       "  function setReady(settings) {\n",
-       "    try {\n",
-       "      return settings.maps ? initMaps(settings.maps) : initMap(settings);\n",
-       "    } catch (e) {\n",
-       "      displayError(e);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function initMaps(maps) {\n",
-       "    return maps.map((mapSettings, mapIndex) => {\n",
-       "      return initMap(mapSettings, mapIndex);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function initMap(settings, mapIndex) {\n",
-       "    const basecolor = getBasecolorSettings(settings.basecolor);\n",
-       "    const basemapStyle =  BASEMAPS[settings.basemap] || settings.basemap || basecolor;\n",
-       "    const container = mapIndex !== undefined ? `map-${mapIndex}` : 'map';\n",
-       "    const map = createMap(container, basemapStyle, settings.bounds, settings.mapboxtoken);\n",
-       "\n",
-       "    if (settings.show_info) {\n",
-       "      updateViewport(map);\n",
-       "    }\n",
-       "\n",
-       "    if (settings.camera) {\n",
-       "      map.flyTo(settings.camera);\n",
-       "    }\n",
-       "\n",
-       "    return initLayers(map, settings, mapIndex);\n",
-       "  }\n",
-       "\n",
-       "  function initLayers(map, settings, mapIndex) {\n",
-       "    const numLayers = settings.layers.length;\n",
-       "    const hasLegends = settings.has_legends;\n",
-       "    const isStatic = settings.is_static;\n",
-       "    const layers = settings.layers;\n",
-       "    const mapLayers = getMapLayers(\n",
-       "      layers,\n",
-       "      numLayers,\n",
-       "      hasLegends,\n",
-       "      map,\n",
-       "      mapIndex\n",
-       "    );\n",
-       "\n",
-       "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
-       "    }\n",
-       "\n",
-       "    setInteractiveLayers(map, layers, mapLayers);\n",
-       "\n",
-       "    return waitForMapLayersLoad(isStatic, mapIndex, mapLayers);\n",
-       "  }\n",
-       "\n",
-       "  function waitForMapLayersLoad(isStatic, mapIndex, mapLayers) {\n",
-       "    return new Promise((resolve) => {\n",
-       "      carto.on('loaded', mapLayers, onMapLayersLoaded.bind(\n",
-       "        this, isStatic, mapIndex, mapLayers, resolve)\n",
-       "      );\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function onMapLayersLoaded(isStatic, mapIndex, mapLayers, resolve) {\n",
-       "    if (isStatic) {\n",
-       "      saveImage(mapIndex);\n",
-       "    }\n",
-       "\n",
-       "    resolve(mapLayers);\n",
-       "  }\n",
-       "\n",
-       "  function getMapLayers(layers, numLayers, hasLegends, map, mapIndex) {\n",
-       "    return layers.map((layer, layerIndex) => {\n",
-       "      return initMapLayer(layer, layerIndex, numLayers, hasLegends, map, mapIndex);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function setInteractiveLayers(map, layers, mapLayers) {\n",
-       "    const { interactiveLayers, interactiveMapLayers } = getInteractiveLayers(layers, mapLayers);\n",
-       "\n",
-       "    if (interactiveLayers && interactiveLayers.length > 0) {\n",
-       "      setInteractivity(map, interactiveLayers, interactiveMapLayers);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
-       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
-       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
-       "    const layersInfo = mapLayers.map((layer, index) => {\n",
-       "      return {\n",
-       "        title: layers[index].title || `Layer ${index}`,\n",
-       "        id: layer.id,\n",
-       "        checked: true\n",
-       "      };\n",
-       "    });\n",
-       "\n",
-       "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
-       "    \n",
-       "    layerSelector.build();\n",
-       "  }\n",
-       "\n",
-       "  function createMap(container, basemapStyle, bounds, accessToken) {\n",
-       "    const map = createMapboxGLMap(container, basemapStyle, accessToken);\n",
-       "\n",
-       "    map.addControl(attributionControl);\n",
-       "    map.fitBounds(bounds, FIT_BOUNDS_SETTINGS);\n",
-       "\n",
-       "    return map;\n",
-       "  }\n",
-       "\n",
-       "  function createMapboxGLMap(container, style, accessToken) {\n",
-       "    if (accessToken) {\n",
-       "      mapboxgl.accessToken = accessToken;\n",
-       "    }\n",
-       "\n",
-       "    return new mapboxgl.Map({\n",
-       "      container,\n",
-       "      style,\n",
-       "      zoom: 9,\n",
-       "      dragRotate: false,\n",
-       "      attributionControl: false\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function init(settings) {\n",
-       "    setReady(settings);\n",
-       "  }\n",
-       "\n",
-       "  return init;\n",
-       "\n",
-       "}());\n",
-       "</script>\n",
-       "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;dm&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;dm&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: true, &quot;has_widgets&quot;: false, &quot;is_static&quot;: false, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;dm&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;dm&quot;, &quot;type&quot;: &quot;color-bins&quot;, &quot;variable&quot;: null}], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
-       "const show_info = 'None' === 'true';\n",
-       "const is_static = 'False' === 'true';\n",
-       "\n",
-       "init({\n",
-       "  show_info,\n",
-       "  is_static,\n",
-       "  maps\n",
-       "});\n",
-       "</script>\n",
-       "</html>\n",
-       "\">\n",
-       "\n",
-       "</iframe>"
-      ],
-      "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x7f64ac7888d0>"
-      ]
-     },
-     "execution_count": 2,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Layout([\n",
-    "    Map(Layer('drought_wk_1', color_bins_style('dm', method='equal', palette='pinkyl'))),\n",
-    "    Map(Layer('drought_wk_4', color_bins_style('dm', method='equal', palette='pinkyl'))),\n",
-    "], map_height=500, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
-   ]
-  }
- ],
- "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/map_layout/save_image_layout.ipynb b/examples/map_layout/save_image_layout.ipynb
deleted file mode 100644
index 74c77ecb7..000000000
--- a/examples/map_layout/save_image_layout.ipynb
+++ /dev/null
@@ -1,1112 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "# Save image from Layout"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Use the `Layout` class to create a variety of map views for comparison.\n",
-    "\n",
-    "For more information, run `help(Layout)`.\n",
-    "\n",
-    "Layouts can be static by using the `is_static=True` flag. To save a layout image, right click and select the option \"Save Image As...\""
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from cartoframes.auth import set_default_credentials\n",
-    "from cartoframes.viz import Map, Layer, Layout, color_bins_style\n",
-    "\n",
-    "set_default_credentials('cartoframes')"
-   ]
-  },
-  {
-   "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: 250px;;\n",
-       "    \"\n",
-       "  srcDoc=\"\n",
-       "  <!DOCTYPE html>\n",
-       "<html lang=&quot;en&quot;>\n",
-       "<head>\n",
-       "  <title>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.4/carto-vl.min.js&quot;></script>\n",
-       "  <!-- Include Mapbox GL JS -->\n",
-       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
-       "  <!-- Include Mapbox GL CSS -->\n",
-       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
-       "\n",
-       "  <!-- Include Airship -->\n",
-       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship.js&quot;></script>\n",
-       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship/airship.esm.js&quot;></script>\n",
-       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3/asbridge.min.js&quot;></script>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "\n",
-       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
-       "\n",
-       "  <!-- External libraries -->\n",
-       "  \n",
-       "  <!-- pako -->\n",
-       "  <script src=&quot;https://libs.cartocdn.com/cartoframes/dependencies/pako_inflate.min.js&quot;></script>\n",
-       "\n",
-       "  <!-- base64-js -->\n",
-       "  <script src='https://libs.cartocdn.com/cartoframes/dependencies/base64.js'></script>\n",
-       "  <!-- html2canvas -->\n",
-       "  <script src=&quot;https://libs.cartocdn.com/cartoframes/dependencies/html2canvas.min.js&quot;></script>\n",
-       "\n",
-       "  \n",
-       "  <style>\n",
-       "  body {\n",
-       "    margin: 0;\n",
-       "    padding: 0;\n",
-       "  }\n",
-       "\n",
-       "  aside.as-sidebar {\n",
-       "    min-width: 300px;\n",
-       "  }\n",
-       "\n",
-       "  .map-image {\n",
-       "    display: none;\n",
-       "    max-width: 100%;\n",
-       "    height: auto;\n",
-       "  }\n",
-       "\n",
-       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
-       "    font-size: 14px;\n",
-       "    line-height: 14px;\n",
-       "  }\n",
-       "</style>\n",
-       "  <style>\n",
-       "  .map {\n",
-       "    position: absolute;\n",
-       "    height: 100%;\n",
-       "    width: 100%;\n",
-       "  }\n",
-       "\n",
-       "  .map-info {\n",
-       "    position: absolute;\n",
-       "    bottom: 0;\n",
-       "    padding: 0 5px;\n",
-       "    background-color: rgba(255, 255, 255, 0.5);\n",
-       "    margin: 0;\n",
-       "    color: rgba(0, 0, 0, 0.75);\n",
-       "    font-size: 12px;\n",
-       "    width: auto;\n",
-       "    height: 18px;\n",
-       "    font-family: 'Open Sans';\n",
-       "  }\n",
-       "\n",
-       "  .map-footer {\n",
-       "    background: #F2F6F9;\n",
-       "    font-family: Roboto;\n",
-       "    font-size: 12px;\n",
-       "    line-height: 24px;\n",
-       "    color: #162945;\n",
-       "    text-align: center;\n",
-       "    z-index: 2;\n",
-       "  }\n",
-       "\n",
-       "  .map-footer a {\n",
-       "    text-decoration: none;\n",
-       "  }\n",
-       "\n",
-       "  .map-footer a:hover {\n",
-       "    text-decoration: underline;\n",
-       "  }\n",
-       "</style>\n",
-       "  <style>\n",
-       ".layout-map-cell p {\n",
-       "  font-family: Roboto;\n",
-       "  font-size: 14px;\n",
-       "}\n",
-       "\n",
-       ".layout-map.as-main {\n",
-       "  width: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-map-cell {\n",
-       "  align-items: center;\n",
-       "  display: flex;\n",
-       "  flex-direction: column;\n",
-       "  height: 250px;\n",
-       "  justify-content: center;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "  padding: 8px;\n",
-       "  position: relative;\n",
-       "}\n",
-       "\n",
-       ".layout-map {\n",
-       "  background-color: silver;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-map > .as-map-area,\n",
-       ".map-image > .as-map-area {\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layer-selector {\n",
-       "  margin-bottom: 12px;\n",
-       "}\n",
-       "\n",
-       ".layout-map-container {\n",
-       "  align-items: center;\n",
-       "  display: flex;\n",
-       "  flex-direction: column;\n",
-       "  justify-content: space-around;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "  padding: 0 8px;\n",
-       "}\n",
-       "\n",
-       ".layout-map-row {\n",
-       "  display: flex;\n",
-       "  flex-direction: row;\n",
-       "  justify-content: space-around;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "\n",
-       ".layout-legends {\n",
-       "  background-color: white;\n",
-       "}\n",
-       "\n",
-       ".layout-map-cell--section {\n",
-       "  position: relative;\n",
-       "  width: 100%;\n",
-       "  height: 100%;\n",
-       "}\n",
-       "</style>\n",
-       "    <style>\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",
-       "      z-index: 1000;\n",
-       "      color: black;\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",
-       "    }\n",
-       "\n",
-       "    #error-container #error-content {\n",
-       "      margin-top: 0.4em;\n",
-       "    }\n",
-       "\n",
-       "    .error-details {\n",
-       "      margin-top: 1em;\n",
-       "    }\n",
-       "\n",
-       "    #error-stacktrace {\n",
-       "      list-style: none;\n",
-       "    }\n",
-       "</style>\n",
-       "  <style>\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",
-       "  <main id=&quot;main-container&quot; class=&quot;layout-map-container&quot;>\n",
-       "  \n",
-       "    <div class=&quot;layout-map-row&quot;>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-0&quot; class=&quot;map-image&quot; alt=&quot;Static Map 0&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-0&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-0&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-1&quot; class=&quot;map-image&quot; alt=&quot;Static Map 1&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-1&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-1&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-2&quot; class=&quot;map-image&quot; alt=&quot;Static Map 2&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-2&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-2&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      \n",
-       "      <div class=&quot;layout-map-cell &quot; style=&quot;height: 100%&quot;>\n",
-       "        \n",
-       "\n",
-       "        <section class=&quot;layout-map-cell--section&quot;>\n",
-       "          <img id=&quot;map-image-3&quot; class=&quot;map-image&quot; alt=&quot;Static Map 3&quot; />\n",
-       "          <as-responsive-content id=&quot;main-container-3&quot; class=&quot;layout-map&quot;>\n",
-       "            <div class=&quot;as-map-area&quot;>\n",
-       "              <div id=&quot;map-3&quot; class=&quot;map&quot;></div>\n",
-       "            </div>\n",
-       "            \n",
-       "\n",
-       "          </as-responsive-content>\n",
-       "        </section>\n",
-       "      </div>\n",
-       "    \n",
-       "    </div>\n",
-       "  \n",
-       "  </main>\n",
-       "\n",
-       "  \n",
-       "\n",
-       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
-       "  <section class=&quot;error-section&quot;>\n",
-       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
-       "    <section id=&quot;error-content&quot;>\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",
-       "  </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",
-       "</body>\n",
-       "<script>\n",
-       "  var init = (function () {\n",
-       "  'use strict';\n",
-       "\n",
-       "  const BASEMAPS = {\n",
-       "    DarkMatter: carto.basemaps.darkmatter,\n",
-       "    Voyager: carto.basemaps.voyager,\n",
-       "    Positron: carto.basemaps.positron\n",
-       "  };\n",
-       "\n",
-       "  const attributionControl = new mapboxgl.AttributionControl({\n",
-       "    compact: false\n",
-       "  });\n",
-       "\n",
-       "  const FIT_BOUNDS_SETTINGS = { animate: false, padding: 50, maxZoom: 16 };\n",
-       "\n",
-       "  /** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\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",
-       "\n",
-       "  const UNKNOWN_FUNCTION = '<unknown>';\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",
-       "  const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\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 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",
-       "  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",
-       "  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",
-       "  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",
-       "  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.type;\n",
-       "    errors$[2].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 format(value) {\n",
-       "    if (Array.isArray(value)) {\n",
-       "      const [first, second] = value;\n",
-       "      if (first === -Infinity) {\n",
-       "        return `< ${formatValue(second)}`;\n",
-       "      }\n",
-       "      if (second === Infinity) {\n",
-       "        return `> ${formatValue(first)}`;\n",
-       "      }\n",
-       "      return `${formatValue(first)} - ${formatValue(second)}`;\n",
-       "    }\n",
-       "    return formatValue(value);\n",
-       "  }\n",
-       "\n",
-       "  function formatValue(value) {\n",
-       "    if (typeof value === 'number') {\n",
-       "      return formatNumber(value);\n",
-       "    }\n",
-       "    return value;\n",
-       "  }\n",
-       "\n",
-       "  function formatNumber(value) {\n",
-       "    if (!Number.isInteger(value)) {\n",
-       "      return value.toLocaleString(undefined, {\n",
-       "        minimumFractionDigits: 2,\n",
-       "        maximumFractionDigits: 3\n",
-       "      });\n",
-       "    }\n",
-       "    return value.toLocaleString();\n",
-       "  }\n",
-       "\n",
-       "  function updateViewport(map) {\n",
-       "    function updateMapInfo() {\n",
-       "      const mapInfo$ = document.getElementById('map-info');\n",
-       "      const center = map.getCenter();\n",
-       "      const lat = center.lat.toFixed(6);\n",
-       "      const lng = center.lng.toFixed(6);\n",
-       "      const zoom = map.getZoom().toFixed(2);\n",
-       "    \n",
-       "      mapInfo$.innerText = `viewport={'zoom': ${zoom}, 'lat': ${lat}, 'lng': ${lng}}`;\n",
-       "    }\n",
-       "\n",
-       "    updateMapInfo();\n",
-       "\n",
-       "    map.on('zoom', updateMapInfo);\n",
-       "    map.on('move', updateMapInfo); \n",
-       "  }\n",
-       "\n",
-       "  function getBasecolorSettings(basecolor) {\n",
-       "    return {\n",
-       "      'version': 8,\n",
-       "      'sources': {},\n",
-       "      'layers': [{\n",
-       "          'id': 'background',\n",
-       "          'type': 'background',\n",
-       "          'paint': {\n",
-       "              'background-color': basecolor\n",
-       "          }\n",
-       "      }]\n",
-       "    };\n",
-       "  }\n",
-       "\n",
-       "  function getImageElement(mapIndex) {\n",
-       "    const id = mapIndex !== undefined ? `map-image-${mapIndex}` : 'map-image';\n",
-       "    return document.getElementById(id);\n",
-       "  }\n",
-       "\n",
-       "  function getContainerElement(mapIndex) {\n",
-       "    const id = mapIndex !== undefined ? `main-container-${mapIndex}` : 'main-container';\n",
-       "    return document.getElementById(id);\n",
-       "  }\n",
-       "\n",
-       "  function saveImage(mapIndex) {\n",
-       "    const img = getImageElement(mapIndex);\n",
-       "    const container = getContainerElement(mapIndex);\n",
-       "\n",
-       "    html2canvas(container)\n",
-       "      .then((canvas) => setMapImage(canvas, img, container));\n",
-       "  }\n",
-       "\n",
-       "  function setMapImage(canvas, img, container) {\n",
-       "    const src = canvas.toDataURL();\n",
-       "    img.setAttribute('src', src);\n",
-       "    img.style.display = 'block';\n",
-       "    container.style.display = 'none';\n",
-       "  }\n",
-       "\n",
-       "  function resetPopupClick(interactivity) {\n",
-       "    interactivity.off('featureClick');\n",
-       "  }\n",
-       "\n",
-       "  function resetPopupHover(interactivity) {\n",
-       "    interactivity.off('featureHover');\n",
-       "  }\n",
-       "\n",
-       "  function setPopupsClick(map, clickPopup, hoverPopup, interactivity, attrs) {\n",
-       "    interactivity.on('featureClick', (event) => {\n",
-       "      updatePopup(map, clickPopup, event, attrs);\n",
-       "      hoverPopup.remove();\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function setPopupsHover(map, hoverPopup, interactivity, attrs) {\n",
-       "    interactivity.on('featureHover', (event) => {\n",
-       "      updatePopup(map, hoverPopup, event, attrs);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function updatePopup(map, popup, event, attrs) {\n",
-       "    if (event.features.length > 0) {\n",
-       "      let popupHTML = '';\n",
-       "      const layerIDs = [];\n",
-       "\n",
-       "      for (const feature of event.features) {\n",
-       "        if (layerIDs.includes(feature.layerId)) {\n",
-       "          continue;\n",
-       "        }\n",
-       "        // Track layers to add only one feature per layer\n",
-       "        layerIDs.push(feature.layerId);\n",
-       "    \n",
-       "        for (const item of attrs) {\n",
-       "          const variable = feature.variables[item.name];\n",
-       "          if (variable) {\n",
-       "            let value = variable.value;\n",
-       "            value = formatValue(value);\n",
-       "\n",
-       "            popupHTML = `\n",
-       "            <span class=&quot;popup-name&quot;>${item.title}</span>\n",
-       "            <span class=&quot;popup-value&quot;>${value}</span>\n",
-       "          ` + popupHTML;\n",
-       "          }\n",
-       "        }\n",
-       "      }\n",
-       "\n",
-       "      popup\n",
-       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
-       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
-       "\n",
-       "      if (!popup.isOpen()) {\n",
-       "        popup.addTo(map);\n",
-       "      }\n",
-       "    } else {\n",
-       "      popup.remove();\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function setInteractivity(map, interactiveLayers, interactiveMapLayers) {\n",
-       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
-       "\n",
-       "    const clickPopup = new mapboxgl.Popup({\n",
-       "      closeButton: true,\n",
-       "      closeOnClick: false\n",
-       "    });\n",
-       "\n",
-       "    const hoverPopup = new mapboxgl.Popup({\n",
-       "      closeButton: false,\n",
-       "      closeOnClick: false\n",
-       "    });\n",
-       "\n",
-       "    const { clickAttrs, hoverAttrs } = _setInteractivityAttrs(interactiveLayers);\n",
-       "\n",
-       "    resetPopupClick(map);\n",
-       "    resetPopupHover(map);\n",
-       "\n",
-       "    if (clickAttrs.length > 0) {\n",
-       "      setPopupsClick(map, clickPopup, hoverPopup, interactivity, clickAttrs);\n",
-       "    }\n",
-       "\n",
-       "    if (hoverAttrs.length > 0) {\n",
-       "      setPopupsHover(map, hoverPopup, interactivity, hoverAttrs);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function _setInteractivityAttrs(interactiveLayers) {\n",
-       "    let clickAttrs = [];\n",
-       "    let hoverAttrs = [];\n",
-       "\n",
-       "    interactiveLayers.forEach((interactiveLayer) => {\n",
-       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
-       "        if (interactivityDef.event === 'click') {\n",
-       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
-       "        } else if (interactivityDef.event === 'hover') {\n",
-       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
-       "        }\n",
-       "      });\n",
-       "    });\n",
-       "\n",
-       "    return { clickAttrs, hoverAttrs };\n",
-       "  }\n",
-       "\n",
-       "  function renderWidget(widget, value) {\n",
-       "    widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
-       "\n",
-       "    if (value && widget.element) {\n",
-       "      widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function renderBridge(bridge, widget, mapLayer) {\n",
-       "    widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
-       "\n",
-       "    switch (widget.type) {\n",
-       "      case 'histogram':\n",
-       "        const type = _getWidgetType(mapLayer, widget.value, widget.prop);\n",
-       "        const histogram = type === 'category' ? 'categoricalHistogram' : 'numericalHistogram';\n",
-       "        bridge[histogram](widget.element, widget.value, widget.options);\n",
-       "\n",
-       "        break;\n",
-       "      case 'category':\n",
-       "        bridge.category(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "      case 'animation':\n",
-       "        widget.options.propertyName = widget.prop;\n",
-       "        bridge.animationControls(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "      case 'time-series':\n",
-       "        widget.options.propertyName = widget.prop;\n",
-       "        bridge.timeSeries(widget.element, widget.value, widget.options);\n",
-       "        break;\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function bridgeLayerWidgets(map, mapLayer, mapSource, widgets) {\n",
-       "    const bridge = new AsBridge.VL.Bridge({\n",
-       "      carto: carto,\n",
-       "      layer: mapLayer,\n",
-       "      source: mapSource,\n",
-       "      map: map\n",
-       "    });\n",
-       "\n",
-       "    widgets\n",
-       "      .filter((widget) => widget.has_bridge)\n",
-       "      .forEach((widget) => renderBridge(bridge, widget, mapLayer));\n",
-       "\n",
-       "    bridge.build();\n",
-       "  }\n",
-       "\n",
-       "  function _getWidgetType(layer, property, value) {\n",
-       "    return layer.metadata && layer.metadata.properties[value] ?\n",
-       "      layer.metadata.properties[value].type\n",
-       "      : _getWidgetPropertyType(layer, property);\n",
-       "  }\n",
-       "\n",
-       "  function _getWidgetPropertyType(layer, property) {\n",
-       "    return layer.metadata && layer.metadata.properties[property] ?\n",
-       "      layer.metadata.properties[property].type\n",
-       "      : null;\n",
-       "  }\n",
-       "\n",
-       "  function createLegends(layer, legends, layerIndex, mapIndex=0) {\n",
-       "    if (legends.length) {\n",
-       "      legends.forEach((legend, legendIndex) => _createLegend(layer, legend, layerIndex, legendIndex, mapIndex));\n",
-       "    } else {\n",
-       "      _createLegend(layer, legends, layerIndex, 0, mapIndex);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function _createLegend(layer, legend, layerIndex, legendIndex, mapIndex=0) {\n",
-       "    const element = document.querySelector(`#layer${layerIndex}_map${mapIndex}_legend${legendIndex}`);\n",
-       "\n",
-       "    if (legend.prop) {\n",
-       "      const othersLabel = 'Others';   // TODO: i18n\n",
-       "      const prop = legend.prop;\n",
-       "      const dynamic = legend.dynamic;\n",
-       "      const order = legend.ascending ? 'ASC' : 'DESC';\n",
-       "      const variable = legend.variable;\n",
-       "      const config = { othersLabel, variable, order };\n",
-       "      const options = { format, config, dynamic };\n",
-       "\n",
-       "      if (legend.type.startsWith('size-continuous')) {\n",
-       "        config.samples = 4;\n",
-       "      }\n",
-       "\n",
-       "      AsBridge.VL.Legends.rampLegend(element, layer, prop, options);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function SourceFactory() {\n",
-       "    const sourceTypes = { GeoJSON, Query, MVT };\n",
-       "\n",
-       "    this.createSource = (layer) => {\n",
-       "      return sourceTypes[layer.type](layer);\n",
-       "    };\n",
-       "  }\n",
-       "\n",
-       "  function GeoJSON(layer) {\n",
-       "    const options = JSON.parse(JSON.stringify(layer.options));\n",
-       "    const data = _decodeJSONData(layer.data, layer.encode_data);\n",
-       "\n",
-       "    return new carto.source.GeoJSON(data, options);\n",
-       "  }\n",
-       "\n",
-       "  function Query(layer) {\n",
-       "    const auth = {\n",
-       "      username: layer.credentials.username,\n",
-       "      apiKey: layer.credentials.api_key || 'default_public'\n",
-       "    };\n",
-       "\n",
-       "    const config = {\n",
-       "      serverURL: layer.credentials.base_url || `https://${layer.credentials.username}.carto.com/`\n",
-       "    };\n",
-       "\n",
-       "    return new carto.source.SQL(layer.data, auth, config);\n",
-       "  }\n",
-       "\n",
-       "  function MVT(layer) {\n",
-       "    return new carto.source.MVT(layer.data.file, JSON.parse(layer.data.metadata));\n",
-       "  }\n",
-       "\n",
-       "  function _decodeJSONData(data, encodeData) {\n",
-       "    try {\n",
-       "      if (encodeData) {\n",
-       "        const decodedJSON = pako.inflate(atob(data), { to: 'string' });\n",
-       "        return JSON.parse(decodedJSON);\n",
-       "      } else {\n",
-       "        return JSON.parse(data);\n",
-       "      }\n",
-       "    } catch(error) {\n",
-       "      throw new Error(`\n",
-       "      Error: &quot;${error}&quot;. CARTOframes is not able to parse your local data because it is too large.\n",
-       "      Please, disable the data compresion with encode_data=False in your Layer class.\n",
-       "    `);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  const factory = new SourceFactory();\n",
-       "\n",
-       "  function initMapLayer(layer, layerIndex, numLayers, hasLegends, map, mapIndex) {\n",
-       "    const mapSource = factory.createSource(layer);\n",
-       "    const mapViz = new carto.Viz(layer.viz);\n",
-       "    const mapLayer = new carto.Layer(`layer${layerIndex}`, mapSource, mapViz);\n",
-       "    const mapLayerIndex = numLayers - layerIndex - 1;\n",
-       "\n",
-       "    try {\n",
-       "      mapLayer._updateLayer.catch(displayError);\n",
-       "    } catch (e) {\n",
-       "      throw e;\n",
-       "    }\n",
-       "\n",
-       "    mapLayer.addTo(map);\n",
-       "\n",
-       "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
-       "    setLayerWidgets(map, layer, mapLayer, mapLayerIndex, mapSource);\n",
-       "\n",
-       "    return mapLayer;\n",
-       "  }\n",
-       "\n",
-       "  function getInteractiveLayers(layers, mapLayers) {\n",
-       "    const interactiveLayers = [];\n",
-       "    const interactiveMapLayers = [];\n",
-       "\n",
-       "    layers.forEach((layer, index) => {\n",
-       "      if (layer.interactivity) {\n",
-       "        interactiveLayers.push(layer);\n",
-       "        interactiveMapLayers.push(mapLayers[index]);\n",
-       "      }\n",
-       "    });\n",
-       "\n",
-       "    return { interactiveLayers, interactiveMapLayers };\n",
-       "  }\n",
-       "\n",
-       "  function setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends) {\n",
-       "    if (hasLegends && layer.legends) {\n",
-       "      createLegends(mapLayer, layer.legends, mapLayerIndex, mapIndex);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function setLayerWidgets(map, layer, mapLayer, mapLayerIndex, mapSource) {\n",
-       "    if (layer.widgets.length) {\n",
-       "      initLayerWidgets(layer.widgets, mapLayerIndex);\n",
-       "      updateLayerWidgets(layer.widgets, mapLayer);\n",
-       "      bridgeLayerWidgets(map, mapLayer, mapSource, layer.widgets);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function initLayerWidgets(widgets, mapLayerIndex) {\n",
-       "    widgets.forEach((widget, widgetIndex) => {\n",
-       "      const id = `layer${mapLayerIndex}_widget${widgetIndex}`;\n",
-       "      widget.id = id;\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function updateLayerWidgets(widgets, mapLayer) {\n",
-       "    mapLayer.on('updated', () => renderLayerWidgets(widgets, mapLayer));\n",
-       "  }\n",
-       "\n",
-       "  function renderLayerWidgets(widgets, mapLayer) {\n",
-       "    const variables = mapLayer.viz.variables;\n",
-       "\n",
-       "    widgets\n",
-       "      .filter((widget) => !widget.has_bridge)\n",
-       "      .forEach((widget) => {\n",
-       "        const name = widget.variable_name;\n",
-       "        const value = getWidgetValue(name, variables);\n",
-       "        renderWidget(widget, value);\n",
-       "      });\n",
-       "  }\n",
-       "\n",
-       "  function getWidgetValue(name, variables) {\n",
-       "    return name && variables[name] ? variables[name].value : null;\n",
-       "  }\n",
-       "\n",
-       "  function setReady(settings) {\n",
-       "    try {\n",
-       "      return settings.maps ? initMaps(settings.maps) : initMap(settings);\n",
-       "    } catch (e) {\n",
-       "      displayError(e);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function initMaps(maps) {\n",
-       "    return maps.map((mapSettings, mapIndex) => {\n",
-       "      return initMap(mapSettings, mapIndex);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function initMap(settings, mapIndex) {\n",
-       "    const basecolor = getBasecolorSettings(settings.basecolor);\n",
-       "    const basemapStyle =  BASEMAPS[settings.basemap] || settings.basemap || basecolor;\n",
-       "    const container = mapIndex !== undefined ? `map-${mapIndex}` : 'map';\n",
-       "    const map = createMap(container, basemapStyle, settings.bounds, settings.mapboxtoken);\n",
-       "\n",
-       "    if (settings.show_info) {\n",
-       "      updateViewport(map);\n",
-       "    }\n",
-       "\n",
-       "    if (settings.camera) {\n",
-       "      map.flyTo(settings.camera);\n",
-       "    }\n",
-       "\n",
-       "    return initLayers(map, settings, mapIndex);\n",
-       "  }\n",
-       "\n",
-       "  function initLayers(map, settings, mapIndex) {\n",
-       "    const numLayers = settings.layers.length;\n",
-       "    const hasLegends = settings.has_legends;\n",
-       "    const isStatic = settings.is_static;\n",
-       "    const layers = settings.layers;\n",
-       "    const mapLayers = getMapLayers(\n",
-       "      layers,\n",
-       "      numLayers,\n",
-       "      hasLegends,\n",
-       "      map,\n",
-       "      mapIndex\n",
-       "    );\n",
-       "\n",
-       "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
-       "    }\n",
-       "\n",
-       "    setInteractiveLayers(map, layers, mapLayers);\n",
-       "\n",
-       "    return waitForMapLayersLoad(isStatic, mapIndex, mapLayers);\n",
-       "  }\n",
-       "\n",
-       "  function waitForMapLayersLoad(isStatic, mapIndex, mapLayers) {\n",
-       "    return new Promise((resolve) => {\n",
-       "      carto.on('loaded', mapLayers, onMapLayersLoaded.bind(\n",
-       "        this, isStatic, mapIndex, mapLayers, resolve)\n",
-       "      );\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function onMapLayersLoaded(isStatic, mapIndex, mapLayers, resolve) {\n",
-       "    if (isStatic) {\n",
-       "      saveImage(mapIndex);\n",
-       "    }\n",
-       "\n",
-       "    resolve(mapLayers);\n",
-       "  }\n",
-       "\n",
-       "  function getMapLayers(layers, numLayers, hasLegends, map, mapIndex) {\n",
-       "    return layers.map((layer, layerIndex) => {\n",
-       "      return initMapLayer(layer, layerIndex, numLayers, hasLegends, map, mapIndex);\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function setInteractiveLayers(map, layers, mapLayers) {\n",
-       "    const { interactiveLayers, interactiveMapLayers } = getInteractiveLayers(layers, mapLayers);\n",
-       "\n",
-       "    if (interactiveLayers && interactiveLayers.length > 0) {\n",
-       "      setInteractivity(map, interactiveLayers, interactiveMapLayers);\n",
-       "    }\n",
-       "  }\n",
-       "\n",
-       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
-       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
-       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
-       "    const layersInfo = mapLayers.map((layer, index) => {\n",
-       "      return {\n",
-       "        title: layers[index].title || `Layer ${index}`,\n",
-       "        id: layer.id,\n",
-       "        checked: true\n",
-       "      };\n",
-       "    });\n",
-       "\n",
-       "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
-       "    \n",
-       "    layerSelector.build();\n",
-       "  }\n",
-       "\n",
-       "  function createMap(container, basemapStyle, bounds, accessToken) {\n",
-       "    const map = createMapboxGLMap(container, basemapStyle, accessToken);\n",
-       "\n",
-       "    map.addControl(attributionControl);\n",
-       "    map.fitBounds(bounds, FIT_BOUNDS_SETTINGS);\n",
-       "\n",
-       "    return map;\n",
-       "  }\n",
-       "\n",
-       "  function createMapboxGLMap(container, style, accessToken) {\n",
-       "    if (accessToken) {\n",
-       "      mapboxgl.accessToken = accessToken;\n",
-       "    }\n",
-       "\n",
-       "    return new mapboxgl.Map({\n",
-       "      container,\n",
-       "      style,\n",
-       "      zoom: 9,\n",
-       "      dragRotate: false,\n",
-       "      attributionControl: false\n",
-       "    });\n",
-       "  }\n",
-       "\n",
-       "  function init(settings) {\n",
-       "    setReady(settings);\n",
-       "  }\n",
-       "\n",
-       "  return init;\n",
-       "\n",
-       "}());\n",
-       "</script>\n",
-       "<script>\n",
-       "  const maps = [{&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.8967067208589], [-66.0790904488208, 62.3313267663464]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 1&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_1\\&quot;&quot;, &quot;title&quot;: &quot;Week 1&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 2&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_2\\&quot;&quot;, &quot;title&quot;: &quot;Week 2&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-159.638115774474, 17.896706720572], [-65.7696125858799, 63.2503441122921]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 3&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_3\\&quot;&quot;, &quot;title&quot;: &quot;Week 3&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}, {&quot;_airship_path&quot;: null, &quot;_carto_vl_path&quot;: null, &quot;basecolor&quot;: &quot;&quot;, &quot;basemap&quot;: &quot;Positron&quot;, &quot;bounds&quot;: [[-160.243396858452, 17.896706720572], [-65.7553404269944, 63.2955159392699]], &quot;camera&quot;: {&quot;bearing&quot;: null, &quot;center&quot;: [-98.3457, 33.4706], &quot;pitch&quot;: null, &quot;zoom&quot;: 3}, &quot;description&quot;: null, &quot;has_legends&quot;: false, &quot;has_widgets&quot;: false, &quot;is_static&quot;: true, &quot;layer_selector&quot;: false, &quot;layers&quot;: [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v8f489e&quot;, &quot;title&quot;: &quot;Week 4&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;drought_wk_4\\&quot;&quot;, &quot;title&quot;: &quot;Week 4&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v8f489e: prop(\\u0027dm\\u0027)\\ncolor: opacity(ramp(globalEqIntervals(prop(\\u0027dm\\u0027), 5), pinkyl), 0.9)\\nstrokeWidth: ramp(linear(zoom(),2,18),[0.5,1])\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\nfilter: 1\\n&quot;, &quot;widgets&quot;: []}], &quot;show_info&quot;: null, &quot;size&quot;: null, &quot;theme&quot;: null, &quot;title&quot;: null, &quot;token&quot;: &quot;&quot;, &quot;viewport&quot;: {&quot;lat&quot;: 33.4706, &quot;lng&quot;: -98.3457, &quot;zoom&quot;: 3}}];\n",
-       "const show_info = 'None' === 'true';\n",
-       "const is_static = 'true' === 'true';\n",
-       "\n",
-       "init({\n",
-       "  show_info,\n",
-       "  is_static,\n",
-       "  maps\n",
-       "});\n",
-       "</script>\n",
-       "</html>\n",
-       "\">\n",
-       "\n",
-       "</iframe>"
-      ],
-      "text/plain": [
-       "<cartoframes.viz.layout.Layout at 0x7f5c6461f048>"
-      ]
-     },
-     "execution_count": 2,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "style = color_bins_style('dm', method='equal', palette='pinkyl')\n",
-    "\n",
-    "Layout([\n",
-    "    Map(Layer('drought_wk_1', style, title='Week 1', default_legend=False)),\n",
-    "    Map(Layer('drought_wk_2', style, title='Week 2', default_legend=False)),\n",
-    "    Map(Layer('drought_wk_3', style, title='Week 3', default_legend=False)),\n",
-    "    Map(Layer('drought_wk_4', style, title='Week 4', default_legend=False))\n",
-    "], is_static=True, viewport={'zoom': 3, 'lat': 33.4706, 'lng': -98.3457})"
-   ]
-  }
- ],
- "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
-}