front: toggle 3d buildings

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

@@ -24,6 +24,7 @@
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",
   "showOSM": "Map background OSM",
+  "showOSM3dBuildings": "3D buildings",
   "showOSMtracksections": "OSM tracks",
   "smoothTravel": "Smooth travel",
   "sncf_psl": "Permanent speed limits",

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

@@ -24,6 +24,7 @@
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",
   "showOSM": "Fond de carte OSM",
+  "showOSM3dBuildings": "Bâtiments 3D",
   "showOSMtracksections": "Voies OSM",
   "smoothTravel": "Transition douce",
   "sncf_psl": "Limites permanentes de vitesse",

front/src/common/Map/Layers/OSM.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { LayerProps, Source } from 'react-map-gl/maplibre';
+import { get } from 'lodash';
 
 import mapStyleBluePrintJson from 'assets/mapstyles/OSMBluePrintStyle.json';
 import mapStyleDarkJson from 'assets/mapstyles/OSMDarkStyle.json';
@@ -8,6 +10,7 @@ import mapStyleJson from 'assets/mapstyles/OSMStyle.json';
 import { OSM_URL } from 'common/Map/const';
 
 import OrderedLayer, { OrderedLayerProps } from 'common/Map/Layers/OrderedLayer';
+import { getShowOSM3dBuildings } from 'reducers/map/selectors';
 
 interface OSMProps {
   mapStyle: string;
@@ -30,36 +33,60 @@ function getMapStyle(mapStyle: string): LayerProps[] {
   }
 }
 
+type FullLayerProps = OrderedLayerProps & { key?: string };
+type ToggledLayers = {
+  showOSM3dBuildings?: boolean;
+};
+
+const filters: Record<string, string> = {
+  batiments_3d: 'showOSM3dBuildings',
+  'building-3d': 'showOSM3dBuildings',
+};
+
 export function genOSMLayerProps(
   mapStyle: string,
+  toggledLayers: ToggledLayers,
   layerOrder?: number
-): (OrderedLayerProps & { key?: string })[] {
+): FullLayerProps[] {
   const osmStyle = getMapStyle(mapStyle);
-  return osmStyle.map((layer) => ({
-    ...layer,
-    key: `${layer.id}-${mapStyle}`,
-    id: `osm/${layer.id}`,
-    layerOrder,
-  }));
+  return osmStyle.reduce<FullLayerProps[]>((acc, layer) => {
+    const isShown = get(toggledLayers, filters[layer.id || ''], true);
+    if (!isShown) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        ...layer,
+        key: `${layer.id}-${mapStyle}`,
+        id: `osm/${layer.id}`,
+        layerOrder,
+      },
+    ];
+  }, []);
 }
 
