Animated setView() in Leaflet

Question

I have a search bar in my leaflet map and I would like the map to slowly zoom and pan to the marker when selected from the search bar. I can get it to zoom and pan but not slowly. My desired effect would be similar to when you type in a location in Google Earth and the view 'flys' from one location to the next. This is the code I have which zooms to my location but not slowly.

controlSearch = new L.Control.Search({layer:listOfMarkers, propertyName: 'IntersectionName', circleLocation:true,  position:'topleft'});
    map.addControl(controlSearch)

controlSearch.on('search_locationfound', function(e){
    map.setView(e.latlng,15, {animate:true, duration:10.0})
});

I'm using leaflet v0.7.7.

Thanks!

Answer 1

Unfortunately, there is no way to change the duration of any setView that changes the current zoom level in Leaflet 0.7.7*. The duration of any animated zoom is hard-coded to be 0.25s, and because setView accepts zoom/pan options, which do not include duration, your duration:10.0 will be ignored.

However, setView does accept separate options for panning and zooming, and because the pan options do include duration, you can pan smoothly at the current zoom level using the following:

map.setView(e.latlng, map.getZoom(), {
  "animate": true,
  "pan": {
    "duration": 10
  }
});

I realize that this is not quite what you are looking for, but it is one step closer.

*In Leaflet 1.0b, there is a flyTo method, which produces the effect you describe, but there is nothing similar in 0.7.7.