fixed issue with map layer translations (#6480)

* fixed issue with map layer translations * removed unnecesary variable * fixed spec * updated snapshot
huridocs · Feb 14, 2024 · 01f4a68 · 01f4a68
1 parent e008d3f
commit 01f4a68
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/app/react/Map/LMap.tsx b/app/react/Map/LMap.tsx
@@ -18,8 +18,6 @@ import { getMapProvider } from './TilesProviderFactory';
 
 type Layer = 'Dark' | 'Streets' | 'Satellite' | 'Hybrid';
 
-const DEFAULT_MAP_LAYER = 'Streets';
-
 type LMapProps = {
   markers?: MarkerInput[];
   height: number;
@@ -77,14 +75,14 @@ const LMap = ({
 
   const initMap = () => {
     const baseMaps = getMapProvider(props.tilesProvider, props.mapApiKey);
-    const mapLayers = { ...baseMaps };
-    if (layers && layers.length) {
-      Object.keys(mapLayers).forEach(key => {
-        if (!layers.includes(key as Layer)) {
-          delete mapLayers[key];
-        }
-      });
-    }
+    const mapLayers: { [k: string]: L.TileLayer } = {};
+    Object.keys(baseMaps).forEach(key => {
+      const mapKey = baseMaps[key].key;
+      if (layers && layers.length && !layers.includes(mapKey as Layer)) {
+        return;
+      }
+      mapLayers[key] = baseMaps[key].layer;
+    });
 
     const shouldScroll: boolean = props.renderPopupInfo || props.onClick !== undefined;
     map = L.map(containerId, {
@@ -107,8 +105,7 @@ const LMap = ({
       L.control.layers(mapLayers, {}, { position: 'bottomright', autoZIndex: false }).addTo(map);
     }
 
-    const initialLayer =
-      layers && layers.length ? mapLayers[layers[0]] : mapLayers[DEFAULT_MAP_LAYER];
+    const initialLayer = Object.values(mapLayers)[0];
     initialLayer.options.zIndex = 0;
     initialLayer.addTo(map);
     initMarkers();

diff --git a/app/react/Map/TilesProviderFactory.ts b/app/react/Map/TilesProviderFactory.ts
@@ -6,10 +6,10 @@ const DEFAULT_MAPBOX_TOKEN =
   'pk.eyJ1Ijoibnd5dSIsImEiOiJjazlta3liaWowMHBkM2pwaHFiaG0wcDBqIn0.47wbPKb2A4u3iCt34qrSRw';
 
 const mapBoxStyles: { [k: string]: string } = {
-  Dark: 'mapbox/dark-v11',
   Streets: 'mapbox/streets-v11',
   Satellite: 'mapbox/satellite-v9',
   Hybrid: 'mapbox/satellite-streets-v11',
+  Dark: 'mapbox/dark-v11',
 };
 
 const GoogleMapStyles: { [k: string]: 'roadmap' | 'satellite' | 'hybrid' } = {
@@ -18,36 +18,41 @@ const GoogleMapStyles: { [k: string]: 'roadmap' | 'satellite' | 'hybrid' } = {
   Hybrid: 'hybrid',
 };
 
-const getGoogleLayers: () => { [p: string]: TileLayer } = () =>
+const getGoogleLayers: () => { [p: string]: { layer: TileLayer; key: string } } = () =>
   Object.keys(GoogleMapStyles).reduce(
     (layers: { [k: string]: any }, styleId: string) => ({
       ...layers,
-      [styleId]: getGoogleLayer(GoogleMapStyles[styleId]),
+      [styleId]: { layer: getGoogleLayer(GoogleMapStyles[styleId]), key: styleId },
     }),
     {}
   );
 
-const getMapboxLayers: (accessToken?: string) => { [p: string]: TileLayer } = accessToken => {
+const getMapboxLayers: (accessToken?: string) => {
+  [p: string]: { layer: TileLayer; key: string };
+} = accessToken => {
   const mapboxUrl =
     'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}';
 
   return Object.keys(mapBoxStyles).reduce((layers: { [k: string]: TileLayer }, styleId: string) => {
     const styleLabel = t('System', styleId, null, false);
     return {
       ...layers,
-      [styleLabel]: L.tileLayer(mapboxUrl, {
-        id: mapBoxStyles[styleId],
-        tileSize: 512,
-        zoomOffset: -1,
-        accessToken: accessToken || DEFAULT_MAPBOX_TOKEN,
-        zIndex: 0,
-      }),
+      [styleLabel]: {
+        layer: L.tileLayer(mapboxUrl, {
+          id: mapBoxStyles[styleId],
+          tileSize: 512,
+          zoomOffset: -1,
+          accessToken: accessToken || DEFAULT_MAPBOX_TOKEN,
+          zIndex: 0,
+        }),
+        key: styleId,
+      },
     };
   }, {});
 };
 
 const mapFunction: {
-  [k: string]: (accessToken?: string) => { [p: string]: TileLayer };
+  [k: string]: (accessToken?: string) => { [p: string]: { layer: TileLayer; key: string } };
 } = {
   google: getGoogleLayers,
   mapbox: getMapboxLayers,

diff --git a/app/react/Markdown/components/Map.js b/app/react/Markdown/components/Map.js
@@ -24,21 +24,20 @@ const renderInfo = marker => (
 );
 
 export const MapComponent = props => {
-  const { data, classname, scrollZoom, showControls } = props;
+  const { data, classname, scrollZoom, showControls, zoom = 6 } = props;
   const clickOnMarker = marker => props.getAndSelectDocument(marker.properties.entity.sharedId);
   const clickOnCluster = cluster => {
     props.unselectAllDocuments();
     props.selectDocuments(cluster.map(m => m.properties.entity));
   };
-
   return (
     <div className={`Map ${classname}`}>
       {data ? (
         <Markers entities={data}>
           {markers => (
             <Map
               markers={markers}
-              zoom={1}
+              zoom={parseInt(zoom, 10)}
               clickOnMarker={clickOnMarker}
               clickOnCluster={clickOnCluster}
               renderPopupInfo={renderInfo}
@@ -66,6 +65,7 @@ MapComponent.propTypes = {
   classname: PropTypes.string,
   data: PropTypes.instanceOf(Immutable.List),
   scrollZoom: PropTypes.string,
+  zoom: PropTypes.number,
   showControls: PropTypes.string,
   getAndSelectDocument: PropTypes.func.isRequired,
   selectDocuments: PropTypes.func.isRequired,

diff --git a/app/react/Markdown/components/specs/__snapshots__/Map.spec.js.snap b/app/react/Markdown/components/specs/__snapshots__/Map.spec.js.snap
@@ -59,6 +59,6 @@ exports[`Map Markdown component should render the data passed by mapStateToProps
   renderPopupInfo={[Function]}
   scrollZoom={false}
   showControls={false}
-  zoom={1}
+  zoom={6}
 />
 `;