-export function genOSMLayers(mapStyle: string, layerOrder?: number) {
-  return genOSMLayerProps(mapStyle, layerOrder).map((props) => <OrderedLayer {...props} />);
+export function genOSMLayers(mapStyle: string, toggledLayers: ToggledLayers, layerOrder?: number) {
+  return genOSMLayerProps(mapStyle, toggledLayers, layerOrder).map((props) => (
+    <OrderedLayer {...props} />
+  ));
 }
 
 function OSM({ mapStyle, layerOrder, mapIsLoaded }: OSMProps) {
   // Hack to full reload layers to avoid glitches
   // when switching map style (see #5777)
   const [reload, setReload] = useState(true);
+  const showOSM3dBuildings = useSelector(getShowOSM3dBuildings);
 
   useEffect(() => setReload(true), [mapStyle, mapIsLoaded]);
   useEffect(() => {
     if (reload) setReload(false);
   }, [reload]);
 
+  const toggledLayers = { showOSM3dBuildings };
   return !reload ? (
     <Source id="osm" type="vector" url={OSM_URL}>
-      {genOSMLayers(mapStyle, layerOrder)}
+      {genOSMLayers(mapStyle, toggledLayers, layerOrder)}
     </Source>
   ) : null;
 }

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

@@ -8,6 +8,7 @@ import iconIGNSCAN25 from 'assets/pictures/mapbuttons/mapstyle-scan25.jpg';
 import iconIGNCadastre from 'assets/pictures/mapbuttons/mapstyle-cadastre.jpg';
 import iconOSM from 'assets/pictures/mapbuttons/mapstyle-normal.jpg';
 import iconOSMTracks from 'assets/pictures/mapbuttons/mapstyle-osm-tracks.jpg';
+import icon3dBuildings from 'assets/pictures/mapbuttons/mapstyle-3d-buildings.jpg';
 import SwitchSNCF, {
   SWITCH_TYPES,
   SwitchSNCFProps,
@@ -18,6 +19,7 @@ import {
   updateShowIGNCadastre,
   updateShowIGNSCAN25,
   updateShowOSM,
+  updateShowOSM3dBuildings,
   updateShowOSMtracksections,
   updateTerrain3DExaggeration,
   updateSmoothTravel,
@@ -29,7 +31,8 @@ const FormatSwitch: FC<{
   state: boolean;
   icon: string;
   label: string;
-}> = ({ name, onChange, state, icon, label }) => {
+  disabled?: boolean;
+}> = ({ name, onChange, state, icon, label, disabled }) => {
   const { t } = useTranslation(['map-settings']);
   return (
     <div className="d-flex align-items-center">
@@ -39,6 +42,7 @@ const FormatSwitch: FC<{
         name={name}
         onChange={onChange}
         checked={state}
+        disabled={disabled}
       />
       <img className="ml-2 rounded" src={icon} alt="" height="24" />
       <span className="ml-2">{t(label)}</span>
@@ -49,16 +53,19 @@ const FormatSwitch: FC<{
 const MapSettingsBackgroundSwitches: FC<unknown> = () => {
   const { t } = useTranslation(['map-settings']);
   const {
+    mapStyle,
     showIGNBDORTHO,
     showIGNSCAN25,
     showIGNCadastre,
     showOSM,
+    showOSM3dBuildings,
     showOSMtracksections,
     smoothTravel,
   } = useSelector(getMap);
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const dispatch = useDispatch();
 
+  const isBlueprint = mapStyle === 'blueprint';
   return (
     <>
       <FormatSwitch
@@ -69,6 +76,15 @@ const MapSettingsBackgroundSwitches: FC<unknown> = () => {
         label="showOSM"
       />
       <div className="my-2" />
+      <FormatSwitch
+        name="show3dBuildings"
+        onChange={() => dispatch(updateShowOSM3dBuildings(!showOSM3dBuildings))}
+        state={!isBlueprint ? showOSM3dBuildings : false}
+        icon={icon3dBuildings}
+        disabled={isBlueprint}
+        label="showOSM3dBuildings"
+      />
+      <div className="my-2" />
       <FormatSwitch
         name="showosmtracksectionswitch"
         onChange={() => dispatch(updateShowOSMtracksections(!showOSMtracksections))}

front/src/common/Map/WarpedMap/WarpedMap.tsx

@@ -87,6 +87,7 @@ const WarpedMap: FC<{
         (
           genOSMLayerProps(
             mapStyle,
+            {},
             LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]
           ) as (OrderedLayerProps & {
             'source-layer': string;

front/src/reducers/map/index.ts

@@ -28,6 +28,7 @@ export interface MapState {
   showIGNSCAN25: boolean;
   showIGNCadastre: boolean;
   showOSM: boolean;
+  showOSM3dBuildings: boolean;
   showOSMtracksections: boolean;
   terrain3DExaggeration: number;
   smoothTravel: boolean;
@@ -62,6 +63,7 @@ export const mapInitialState: MapState = {
   showIGNSCAN25: false,
   showIGNCadastre: false,
   showOSM: true,
+  showOSM3dBuildings: false,
   showOSMtracksections: false,
   terrain3DExaggeration: 0,
   smoothTravel: false,
@@ -123,6 +125,9 @@ export const mapSlice = createSlice({
     updateShowOSM: (state, action: PayloadAction<MapState['showOSM']>) => {
       state.showOSM = action.payload;
     },
+    updateShowOSM3dBuildings: (state, action: PayloadAction<MapState['showOSM3dBuildings']>) => {
+      state.showOSM3dBuildings = action.payload;
+    },
     updateShowOSMtracksections: (
       state,
       action: PayloadAction<MapState['showOSMtracksections']>
@@ -181,6 +186,7 @@ export const {
   updateShowIGNCadastre,
   updateShowIGNSCAN25,
   updateShowOSM,
+  updateShowOSM3dBuildings,
   updateShowOSMtracksections,
   updateTerrain3DExaggeration,
   updateSmoothTravel,

front/src/reducers/map/mapReducer.spec.ts

@@ -13,6 +13,7 @@ import {
   updateShowIGNSCAN25,
   updateShowIGNCadastre,
   updateShowOSM,
+  updateShowOSM3dBuildings,
   updateShowOSMtracksections,
   updateLayersSettings,
   updateTerrain3DExaggeration,
@@ -94,6 +95,12 @@ describe('mapReducer', () => {
     expect(mapState).toEqual({ ...mapState, showOSM: true });
   });
 
+  it('should handle updateShow3dBuildings', () => {
+    store.dispatch(updateShowOSM3dBuildings(true));
+    const mapState = store.getState().map;
+    expect(mapState).toEqual({ ...mapState, showOSM3dBuildings: true });
+  });
+
   it('should handle updateShowOSMtracksections', () => {
     store.dispatch(updateShowOSMtracksections(true));
     const mapState = store.getState().map;

front/src/reducers/map/selectors.ts

@@ -12,6 +12,7 @@ export const getShowIGNBDORTHO = makeMapStateSelector('showIGNBDORTHO');
 export const getShowIGNSCAN25 = makeMapStateSelector('showIGNSCAN25');
 export const getShowIGNCadastre = makeMapStateSelector('showIGNCadastre');
 export const getShowOSM = makeMapStateSelector('showOSM');
+export const getShowOSM3dBuildings = makeMapStateSelector('showOSM3dBuildings');
 export const getShowOSMtracksections = makeMapStateSelector('showOSMtracksections');
 export const getTerrain3DExaggeration = makeMapStateSelector('terrain3DExaggeration');
 export const getSmoothTravel = makeMapStateSelector('smoothTravel');