CODEWITHSUNDEEP
reactjsmapboxmapbox-gl-jsmapbox-glbounds
rmkj
rmkj

Reputation: 21

Fit all coordinates into the bounds of the map react in mapbox

There is a case, where I have one or two points on the map. While I have only one point, it`s easy, I can make any zoom I want with the center on this point. But I don't know how to make 2 points appear on the screen and how to calculate zoom level depending on it. I mean for example when I have first point in London and second one in Africa, my map should be zoomed out that we could see those 2 points(but not maximum zoom level)

Upvotes: 0

Views: 1495

Answers (1)

riastrad
riastrad

Reputation: 1774

You can do this by calculating the extent of your data (i.e. what coordinate space your points fall in) and then using this extent you calculate an appropriate center coordinate and zoom level.

Fortunately, both these steps are solved problems and open source packages already exist for each:

  1. Extent: https://github.com/mapbox/geojson-extent
  2. Zoom + Center: https://github.com/mapbox/geo-viewport

I would recommend either using these packages directly, or reading through their solutions to get a sense of how to implement each step in your application.

⚠️ disclaimer: I currently work at Mapbox ⚠️

Upvotes: 0

Related Questions