• react-map-gl is the way to go when working with mapbox in react. it handle the initialisation of mapbox all for you and lets you compose map box elements like attribute , points layers in an idomatic react way.

• I cant get useMap to work correctly.I thought it was used to target a map instance. but it always return null? Instead I’ve resorted to binding a ref to the Map component which seems to work…

export const MapExample: React.FC<HomePageMapProps> = ({ clientLocation }) => {

	const { current: currMap } = useMap();
  

	useEffect(() => {
	
		if (mapRef.current && clientLocation) {
		
			mapRef.current.flyTo({
		
				center: [clientLocation.long, clientLocation.lat],
		
				speed: 0.8,
		
				zoom: 10,
		
			});
		
		}
	
	}, [clientLocation]);

  

	return (
	
		<Map
		
			ref={mapRef}
			
			initialViewState={{
			
				zoom: 1,
			
			}}
		
			mapStyle="mapbox://styles/mapbox/streets-v11"
			
			mapboxAccessToken={MAPBOX_TOKEN}
			
			attributionControl={true}
			
			projection="globe"
		
>		
		
			{clientLocation && (
			
			<Marker
			
				longitude={clientLocation.long}
				
				latitude={clientLocation.lat}
				
				anchor="bottom"
			
    >			
			
			</Marker>
			
			)}
		
		</Map>
	
	);

};