Change the Location of a React Leaflet Map with Leaflet's flyTo and setView
In this lesson, we'll use the Leaflet setView and flyTo methods available on a map instance to change the location of a React Leaflet map. Using buttons to demonstrate, we'll walk through adding the setView method using a position and zoom level as well as the flyTo method which allows us to animate changing the location along with a specified duration.
Instructor: [0:00] We're going to start off with a map over Washington DC. On the side we're going to start off with Disney World and Disney Land which we'll use for our example. In our code we're importing our map and our tile layer from React-Leaflet. We're using the map and tile layer components to create our app.
[0:14] You can also see our side bar where we're we have our Disney World and our Disneyland examples. In each location we have a button which we're going to use to change the map.
[0:22] Diving in, we have two locations, the Disney World Latin Long and the Disneyland Latin Long. We're going to use those buttons to trigger the events, so let's create some handler functions.
[0:31] First, let's do function handles setview. Then function handle flyto. On our buttons we can set the onclick to handle setview and our second onclick to handle flyto. To test that it's working let's add a simple console log to setview and a similar one to flyto.
[0:58] If we look on our browser and click our buttons we can see setview and flyto. To use our map we need to get it from our map ref so let's replace this with const destructure the current from map ref.
[1:12] We also want to destructure the leaflet element which I like to rename to map from current. Let's also set a default object in current in case it's not available. Once we have our map we can say map setview. We can paste in our Disney World location and let's set a zoom level of 14.
[1:30] Once we hit save we can open up our browser, hit setview and send that data to Disney World. The difference between setview and flyto is flyto is flyto will actually provide an animation that flies to the location.
[1:42] To get started with flyto let's replace our console log with the same destructured map ref. Using our map again we can say flyto. We can paste our Disneyland location. We can again set our zoom level to 14 but this time we can also pass in an option such as duration, which we can use to set the animation time to two seconds.
[2:00] If we go back to our map we can click flyto and watch it animate it over to Disneyland. In our view we created two handler functions, setview and flyto, which were used to update our map.
[2:11] In the setview function we used the setview method on our map, set the view to Disney World. In our flyto function we used the flyto method on our map to animate flying over to Disney Land.
[2:22] After setting those handlers on our buttons we were able to open up our map, set our view to Disney World and fly over to Disney Land.