Mapbox : how to fit the zoom to all the markers of a map?

Question

Is there an easy way to see all the markers of my Mapbox map by default, automatically, when the page is just loaded... ? Here is my map : http://www.geometry.be/urbanmaestro/v7/ Thank you so much for help !!

This answer might be what you're looking for: https://stackoverflow.com/questions/35586360/mapbox-gl-js-getbounds-fitbounds — BDD, Jan 07 '20 at 19:49
Does this answer your question? [Mapbox GL JS getBounds()/fitBounds()](https://stackoverflow.com/questions/35586360/mapbox-gl-js-getbounds-fitbounds) — BDD, Jan 07 '20 at 19:49
Thank you so much for yours answers. They probably answered to my question :) and I read all the links you gave me and did a lot of tests in my code and I can not apply the solution... http://www.geometry.be/urbanmaestro/v7/test.txt If someone knows where I have to do it in my code, I will be really grateful :-) — Martin Landmeters, Jan 14 '20 at 17:29

score 3 · Answer 1 · answered Jan 09 '20 at 12:54

3

You need to first calculate the smallest bounding box for your points, i.e figure out the top right and bottom left coordinates that the map would have to zoom into. You could do this manually or use a library like @turf/bbox whose result (minX, minY, maxX, maxY) lets you find these two points' positions.

Now, at any point that the map is initialised, you can call map.fitBounds, passing it the two points as documented, in the order [bottom left, top right].

answered Jan 09 '20 at 12:54

Marko K

346
3
12

Thank you so much for your answer. I did a lot of tests in my code and I can not apply the solution... http://www.geometry.be/urbanmaestro/v7/test.txt If someone knows where I have to do it in my code, I will be really grateful :-) – Martin Landmeters Jan 23 '20 at 11:52

score 2 · Answer 2 · edited Jun 17 '21 at 13:21

2

Just add this code after add all of your annotations in Mapbox

let inset = UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50)

guard let annotations = mapView.annotations else {return}

self.mapView.showAnnotations(annotations, edgePadding: inset, animated: true, completionHandler: nil)

This will get all of your annotations in Mapbox and show 50 padding from all insets.

edited Jun 17 '21 at 13:21

Mileta Dulovic

1,036
1
14
33

answered Jun 17 '21 at 12:37

D.Poojara

21
5

score 0 · Answer 3 · edited Aug 31 '22 at 06:12

first of all, you should find the bounding area to encompass markers.

you calculate this easily by this code

  locations.map((spot)=>{ // location in [long,lat] format
  if (spot.coordinates[0] > ne[0]){ // ne = norh east
    ne[0] = spot.coordinates[0];
  }
  if (spot.coordinates[1] > ne[1]){
    ne[1] = spot.coordinates[1];
  }
  if (spot.coordinates[0] < sw[0]){ //sw = south west
    sw[0] = spot.coordinates[0];
  }
  if (spot.coordinates[1] < sw[1]){
    sw[1] = spot.coordinates[1];
  }
});
this.mapBound=[ne,sw];
}

then call fitBounds method of mapbox. link

Mapbox : how to fit the zoom to all the markers of a map?

3 Answers3