fix: make marker key as unique as possible instead of using array-index as key

Author: jeroen-huizer-conclusion

packages/pluggableWidgets/maps-web/src/components/GoogleMap.tsx

@@ -102,7 +102,10 @@ function GoogleMap(props: GoogleMapsProps): ReactElement {
                             .concat(currentLocation ? [currentLocation] : [])
                             .filter(m => !!m)
                             .map((marker, index) => (
-                                <GoogleMapsMarker key={`marker_${index}`} {...marker} />
+                                <GoogleMapsMarker
+                                    key={`marker_${marker.id ?? marker.latitude + "_" + marker.longitude}`}
+                                    {...marker}
+                                />
                             ))}
                     </GoogleMapComponent>
                 ) : (

packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx

@@ -89,7 +89,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                     {locations
                         .concat(currentLocation ? [currentLocation] : [])
                         .filter(m => !!m)
-                        .map((marker, index) => (
+                        .map(marker => (
                             <MarkerComponent
                                 icon={
                                     marker.url
@@ -100,7 +100,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                                         : defaultMarkerIcon
                                 }
                                 interactive={!!marker.title || !!marker.onClick}
-                                key={`marker_${index}`}
+                                key={`marker_${marker.id ?? marker.latitude + "_" + marker.longitude}`}
                                 eventHandlers={{
                                     click: marker.title ? undefined : marker.onClick
                                 }}

packages/pluggableWidgets/maps-web/src/utils/data.ts

@@ -39,7 +39,8 @@ function fromDatasource(marker: DynamicMarkersType, item: ObjectItem): ModeledMa
         longitude,
         title: title ? title.get(item).value : "",
         action: onClickAttribute ? onClickAttribute.get(item).execute : undefined,
-        customMarker: marker.customMarkerDynamic?.value?.uri
+        customMarker: marker.customMarkerDynamic?.value?.uri,
+        id: item.id
     };
 }
 

packages/pluggableWidgets/maps-web/typings/shared.d.ts

@@ -7,6 +7,7 @@ export interface ModeledMarker {
     title?: string;
     customMarker?: string;
     action?: () => void;
+    id?: string;
 }
 
 export interface Marker {
@@ -15,6 +16,7 @@ export interface Marker {
     url: string;
     onClick?: () => void;
     title?: string;
+    id?: string;
 }
 
 export interface SharedProps extends Dimensions {