Interface with the React Leaflet Map API with the useRef and useEffect React Hooks

Share this video with your friends

Send Tweet

In this lesson, you will learn how to use React hooks to interface with the Leaflet Map API in React Leaflet. We'll connect a ref to our Map component using the useRef hook and then use the useEffect hook to access that ref, find our Map instance, and use it to fly to a new location.

More details on the Leaflet Map API

~ 3 years ago

Hi... it seems newest version of react leaflet using <Map Container> does not support accessing map via ref (https://github.com/PaulLeCam/react-leaflet/issues/841) and one has to rely on useMap hook provided by module.

Just mentioning...

Colby Fayock
Colby Fayock(instructor)
~ 3 years ago

thanks for the heads up - if you want to see a way to handle this, you can check out this example: https://github.com/colbyfayock/gatsby-starter-leaflet/blob/master/src/pages/index.js#L100