I have a maplibre component that has a marker over the user location- The user location coordinates are default 0,0 until i get their location and assign that to a usestate var. However the marker initialises at the 0,0 coordinates instead of the user location and doesn't move.

 <div className="w-full h-[400px] bg-blue-100 relative" >

  <Map ref={mapRef}
  onLoad={() => setMapReady(true)}
  initialViewState={{
    longitude: longitude,
    latitude: latitude,
    zoom: 5 }}
     mapStyle=".json?key=v7ONt1OhY3mea5iBLNea" >
    
  { latitude !== 0 && longitude !== 0 && 
  (<Marker longitude={longitude} latitude={latitude} anchor="bottom"  >   
     </Marker>)}
</Map>
  
 
</div>

When the location coordinates load the marker stays at the 0,0 location. How do i fix this?

I have a maplibre component that has a marker over the user location- The user location coordinates are default 0,0 until i get their location and assign that to a usestate var. However the marker initialises at the 0,0 coordinates instead of the user location and doesn't move.

 <div className="w-full h-[400px] bg-blue-100 relative" >

  <Map ref={mapRef}
  onLoad={() => setMapReady(true)}
  initialViewState={{
    longitude: longitude,
    latitude: latitude,
    zoom: 5 }}
     mapStyle="https://api.maptiler/maps/streets-v2/style.json?key=v7ONt1OhY3mea5iBLNea" >
    
  { latitude !== 0 && longitude !== 0 && 
  (<Marker longitude={longitude} latitude={latitude} anchor="bottom"  >   
     </Marker>)}
</Map>
  
 
</div>

When the location coordinates load the marker stays at the 0,0 location. How do i fix this?

• maplibre-gl

1 Answer 1

The longitude and latitude fly to fun c should be in a use effect func. This fixes it

  useEffect(() => {
    if (mapReady && latitude !== 0 && longitude !== 0 && mapRef.current) {
      const map = mapRef.current.getMap();
      map.flyTo({
        center: [longitude, latitude],
        zoom: 15,
        speed: 1.2
      });

    }
  }, [latitude, longitude, mapReady]);