feat: Change style from title map

techmatters · Apr 11, 2024 · 8556066 · 8556066
1 parent ecd9635
commit 8556066
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 69 deletions.
diff --git a/src/gis/components/MapStyleSwitcher.js b/src/gis/components/MapStyleSwitcher.js
@@ -41,7 +41,8 @@ class SwitcherControl {
   }
 }
 
-const MapStyleSwitcher = () => {
+const MapStyleSwitcher = props => {
+  const { position = 'top-right', onStyleChange } = props;
   const { t } = useTranslation();
   const { map, changeStyle } = useMap();
   const [container, setContainer] = useState(null);
@@ -56,7 +57,7 @@ const MapStyleSwitcher = () => {
     setAnchorEl(null);
   }, []);
 
-  const handleChangeStyle = useCallback(
+  const changeStylePartial = useCallback(
     (title, newStyle) => () => {
       if (title === styleName) {
         handleClose();
@@ -66,7 +67,25 @@ const MapStyleSwitcher = () => {
       changeStyle(newStyle);
       handleClose();
     },
-    [handleClose, styleName, changeStyle]
+    [changeStyle, handleClose, styleName]
+  );
+
+  const handleChangeStyle = useCallback(
+    (title, newStyle) => () => {
+      const confirmChangeStyle = changeStylePartial(title, newStyle);
+      if (
+        onStyleChange &&
+        !onStyleChange({
+          title,
+          newStyle,
+          confirmChangeStyle,
+        })
+      ) {
+        return;
+      }
+      confirmChangeStyle();
+    },
+    [changeStylePartial, onStyleChange]
   );
 
   useEffect(() => {
@@ -79,13 +98,13 @@ const MapStyleSwitcher = () => {
         setContainer(container);
       },
     });
-    map.addControl(stylesControl, 'top-right');
+    map.addControl(stylesControl, position);
 
     return () => {
       map.removeControl(stylesControl);
       map.off('styledata');
     };
-  }, [map]);
+  }, [map, position]);
 
   if (!container) {
     return null;
@@ -104,6 +123,8 @@ const MapStyleSwitcher = () => {
             minWidth: 'auto',
             border: 'none',
             '&:hover': { border: 'none' },
+            pb: 0.7,
+            pt: 0.7,
           }}
         >
           <LayersIcon aria-label={t('gis.basemap_label')} />

diff --git a/src/storyMap/components/StoryMap.js b/src/storyMap/components/StoryMap.js
@@ -15,6 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import scrollama from 'scrollama';
 import { Box } from '@mui/material';
@@ -348,7 +349,7 @@ const Scroller = props => {
         return;
       }
 
