Geek Answers Handbook

Flyer - Fitbounds and Center

I am using a Leaflet with Mapbox, and I would like to set the map view like this:

  • all markers are displayed
  • the center is set to a specific point

It's easy to make each point separately with setView and fitbounds, but I don't know how to have both at the same time, since setView changes borders and fitBounds changes center. The solution may be to determine the center and scale, but how can I find out what scale allows me to see all my markers?

EDIT

I implemented the solution proposed by IvanSanchez and it works as expected:

let ne=leafletBounds.getNorthEast(); let sw=leafletBounds.getSouthWest(); let neSymetric=[ne.lat + (center.lat - ne.lat)*2, ne.lng + (center.lng - ne.lng)*2]; let swSymetric=[sw.lat +(center.lat - sw.lat)*2, sw.lng + (center.lng - sw.lng)*2]; leafletBounds.extend(L.latLngBounds(swSymetric, neSymetric));
+5
source share
2 answers

Get your grades and create a second instance of L.Bounds using point symmetry along the center point you need. Create a new L.Bounds containing the original estimates and symmetrical boundaries. Run fitBounds() with this.

+3
source

I found another solution. You can simply call map.panTo ([lat, lng]) after you have adjusted your map with fitBound (). I use VueJs and call it in hook () lifecycle.

I set the borders so that you can see the user's location, as well as the geographic function far away, but then I use panTo so that the user's real location is in the center of the map after fitBounds. It seems to be working so far.

0
source

More articles:


All Articles