-1

I am using mapbox-gl and vue-mapbox [https://soal.github.io/vue-mapbox/api/#props]

in my vuejs app to display a map. I would like to initialize the map with boundaries that encompass the continental US and when the map loads, I'd like to zoom in to a certain location in the US.

If I include the "center" and "zoom" props in the element, I can get the map will initialize to the continental US. But then, map.fitBounds() doesn't work.

If I don't include the center prop in the element, fitBounds() works, but mapbox uses the center of my style, which is Paris, France. I like crepes, but I don't like this.

GNG
  • 1,341
  • 2
  • 23
  • 50
  • One solution would be to not include the center prop and instead set the center point of the map style in Mapbox studio. Is it possible to specify the center of the style in Mapbox studio? I am using a base map who's center is at Paris and would want to move the center to the middle of the continental U.S. – GNG May 07 '20 at 06:16

1 Answers1

1

Sorry I'm not the author of the vue-mapbox library, though I have made a small contribution to it.

Yes you can change the center of a style in Mapbox Studio, here's how :

Change the center

The problem you mention is because center and zoom properties are synced. But changing the center of the style should work in your case.

Arkandias
  • 383
  • 2
  • 14
  • What parameters should I inlucde in the element? I adjusted my map to focus on the continental US, but the map starts at the coordinate (0,0) in my application (i.e. just west of Africa. I'd like the map to initialize to the bounds set in the Mapbox Studio style, like you described. – GNG May 12 '20 at 00:03
  • It's working now. I think Mapbox studio just needed some time to update the style in the URL – GNG May 12 '20 at 00:15