Show markers based on array of coordinates from our own API

[xilva-dj]

Hi,
I am developing a store chain detail page. The idea is to show a map, with all store locations in the city. Store locations are stored in our DB and delivered through our api as an array of objects, like [{lat: xx, lon: yy}, ...]. To communicate via our backend, we use react-query.

What I would like to do is to fetch the store details, and once the loading is done, append the markers to the map.
However, it's not working. It just shows initial coordinates.

The code is as follows:

Store detail fetching

const { data: store, isLoading } = useQuery<StoreDetails>({
        queryKey: ['store'],
        queryFn: () => axios.get(`. . .`).then((res) => res.data),
    });

Map rendering:

<Map
                    initialViewState={{
                        // dont really need this, can be ommited
                        latitude: -8.86051,
                        longitude: 125.937,
                        zoom: 9,
                    }}
                    style={{ width: '100%', height: 400 }}
                    mapStyle="mapbox://styles/mapbox/streets-v12"
                    mapboxAccessToken={. . .}
                >
                    {store?.locations?.map(l => <Marker longitude={l.lon} latitude={l.lat} anchor="bottom" />)}
                </Map>

[bsrinath4839]

You can go though code of this.

#2318