React-leaflet: Centralize all markers automatically

Created on 15 Jul 2016 · 7Comments · Source: PaulLeCam/react-leaflet

Hello everybody.

I have two markers , one in the United States and the other in Brazil , I can not center the map with all the markers automatically.

Expected behavior

Actual behavior

Here is an example of code

https://jsfiddle.net/hqjv5utx/

Source

tiagocedrim

👍1

Most helpful comment

Hi @tiagocedrim,
As your code above, you could use _bounds_ to achieve your expectation https://jsfiddle.net/4p7u56wy/
FYI

bounds: bounds (optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. This property is dynamic, if you change it it will be reflected on the map.

nguyendh2601 on 18 Jul 2016

❤3 👍1

All 7 comments

Hi,
The map's center is applied as expected, there is no "automatic" center, it's up to your application to set it.
You probably want to use something like Leaflet's latLngBounds() to create the bounds to inject to the map.

PaulLeCam on 15 Jul 2016

@PaulLeCam What would be the best way to achieve this with the code below ?

https://jsfiddle.net/hqjv5utx/

tiagocedrim on 15 Jul 2016

Hi @tiagocedrim,
As your code above, you could use _bounds_ to achieve your expectation https://jsfiddle.net/4p7u56wy/
FYI

bounds: bounds (optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. This property is dynamic, if you change it it will be reflected on the map.

nguyendh2601 on 18 Jul 2016

❤3 👍1

@PaulLeCam Thanks, worked perfectly :metal:

tiagocedrim on 18 Jul 2016

Thanks, works great!