Feature - Map Grid to support multiple maps

.jshintrc

@@ -1,3 +1,3 @@
 {
-  "esversion": 6
+  "esversion": 8
 }

cartoframes/assets/init.js.j2

@@ -4,11 +4,12 @@ document
     const show_info = '{{show_info}}' === 'True';
     const layers = {{ layers|tojson }};
     const bounds = {{ bounds }};
-    const camera = null;
+    const camera = {{ camera|tojson }};
     const mapboxtoken = '{{mapboxtoken}}';
     const basemap = '{{basemap}}';
     const basecolor = '{{basecolor}}';
     const has_legends = '{{has_legends}}' === 'True';
+    const is_static = '{{is_static}}' === 'True';
     const default_legend = '{{default_legend}}' === 'True';
 
     init({
@@ -20,6 +21,7 @@ document
       basemap,
       basecolor,
       has_legends,
+      is_static,
       default_legend
     });
 });

cartoframes/assets/init_grid.js.j2

@@ -0,0 +1,9 @@
+const maps = {{ maps|tojson }};
+const show_info = '{{show_info}}' === 'True';
+const is_static = '{{is_static}}' === 'True';
+
+init({
+  show_info,
+  is_static,
+  maps
+});

cartoframes/assets/src/bundle.js

@@ -39,6 +39,38 @@ var init = (function () {
     return value.toLocaleString();
   }
 
+  function updateViewport(map) {
+    function updateMapInfo() {
+      const mapInfo$ = document.getElementById('map-info');
+
+      const center = map.getCenter();
+      const lat = center.lat.toFixed(6);
+      const lng = center.lng.toFixed(6);
+      const zoom = map.getZoom().toFixed(2);
+
+      mapInfo$.innerText = `viewport={'zoom': ${zoom}, 'lat': ${lat}, 'lng': ${lng}}`;
+    }
+
+    updateMapInfo();
+
+    map.on('zoom', updateMapInfo);
+    map.on('move', updateMapInfo); 
+  }
+
+  function getBasecolorSettings(basecolor) {
+    return {
+      'version': 8,
+      'sources': {},
+      'layers': [{
+          'id': 'background',
+          'type': 'background',
+          'paint': {
+              'background-color': basecolor
+          }
+      }]
+    };
+  }
+
   function createDefaultLegend(layers) {
     const defaultLegendContainer = document.querySelector('#defaultLegendContainer');
     defaultLegendContainer.style.display = 'none';
@@ -52,8 +84,8 @@ var init = (function () {
     );
   }
 
-  function createLegend(layer, legendData, layerIndex) {
-    const element = document.querySelector(`#layer${layerIndex}_legend`);
+  function createLegend(layer, legendData, layerIndex, mapIndex=0) {
+    const element = document.querySelector(`#layer${layerIndex}_map${mapIndex}_legend`);
 
     if (legendData.prop) {
       const config = { othersLabel: 'Others' };  // TODO: i18n
@@ -368,59 +400,67 @@ var init = (function () {
     return { clickAttrs, hoverAttrs };
   }
 
-  function setReady (settings) {
+  const BASEMAPS = {
+    DarkMatter: carto.basemaps.darkmatter,
+    Voyager: carto.basemaps.voyager,
+    Positron: carto.basemaps.positron
+  };
+
+  const attributionControl = new mapboxgl.AttributionControl({
+    compact: false
+  });
+
+  const FIT_BOUNDS_SETTINGS = { animate: false, padding: 50, maxZoom: 14 };
+
+  async function setReady(settings) {
     try {
-      onReady(settings);
+      const maps = settings.maps ?
+        await initMaps(settings.maps)
+        : await initMap(settings);
     } catch (e) {
       displayError(e);
     }
   }
 
-  function onReady(settings) {
-    const BASEMAPS = {
-      DarkMatter: carto.basemaps.darkmatter,
-      Voyager: carto.basemaps.voyager,
-      Positron: carto.basemaps.positron
-    };
-
-    const BASECOLOR = {
-      'version': 8,
-      'sources': {},
-      'layers': [{
-          'id': 'background',
-          'type': 'background',
-          'paint': {
-              'background-color': settings.basecolor
-          }
-      }]
-    };
-
-    if (settings.mapboxtoken) {
-      mapboxgl.accessToken = settings.mapboxtoken;
-    }
-
-    const basemapStyle =  BASEMAPS[settings.basemap] || settings.basemap || BASECOLOR;
+  async function saveImage(mapIndex) {
+    const img = mapIndex !== undefined ? `map-image-${mapIndex}` : 'map-image';
+    const container = mapIndex !== undefined ? `main-container-${mapIndex}` : 'main-container';
+    const $img = document.getElementById(img);
+    const $container = document.getElementById(container);
+
+    html2canvas($container)
+      .then((canvas) => {
+        const src = canvas.toDataURL();
+        $img.setAttribute('src', src);
+        $img.style.display = 'block';
+        $container.style.display = 'none';
+      });
+  }
 
-    const map = new mapboxgl.Map({
-      container: 'map',
-      style: basemapStyle,
-      zoom: 9,
-      dragRotate: false
+  async function initMaps(maps) {
+    return await maps.map(async function (mapSettings, mapIndex) {
+      return await initMap(mapSettings, mapIndex);
     });
+  }
 
-    map.fitBounds(settings.bounds, { animate: false, padding: 50, maxZoom: 14 });
+  async function initMap(settings, mapIndex) {
+    const basecolor = getBasecolorSettings(settings.basecolor);
+    const basemapStyle =  BASEMAPS[settings.basemap] || settings.basemap || basecolor;
+    const container = mapIndex !== undefined ? `map-${mapIndex}` : 'map';
+    const map = createMap(container, basemapStyle, settings.bounds, settings.mapboxtoken);
 
     if (settings.show_info) {
-      const updateMapInfo = _updateMapInfo.bind(this, map);
-
-      map.on('zoom', updateMapInfo);
-      map.on('move', updateMapInfo);
+      updateViewport(map);
     }
 
     if (settings.camera) {
       map.flyTo(settings.camera);
     }
 
+    return await initLayers(map, settings, mapIndex);
+  }
+
+  async function initLayers(map, settings, mapIndex) {
     const mapLayers = [];
     const interactiveLayers = [];
     const interactiveMapLayers = [];
@@ -435,8 +475,8 @@ var init = (function () {
 
       try {
         mapLayer._updateLayer.catch(displayError);
-      } catch (err) {
-        throw err;
+      } catch (e) {
+        throw e;
       }
 
       mapLayer.addTo(map);
@@ -447,7 +487,7 @@ var init = (function () {
       }
 
       if (settings.has_legends && layer.legend) {
-        createLegend(mapLayer, layer.legend, settings.layers.length - index - 1);
+        createLegend(mapLayer, layer.legend, settings.layers.length - index - 1, mapIndex);
       }
 
       if (layer.widgets.length) {
@@ -479,17 +519,35 @@ var init = (function () {
     if (settings.default_legend) {
       createDefaultLegend(mapLayers);
     }
+
+    return new Promise((resolve) => {
+      carto.on('loaded', mapLayers, () => {
+        if (settings.is_static) {
+          saveImage(mapIndex);
+        }
+
+        resolve(mapLayers);
+      });
+    });
   }
 
-  function _updateMapInfo(map) {
-    const mapInfo$ = document.getElementById('map-info');
+  function createMap(container, basemapStyle, bounds, accessToken) {
+    if (accessToken) {
+      mapboxgl.accessToken = accessToken;
+    }
+
+    const map = new mapboxgl.Map({
+      container,
+      style: basemapStyle,
+      zoom: 9,
+      dragRotate: false,
+      attributionControl: false
+    });
 
-    const center = map.getCenter();
-    const lat = center.lat.toFixed(6);
-    const lng = center.lng.toFixed(6);
-    const zoom = map.getZoom().toFixed(2);
+    map.addControl(attributionControl);
+    map.fitBounds(bounds, FIT_BOUNDS_SETTINGS);
 
-    mapInfo$.innerText = `viewport={'zoom': ${zoom}, 'lat': ${lat}, 'lng': ${lng}}`;
+    return map;
   }
 
   function init(settings) {

cartoframes/assets/src/legends.js

@@ -13,8 +13,8 @@ export function createDefaultLegend(layers) {
   );
 }
 
-export function createLegend(layer, legendData, layerIndex) {
-  const element = document.querySelector(`#layer${layerIndex}_legend`);
+export function createLegend(layer, legendData, layerIndex, mapIndex=0) {
+  const element = document.querySelector(`#layer${layerIndex}_map${mapIndex}_legend`);
 
   if (legendData.prop) {
     const config = { othersLabel: 'Others' };  // TODO: i18n