Merge pull request #1551 from CartoDB/feature/58615/add-layer-selector

Feature: Add layer selector [ch58615]

cartoframes/assets/init.js.j2

@@ -7,6 +7,7 @@ document
     const camera = {{ camera|tojson }};
     const has_legends = '{{has_legends}}' === 'True';
     const is_static = '{{is_static}}' === 'True';
+    const layer_selector = '{{layer_selector}}' === 'True'; // TODO it will be a helper
     const layers = {{ layers|tojson }};
     const mapboxtoken = '{{mapboxtoken}}';
     const show_info = '{{show_info}}' === 'True';
@@ -18,6 +19,7 @@ document
       camera,
       has_legends,
       is_static,
+      layer_selector,
       layers,
       mapboxtoken,
       show_info

cartoframes/assets/init_layout.js.j2

@@ -4,6 +4,7 @@ const is_static = '{{is_static}}' === 'True';
 
 maps.forEach((map) => {
   map.has_legends = false;
+  map.layer_selector = false;
 });
 
 init({

cartoframes/assets/src/bundle.js

@@ -589,6 +589,10 @@ var init = (function () {
       mapIndex
     );
 
+    if (settings.layer_selector) {
+      addLayersSelector(layers.reverse(), mapLayers.reverse());
+    }
+
     setInteractiveLayers(map, layers, mapLayers);
 
     return waitForMapLayersLoad(isStatic, mapIndex, mapLayers);
@@ -624,6 +628,21 @@ var init = (function () {
     }
   }
 
+  function addLayersSelector(layers, mapLayers) {
+    const layerSelector$ = document.querySelector(`#layer-selector`);
+      const layersInfo = mapLayers.map((layer, index) => {
+        return {
+          title: layers[index].title || `Layer ${index}`,
+          id: layer.id,
+          checked: true
+        };
+      });
+
+    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);
+
+    layerSelector.build();
+  }
+
   function createMap(container, basemapStyle, bounds, accessToken) {
     const map = createMapboxGLMap(container, basemapStyle, accessToken);
 

cartoframes/assets/src/map.js

@@ -48,6 +48,10 @@ export function initLayers(map, settings, mapIndex) {
     mapIndex
   );
 
+  if (settings.layer_selector) {
+    addLayersSelector(layers.reverse(), mapLayers.reverse());
+  }
+
   setInteractiveLayers(map, layers, mapLayers);
 
   return waitForMapLayersLoad(isStatic, mapIndex, mapLayers);
@@ -83,6 +87,21 @@ export function setInteractiveLayers(map, layers, mapLayers) {
   }
 }
 
+export function addLayersSelector(layers, mapLayers) {
+  const layerSelector$ = document.querySelector(`#layer-selector`);
+    const layersInfo = mapLayers.map((layer, index) => {
+      return {
+        title: layers[index].title || `Layer ${index}`,
+        id: layer.id,
+        checked: true
+      };
+    });
+
+  const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);
+
+  layerSelector.build();
+}
+
 export function createMap(container, basemapStyle, bounds, accessToken) {
   const map = createMapboxGLMap(container, basemapStyle, accessToken);
 

cartoframes/assets/templates/viz/legends.html.j2

@@ -3,30 +3,35 @@
 {%- endmacro %}
 
 <div class="as-panel__element" id="legends">
-  {% for layer in layers|reverse %}
-    {% if layer.legends %}
-    {% set layer_index = loop.index0 %}
-      {% if layer.has_legend_list %}
-        {% for legend in layer.legends %}
-          <as-legend
-            heading="{{legend.title}}"
-            description="{{legend.description}}">
-            {{ createLegend(legend, 'layer%d_map%d_legend%d' | format(layer_index, 0, loop.index0)) }}
-            {% if legend.footer %}
-              <span slot="footer">{{legend.footer | safe }}</span>
-            {% endif %}
-          </as-legend>
-        {% endfor %}
-      {% else %}
-        <as-legend
-          heading="{{layer.legends.title}}"
-          description="{{layer.legends.description}}">
-          {{ createLegend(layer.legends, 'layer%d_map%d_legend%d' | format(layer_index, 0, 0)) }}
-          {% if layer.legends.footer %}
-            <span slot="footer">{{layer.legends.footer | safe }}</span>
+  <as-layer-selector id="layer-selector">
+    {% for layer in layers|reverse %}
+      {% if layer.legends %}
+        {% set layer_index = loop.index0 %}
+        {% set slot = 'as-checkbox-layer-%d-slot' | format(layer_index) %}
+        <div slot="{{slot}}">
+          {% if layer.has_legend_list %}
+            {% for legend in layer.legends %}
+              <as-legend
+                heading="{{legend.title}}"
+                description="{{legend.description}}">
+                {{ createLegend(legend, 'layer%d_map%d_legend%d' | format(layer_index, 0, loop.index0)) }}
+                {% if legend.footer %}
+                  <span slot="footer">{{legend.footer | safe }}</span>
+                {% endif %}
+              </as-legend>
+            {% endfor %}
+          {% else %}
+            <as-legend
+              heading="{{layer.legends.title}}"
+              description="{{layer.legends.description}}">
+              {{ createLegend(layer.legends, 'layer%d_map%d_legend%d' | format(layer_index, 0, 0)) }}
+              {% if layer.legends.footer %}
+                <span slot="footer">{{layer.legends.footer | safe }}</span>
+              {% endif %}
+            </as-legend>
           {% endif %}
-        </as-legend>
+        </div>
       {% endif %}
-    {% endif %}
-  {% endfor %}
+    {% endfor %}
+  </as-layer-selector>
 </div>

cartoframes/assets/templates/viz/main.html.j2

@@ -53,9 +53,9 @@
         {% if show_info %}
           {% include 'templates/viz/info.html.j2' %}
         {% endif %}
-        {% if has_legends %}
+        {% if has_legends or layer_selector%}
           <div class="as-map-panels" data-name="Legends">
-            <div class="as-panel as-panel--left as-panel--top">
+            <div class="as-panel as-panel--vertical as-panel--left as-panel--top">
               {% include 'templates/viz/legends.html.j2' %}
             </div> <!-- as-panel -->
           </div> <!-- as-map-panels -->

cartoframes/viz/html/html_map.py

@@ -28,18 +28,18 @@ def set_content(
             self, size, layers, bounds, camera=None, basemap=None, show_info=None,
             theme=None, _carto_vl_path=None,
             _airship_path=None, title='CARTOframes', description=None,
-            is_embed=False, is_static=False):
+            is_embed=False, is_static=False, layer_selector=False):
 
         self.html = self._parse_html_content(
             size, layers, bounds, camera, basemap,
             show_info, theme, _carto_vl_path, _airship_path, title, description,
-            is_embed, is_static)
+            is_embed, is_static, layer_selector)
 
     def _parse_html_content(
             self, size, layers, bounds, camera=None,
             basemap=None, show_info=None,
             theme=None, _carto_vl_path=None, _airship_path=None,
-            title=None, description=None, is_embed=False, is_static=False):
+            title=None, description=None, is_embed=False, is_static=False, layer_selector=False):
 
         token = ''
         basecolor = ''
