front: fix warning in map

Signed-off-by: Clara Ni <[email protected]>

Author: clarani

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

@@ -58,7 +58,6 @@ export function genOSMLayerProps(
       ...acc,
       {
         ...layer,
-        key: `${layer.id}-${mapStyle}`,
         id: `osm/${layer.id}`,
         layerOrder,
       },
@@ -68,7 +67,7 @@ export function genOSMLayerProps(
 
 export function genOSMLayers(mapStyle: string, toggledLayers: ToggledLayers, layerOrder?: number) {
   return genOSMLayerProps(mapStyle, toggledLayers, layerOrder).map((props) => (
-    <OrderedLayer {...props} />
+    <OrderedLayer key={`${props.id}-${mapStyle}`} {...props} />
   ));
 }
 

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

@@ -53,13 +53,10 @@ const DataLoader = ({ bbox, getGeoJSONs, layers }: DataLoaderProps) => {
     const osmStyle = (mapStyleJson as LayerProps[]).filter(
       (layer) => layer.id && OSM_LAYERS.has(layer.id)
     );
-    return osmStyle
-      .map((layer) => ({
-        ...layer,
-        key: layer.id,
-        id: `osm/${layer.id}`,
-      }))
-      .map((layer) => <OrderedLayer {...layer} />);
+    return osmStyle.map((layer) => ({
+      ...layer,
+      id: `osm/${layer.id}`,
+    }));
   }, []);
 
   useEffect(() => {
@@ -145,7 +142,9 @@ const DataLoader = ({ bbox, getGeoJSONs, layers }: DataLoaderProps) => {
         {state === 'render' && (
           <>
             <Source id="osm" type="vector" url={OSM_URL}>
-              {osmLayers}
+              {osmLayers.map((layer) => (
+                <OrderedLayer key={layer.id} {...layer} />
+              ))}
             </Source>
             <GeoJSONs
               colors={colors[mapStyle]}

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

@@ -157,7 +157,7 @@ const WarpedMap = ({
           data={osmData[sourceLayer] || featureCollection([])}
         >
           {layers.map((layer) => (
-            <OrderedLayer {...(omit(layer, 'source-layer') as OrderedLayerProps)} />
+            <OrderedLayer key={layer.id} {...(omit(layer, 'source-layer') as OrderedLayerProps)} />
           ))}
         </Source>
       ))}