Search code examples
vue.jsmapboxmapbox-gl

cannot set initial bounds of vuemapbox map

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.

Solution

  • 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.