Move map to dynamic location of the marker after search response.

[emekaokoli]

Hi, I am using react-map-gl to render a map, the issue I am having is.

1. I cannot find a sample implementation on how to move the marker to the dynamic location supplied to the lat/long prop.

I am using redux to dispatch actions when a user searches a record, it returns a response from the redux store which contains the XY coordinate but the map remains in one place after there's a response.

I have tried this with useEffect but it did not work

const { mapData} = useMap();
 const flyToLocation = useCallback(() => {
    return property?.map((prop) =>
      eedcMap?.flyTo({
        center: [prop?.longx_decimal, prop?.laty_decimal],
        duration: 2000,
      })
    );
  }, [eedcMap, property]);

  useEffect(() => {
    if (!mapData) return undefined;
    eedcMap.getCenter();
    flyToLocation();
  }, [mapData, flyToLocation]);

this is what my marker looks like

{property.map((prop) => (
          <Marker
            key={prop.dss_id}
            longitude={prop.longx_decimal}
            latitude={prop.laty_decimal}
            offsetTop={(-defaultMarkerSize * 5) / 2}
            anchor='bottom'
            onClick={(e) => {
              e.originalEvent.stopPropagation();
              setShowPopup(prop);
            }}
          >
            <svg
              height={defaultMarkerSize * 2}
              viewBox='0 0 384 512'
              style={{
                ...pinStyle,
                height: `${(defaultMarkerSize * 3) / 2}`,
                width: `${(defaultMarkerSize * 3) / 2}`,
                transform: `translate(${
                  -defaultMarkerSize / 2
                }px,${-defaultMarkerSize}px)`,
                color: '#2196f3',
              }}
            >
              <path d={ICON} />
            </svg>
          </Marker>
        ))}

I am looking for a way, to navigate/animate the map to flyTo/moveTo the location of the marker supplied dynamically and not remain in one place. I will greatly appreciate the help.

Tools

- "react-map-gl": "^7.0.19",
-     "react-router-dom": "^6.3.0",
-     "react-scripts": "5.0.1",
-   "@reduxjs/toolkit": "^1.8.2",
-  "react": "^18.2.0",

Thanks

[uzun0ff]

What is eedcMap is this the reference to the map?
If not, you should use the map's ref current object to make it work.

I am using it like this:

        mapRef.current?.flyTo({
          center: [
            data?.message.properties.mapLocation.address.coordinates.lng,
            data?.message.properties.mapLocation.address.coordinates.lng
          ]
        })