feat: Story Map Data Layers

src/gis/components/Layer.js

@@ -27,7 +27,7 @@ const Layer = props => {
       return;
     }
 
-    if (map.getLayer(id)) {
+    if (map.getStyle() && map.getLayer(id)) {
       removeLayer(id);
     }
 
@@ -42,14 +42,18 @@ const Layer = props => {
       ...layer,
     });
 
-    for (const index in events) {
-      const eventGenerator =
-        typeof events[index] === 'function'
-          ? events[index]
-          : () => events[index];
-      const eventParams = eventGenerator(map);
-      map.on(...eventParams);
-    }
+    const eventsParams =
+      events?.map((event, index) => {
+        const eventGenerator =
+          typeof event === 'function' ? event : () => event;
+        return eventGenerator(map);
+      }) || [];
+    eventsParams.forEach(eventParams => map.on(...eventParams));
+
+    return () => {
+      eventsParams.forEach(eventParams => map.off(...eventParams));
+      removeLayer(id);
+    };
   }, [
     id,
     map,

src/gis/components/Map.js

@@ -226,6 +226,21 @@ export const MapProvider = props => {
     [map]
   );
 
+  const removeSource = useCallback(
+    sourceName => {
+      if (!map) {
+        return;
+      }
+      try {
+        map.removeSource(sourceName);
+        setSources(_.omit(sourceName));
+      } catch (error) {
+        logger.error(`Error removing source {$sourceName}`, error);
+      }
+    },
+    [map]
+  );
+
   const addLayer = useCallback(
     (layer, before) => {
       if (!map) {
@@ -243,14 +258,15 @@ export const MapProvider = props => {
 
   const removeLayer = useCallback(
     layerId => {
-      if (!map) {
+      if (!map?.getStyle()) {
         return;
       }
+
       try {
-        map.removeLayer(layerId);
+        map?.removeLayer(layerId);
         setLayers(_.omit(layerId));
       } catch (error) {
-        logger.warn('Error removing layer', error);
+        logger.error(`Error removing layer ${layerId}`, error);
       }
     },
     [map]
@@ -273,6 +289,7 @@ export const MapProvider = props => {
         addImage,
         removeImage,
         addSource,
+        removeSource,
         addLayer,
         removeLayer,
       }}
@@ -282,7 +299,7 @@ export const MapProvider = props => {
   );
 };
 
-const Map = props => {
+const Map = React.forwardRef((props, ref) => {
   const {
     id,
     mapStyle,
@@ -325,6 +342,10 @@ const Map = props => {
       ...(initialLocation ? initialLocation : {}),
     });
 
+    if (ref) {
+      ref.current = map;
+    }
+
     if (padding) {
       map.setPadding(padding);
     }
@@ -381,6 +402,7 @@ const Map = props => {
     bounds,
     disableElevation,
     padding,
+    ref,
   ]);
 
   useEffect(() => {
@@ -420,6 +442,6 @@ const Map = props => {
       {children}
     </Box>
   );
-};
+});
 
 export default withWrapper(Map, MapProvider);

src/landscape/components/LandscapeForm/BoundaryStepNewBoundariesFile.test.js

@@ -113,6 +113,7 @@ test('LandscapeNew: Save from GeoJSON', async () => {
     addControl: jest.fn(),
     removeControl: jest.fn(),
     fitBounds: jest.fn(),
+    getStyle: jest.fn(),
     off: jest.fn(),
     getBounds: jest.fn().mockReturnValue({
       getSouthWest: jest.fn().mockReturnValue({

src/landscape/components/LandscapeForm/BoundaryStepNewDrawPolygon.test.js

@@ -103,6 +103,7 @@ test('LandscapeNew: Save form draw polygon boundary', async () => {
     addControl: jest.fn(),
     removeControl: jest.fn(),
     fitBounds: jest.fn(),
+    getStyle: jest.fn(),
     off: jest.fn(),
     getBounds: jest.fn().mockReturnValue({
       getSouthWest: jest.fn().mockReturnValue({

src/landscape/components/LandscapeForm/BoundaryStepUpdate.test.js

@@ -139,6 +139,7 @@ beforeEach(() => {
     addControl: jest.fn(),
     removeControl: jest.fn(),
     fitBounds: jest.fn(),
+    getStyle: jest.fn(),
     off: jest.fn(),
   };
   mapboxgl.NavigationControl = jest.fn();

src/landscape/components/LandscapeSharedDataVisualization.test.js

@@ -102,6 +102,7 @@ test('LandscapeSharedDataVisualization: Display visualization', async () => {
     addImage: jest.fn(),
     setTerrain: jest.fn(),
     fitBounds: jest.fn(),
+    getStyle: jest.fn(),
     hasImage: jest.fn(),
     setPadding: jest.fn(),
     dragRotate: { disable: jest.fn() },

src/landscape/components/LandscapeView.test.js

@@ -80,6 +80,7 @@ beforeEach(() => {
     addControl: jest.fn(),
     removeControl: jest.fn(),
     fitBounds: jest.fn(),
+    getStyle: jest.fn(),
     off: jest.fn(),
   };
 });

src/localization/locales/en-US.json

@@ -912,7 +912,7 @@
         "form_delete_chapter_confirm_title": "Delete “{{name}}”?",
         "form_delete_chapter_confirm_message": "Are you sure you want to delete the chapter {{name}}?",
         "form_delete_chapter_confirm_button_tooltip": "Delete chapter “{{name}}”",
-        "form_chapter_location_button": "Set Map Location",
+        "form_chapter_location_button": "Edit Map",
         "form_chapter_alignment_buttons": "Set alignment",
         "form_chapter_alignment_left": "Align Left",
         "form_chapter_alignment_center": "Align Center",
@@ -924,7 +924,7 @@
         "form_location_dialog_title": "Set map location for <1>{{title}}</1>",
         "form_location_dialog_title_blank": "Set map location",
         "location_dialog_cancel_button": "Cancel",
-        "location_dialog_confirm_button": "Set Location",
+        "location_dialog_confirm_button": "Save Map",
         "view_title_outline": "Outline",
         "breadcrumbs_view": "{{title}}",
         "breadcrumbs_tool_home": "Terraso Story Maps",
@@ -1016,6 +1016,19 @@
         "form_location_helper_text_step_3_image_src": "/storyMap/set-map-step-3-en.png",
         "form_location_helper_text_step_3_image_alt": "A screenshot of the Set Map Location screen. The “Set Location” button in the top right is circled.",
         "form_location_helper_text_bearing_icon_alt": "Bearing",
+        "form_location_add_data_layer_button": "Add Map Layer",
+        "form_location_add_data_layer_current": "Map Layer: <1>{{title}}</1>",
+        "form_location_add_data_layer_dialog_title": "<0>Add a map layer to </0><1>{{title}}</1>",
+        "form_location_add_data_layer_dialog_title_blank": "Add a map layer to chapter",
+        "form_location_add_data_layer_dialog_subtitle": "Select a map from your landscape or group",
+        "form_location_add_data_layer_dialog_description": "Polygons, lines, points from the map will be added to this chapter. This content will be visible to the public when publishing this story map.",
+        "form_location_add_data_layer_dialog_layers_count_zero": "You haven’t created any maps in Terraso. Make a map in a group or landscape.",
+        "form_location_add_data_layer_dialog_layers_count_one": "{{count}} map is available",
+        "form_location_add_data_layer_dialog_layers_count_other": "{{count}} maps are available",
+        "form_location_add_data_layer_dialog_source_file": "Source file: {{filename}}",
+        "form_location_add_data_layer_dialog_restricted": "This map has restricted access. Adding it to a story map will make it public. Consulting with $t(user.full_name) is recommended.",
+        "form_location_add_data_layer_dialog_cancel": "Cancel",
+        "form_location_add_data_layer_confirm": "Add Map Layer",
         "share_dialog_title": "Invite Editors",
         "share_dialog_description": "Invite people to edit your story map. <1>Learn more about collaborating on story maps</1>.",
         "share_dialog_help_url": "https://terraso.org/help/how-to-manage-editors-for-your-story-map/",

src/localization/locales/es-ES.json

@@ -917,7 +917,7 @@
         "form_delete_chapter_confirm_title": "¿Eliminar “{{name}}”?",
         "form_delete_chapter_confirm_message": "¿Está seguro de que desea eliminar el capítulo {{name}}?",
         "form_delete_chapter_confirm_button_tooltip": "Eliminar el capítulo “{{name}}”",
-        "form_chapter_location_button": "Establecer ubicación en el mapa",
+        "form_chapter_location_button": "Editar mapa",
         "form_chapter_alignment_buttons": "Establecer alineación",
         "form_chapter_alignment_left": "alinear a la izquierda",
         "form_chapter_alignment_center": "Alinear al centro",
@@ -929,7 +929,7 @@
         "form_location_dialog_title": "Establecer la ubicación del mapa para <1>{{title}}</1>",
         "form_location_dialog_title_blank": "Establecer ubicación en el mapa",
         "location_dialog_cancel_button": "Cancelar",
-        "location_dialog_confirm_button": "Escoger localización",
+        "location_dialog_confirm_button": "Guardar mapa",
         "view_title_outline": "Esquema",
         "breadcrumbs_view": "{{title}}",
         "breadcrumbs_tool_home": "Story Maps de Terraso",
@@ -1021,6 +1021,19 @@
         "form_location_helper_text_step_3_image_src": "/storyMap/set-map-step-3-es.png",
         "form_location_helper_text_step_3_image_alt": "Una captura de pantalla de la pantalla Establecer ubicación en el mapa. El botón “Establecer ubicación” en la parte superior derecha tiene un círculo.",
         "form_location_helper_text_bearing_icon_alt": "Rumbo",
+        "form_location_add_data_layer_button": "Agregar capa de mapa",
+        "form_location_add_data_layer_current": "Capa de mapa: <1>{{title}}</1>",
+        "form_location_add_data_layer_dialog_title": "<0>Agregar una capa de mapa a </0><1>{{title}}</1>",
+        "form_location_add_data_layer_dialog_title_blank": "Agregar una capa de mapa al capítulo",
+        "form_location_add_data_layer_dialog_subtitle": "Selecciona un mapa de tu paisaje o grupo",
+        "form_location_add_data_layer_dialog_description": "A este capítulo se agregarán polígonos, líneas y puntos del mapa. Este contenido será visible para el público al publicar este story map.",
+        "form_location_add_data_layer_dialog_layers_count_zero": "No has creado ningún mapa en Terraso. Haz un mapa en un grupo o paisaje.",
+        "form_location_add_data_layer_dialog_layers_count_one": "{{count}} mapa está disponible",
+        "form_location_add_data_layer_dialog_layers_count_other": "{{count}} mapas están disponibles",
+        "form_location_add_data_layer_dialog_source_file": "Archivo fuente: {{filename}}",
+        "form_location_add_data_layer_dialog_restricted": "Este mapa tiene acceso restringido. Agregarlo a un story map lo hará público. Se recomienda consultar con $t(user.full_name).",
+        "form_location_add_data_layer_dialog_cancel": "Cancelar",
+        "form_location_add_data_layer_confirm": "Agregar capa de mapa",
         "share_dialog_title": "Invitar a editores",
         "share_dialog_description": "Invita a personas a editar tu story map. <1>Más información sobre cómo colaborar en story maps</1>.",
         "share_dialog_help_url": "https://terraso.org/es/ayuda/como-gestionar-los-editores-de-tu-mapa-de-la-historia/",