@@ -107,7 +107,8 @@ def _parse_html_content(
             title=title,
             description=description,
             is_embed=is_embed,
-            is_static=is_static
+            is_static=is_static,
+            layer_selector=layer_selector
         )
 
     def _repr_html_(self):

cartoframes/viz/layer.py

@@ -114,7 +114,7 @@ def __init__(self,
             popup_hover, popup_click, default_popup_hover, default_popup_click, title)
         self.legends = self._init_legends(legends, default_legend, title)
         self.widgets = self._init_widgets(widgets, default_widget, title)
-
+        self.title = title
         geom_type = self.source.get_geom_type()
         popups_variables = self.popups.get_variables()
         widget_variables = self.widgets.get_variables()

cartoframes/viz/map.py

@@ -106,6 +106,7 @@ def __init__(self,
                  title=None,
                  description=None,
                  is_static=None,
+                 layer_selector=False,
                  **kwargs):
 
         self.layers = _init_layers(layers)
@@ -119,6 +120,7 @@ def __init__(self,
         self.bounds = _get_bounds(bounds, self.layers)
         self.theme = _get_theme(theme, basemap)
         self.is_static = is_static
+        self.layer_selector = layer_selector
         self.token = get_token(basemap)
         self.basecolor = get_basecolor(basemap)
 
@@ -152,6 +154,7 @@ def _repr_html_(self):
             title=self.title,
             description=self.description,
             is_static=self.is_static,
+            layer_selector=self.layer_selector,
             _carto_vl_path=self._carto_vl_path,
             _airship_path=self._airship_path)
 
@@ -177,6 +180,7 @@ def get_content(self):
             'title': self.title,
             'description': self.description,
             'is_static': self.is_static,
+            'layer_selector': self.layer_selector,
             '_carto_vl_path': self._carto_vl_path,
             '_airship_path': self._airship_path
         }
@@ -304,6 +308,7 @@ def _get_layer_def(layer):
         'widgets': layer.widgets_info,
         'data': layer.source_data,
         'type': layer.source_type,
+        'title': layer.title,
         'options': layer.options,
         'viz': layer.viz
     }