-      if (transition.location) {
+      if (transition.location && !_.isEmpty(transition.location)) {
         const mapCenter = map.getCenter();
         const transitionCenter = transition.location.center;
 

diff --git a/src/storyMap/components/StoryMapForm/MapLocationDialog.js b/src/storyMap/components/StoryMapForm/MapLocationDialog.js
@@ -29,13 +29,30 @@ import {
   Typography,
 } from '@mui/material';
 
+import ConfirmationDialog from 'common/components/ConfirmationDialog';
 import HelperText from 'common/components/HelperText';
 import Map, { useMap } from 'gis/components/Map';
 import MapControls from 'gis/components/MapControls';
 import MapGeocoder from 'gis/components/MapGeocoder';
+import MapStyleSwitcher from 'gis/components/MapStyleSwitcher';
 
 import { useStoryMapConfigContext } from './storyMapConfigContext';
 
+const ConfirmStyleChangeDialog = props => {
+  const { onCancel, onConfirm } = props;
+  const { t } = useTranslation();
+  return (
+    <ConfirmationDialog
+      open={onConfirm ? true : false}
+      title={t('storyMap.form_location_style_confirm_title')}
+      message={t('storyMap.form_location_style_confirm_message')}
+      confirmButtonLabel={t('storyMap.form_location_style_confirm_button')}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
+  );
+};
+
 const BearingIcon = () => {
   const { t } = useTranslation();
   return (
@@ -149,6 +166,8 @@ const MapLocationDialog = props => {
   const [mapZoom, setMapZoom] = useState(location?.zoom);
   const [mapPitch, setMapPitch] = useState(location?.pitch);
   const [mapBearing, setMapBearing] = useState(location?.bearing);
+  const [mapStyle, setMapStyle] = useState(config.style);
+  const [onConfirmStyleChange, setOnConfirmStyleChange] = useState();
 
   const initialLocation = useMemo(() => {
     if (location) {
@@ -179,13 +198,15 @@ const MapLocationDialog = props => {
   }, [location, config.chapters, config.titleTransition?.location, chapterId]);
 
   const handleConfirm = useCallback(() => {
-    onConfirm({
+    const location = _.omitBy(_.isNil, {
       center: mapCenter,
       zoom: mapZoom,
       pitch: mapPitch,
       bearing: mapBearing,
     });
-  }, [onConfirm, mapCenter, mapZoom, mapPitch, mapBearing]);
+    console.log({ location });
+    onConfirm(location, mapStyle);
+  }, [onConfirm, mapCenter, mapZoom, mapPitch, mapBearing, mapStyle]);
 
   const handleCancel = useCallback(() => {
     onClose();
@@ -198,69 +219,91 @@ const MapLocationDialog = props => {
     setMapBearing(position.bearing);
   }, []);
 
+  const onStyleChange = useCallback(
+    ({ newStyle, confirmChangeStyle }) => {
+      setOnConfirmStyleChange(() => () => {
+        setMapStyle(newStyle);
+        confirmChangeStyle();
+        setOnConfirmStyleChange(null);
+      });
+      return false;
+    },
+    [setOnConfirmStyleChange]
+  );
+
   return (
-    <Dialog
-      fullScreen
-      open={open}
-      onClose={handleCancel}
-      aria-labelledby="map-location-dialog-title"
-      aria-describedby="map-location-dialog-content-text"
-    >
-      <Stack direction="row" justifyContent="space-between">
-        <Stack>
-          <DialogTitle
-            component="h1"
-            id="map-location-dialog-title"
-            sx={{ pb: 0 }}
-          >
-            {title ? (
-              <Trans
-                i18nKey="storyMap.form_location_dialog_title"
-                values={{ title: title }}
-              >
-                prefix
-                <i>italic</i>
-              </Trans>
-            ) : (
-              <>{t('storyMap.form_location_dialog_title_blank')}</>
-            )}
-          </DialogTitle>
-          <DialogContent sx={{ pb: 0 }}>
-            <HelperText
-              showLabel
-              maxWidth={586}
-              label={t('storyMap.form_location_dialog_helper_text_label')}
-              Component={SetMapHelperText}
-              buttonProps={{
-                sx: { pl: 0, color: 'gray.dark1' },
-              }}
-            />
-          </DialogContent>
+    <>
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={handleCancel}
+        aria-labelledby="map-location-dialog-title"
+        aria-describedby="map-location-dialog-content-text"
+      >
+        <Stack direction="row" justifyContent="space-between">
+          <Stack>
+            <DialogTitle
+              component="h1"
+              id="map-location-dialog-title"
+              sx={{ pb: 0 }}
+            >
+              {title ? (
+                <Trans
+                  i18nKey="storyMap.form_location_dialog_title"
+                  values={{ title: title }}
+                >
+                  prefix
+                  <i>italic</i>
+                </Trans>
+              ) : (
+                <>{t('storyMap.form_location_dialog_title_blank')}</>
+              )}
+            </DialogTitle>
+            <DialogContent sx={{ pb: 0 }}>
+              <HelperText
+                showLabel
+                maxWidth={586}
+                label={t('storyMap.form_location_dialog_helper_text_label')}
+                Component={SetMapHelperText}
+                buttonProps={{
+                  sx: { pl: 0, color: 'gray.dark1' },
+                }}
+              />
+            </DialogContent>
+          </Stack>
+          <DialogActions sx={{ pr: 3 }}>
+            <Button size="small" onClick={handleCancel}>
+              {t('storyMap.location_dialog_cancel_button')}
+            </Button>
+            <Button size="small" onClick={handleConfirm} variant="contained">
+              {t('storyMap.location_dialog_confirm_button')}
+            </Button>
+          </DialogActions>
         </Stack>
-        <DialogActions sx={{ pr: 3 }}>
-          <Button size="small" onClick={handleCancel}>
-            {t('storyMap.location_dialog_cancel_button')}
-          </Button>
-          <Button size="small" onClick={handleConfirm} variant="contained">
-            {t('storyMap.location_dialog_confirm_button')}
-          </Button>
-        </DialogActions>
-      </Stack>
 
-      <DialogContent>
-        <Map
-          use3dTerrain
-          height="100%"
-          initialLocation={initialLocation}
-          projection={config.projection}
-          mapStyle={config.style}
-        >
-          <MapControls showCompass visualizePitch />
-          <MapGeocoder />
-          <MapLocationChange onPositionChange={handlePositionChange} />
-        </Map>
-      </DialogContent>
-    </Dialog>
+        <DialogContent>
+          <Map
+            use3dTerrain
+            height="100%"
+            initialLocation={initialLocation}
+            projection={config.projection}
+            mapStyle={config.style}
+          >
+            <MapControls showCompass visualizePitch />
+            <MapGeocoder position="top-right" />
+            <MapStyleSwitcher
+              position="top-right"
+              onStyleChange={onStyleChange}
+            />
+            <MapLocationChange onPositionChange={handlePositionChange} />
+          </Map>
+        </DialogContent>
+      </Dialog>
+      <ConfirmStyleChangeDialog
+        onConfirm={onConfirmStyleChange}
+        onCancel={() => setOnConfirmStyleChange(null)}
+      />
+    </>
   );
 };
 

diff --git a/src/storyMap/components/StoryMapForm/TitleForm.js b/src/storyMap/components/StoryMapForm/TitleForm.js
@@ -67,8 +67,9 @@ const TitleForm = props => {
   }, []);
 
   const onLocationChangeWrapper = useCallback(
-    location => {
+    (location, mapStyle) => {
       onFieldChange('titleTransition.location')(location);
+      onFieldChange('style')(mapStyle);
       onLocationClose();
     },
     [onFieldChange, onLocationClose]