front: map: add switch button for smooth-travel on map

- add smoothTravel selector and updateSmoothTravel dispatch function
- add smoothTravel FormatSwitch in MapSettingsBackgroundSwitches.tsx
- add smoothTravel in condition to enable flyTo() in MapSearch.tsx
- add translations in map-settings.json (en/fr)

Author: Yohh

front/public/locales/en/map-settings.json

@@ -15,7 +15,7 @@
   },
   "noSpeedLimitByTag": "No composition code",
   "operationalpoints": "Operational points",
-  "platforms":"Platforms",
+  "platforms": "Platforms",
   "routes": "Train blocks",
   "signals": "Signals",
   "signalingtype": "Signalling block type",
@@ -25,6 +25,7 @@
   "showIGNCadastre": "Cadastre ©IGN",
   "showOSM": "Map background OSM",
   "showOSMtracksections": "OSM tracks",
+  "smoothTravel": "Smooth travel",
   "sncf_psl": "Permanent speed limits",
   "speedlimits": "Speed limits",
   "stops": "Stop signs",

front/public/locales/fr/map-settings.json

@@ -15,7 +15,7 @@
   },
   "noSpeedLimitByTag": "Aucun code de composition",
   "operationalpoints": "Points remarquables",
-  "platforms":"Quais",
+  "platforms": "Quais",
   "routes": "Cantons",
   "signals": "Signals",
   "signalingtype": "Type de block",
@@ -25,6 +25,7 @@
   "showIGNCadastre": "Cadastre ©IGN",
   "showOSM": "Fond de carte OSM",
   "showOSMtracksections": "Voies OSM",
+  "smoothTravel": "Transition douce",
   "sncf_psl": "Limites permanentes de vitesse",
   "speedlimits": "Vitesses limites",
   "stops": "Pancartes d'arrêt",

front/src/common/Map/Search/MapSearch.tsx

@@ -22,10 +22,11 @@ type MapSearchProps = {
 
 const MapSearch: FC<MapSearchProps> = ({ map, closeMapSearchPopUp }) => {
   const dispatch = useDispatch();
+  const { smoothTravel } = useSelector(getMap);
 
   const updateViewportChange = useCallback(
     (value: Partial<Viewport>) => {
-      if (map) {
+      if (map && smoothTravel) {
         map.flyTo({
           center: {
             lng: value.longitude || map.getCenter().lng,

front/src/common/Map/Settings/MapSettingsBackgroundSwitches.tsx

@@ -20,6 +20,7 @@ import {
   updateShowOSM,
   updateShowOSMtracksections,
   updateTerrain3DExaggeration,
+  updateSmoothTravel,
 } from 'reducers/map';
 
 const FormatSwitch: FC<{
@@ -47,8 +48,14 @@ const FormatSwitch: FC<{
 
 const MapSettingsBackgroundSwitches: FC<unknown> = () => {
   const { t } = useTranslation(['map-settings']);
-  const { showIGNBDORTHO, showIGNSCAN25, showIGNCadastre, showOSM, showOSMtracksections } =
-    useSelector(getMap);
+  const {
+    showIGNBDORTHO,
+    showIGNSCAN25,
+    showIGNCadastre,
+    showOSM,
+    showOSMtracksections,
+    smoothTravel,
+  } = useSelector(getMap);
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const dispatch = useDispatch();
 
@@ -111,6 +118,14 @@ const MapSettingsBackgroundSwitches: FC<unknown> = () => {
           />
         </div>
       </div>
+
+      <FormatSwitch
+        name="smoothTravel-switch"
+        onChange={() => dispatch(updateSmoothTravel(!smoothTravel))}
+        state={smoothTravel}
+        icon=""
+        label="smoothTravel"
+      />
     </>
   );
 };

front/src/reducers/map/index.ts

@@ -25,6 +25,7 @@ export interface MapState {
   showOSM: boolean;
   showOSMtracksections: boolean;
   terrain3DExaggeration: number;
+  smoothTravel: boolean;
   viewport: Viewport;
   featureInfoClickID?: number;
   layersSettings: {
@@ -59,6 +60,7 @@ export const mapInitialState: MapState = {
   showOSM: true,
   showOSMtracksections: false,
   terrain3DExaggeration: 0,
+  smoothTravel: false,
   viewport: {
     latitude: 48.32,
     longitude: 2.44,
@@ -138,6 +140,9 @@ const mapSlice = createSlice({
     ) => {
       state.terrain3DExaggeration = action.payload;
     },
+    updateSmoothTravel: (state, action: PayloadAction<MapState['smoothTravel']>) => {
+      state.smoothTravel = action.payload;
+    },
   },
 });
 
@@ -177,6 +182,7 @@ export const {
   updateShowOSM,
   updateShowOSMtracksections,
   updateTerrain3DExaggeration,
+  updateSmoothTravel,
   updateViewportAction,
   updateIssuesSettings,
 } = mapSliceActions;

front/src/reducers/map/selectors.ts

@@ -14,6 +14,7 @@ export const getShowIGNCadastre = makeMapStateSelector('showIGNCadastre');
 export const getShowOSM = makeMapStateSelector('showOSM');
 export const getShowOSMtracksections = makeMapStateSelector('showOSMtracksections');
 export const getTerrain3DExaggeration = makeMapStateSelector('terrain3DExaggeration');
+export const getSmoothTravel = makeMapStateSelector('smoothTravel');
 export const getViewport = makeMapStateSelector('viewport');
 export const getLayersSettings = makeMapStateSelector('layersSettings');
 export const getMapSearchMarker = makeMapStateSelector('mapSearchMarker');