Mapbox-gl-js: noWrap map option

[tmcw]

The Leaflet option: we added world wrapping in https://github.com/mapbox/mapbox-gl-js/issues/50 but should be able to to turn it off with a mapboxgl.Map option.

[stepankuzmin]

+1

[tmcw]

Looking into this, it seems like this shouldn't be a map option, but a source option. Thoughts?

[jfirebaugh]

It could be a map option, source option, or even a layer option. Do you see an advantage one way or the other?

[steinbachr]

there's a pretty easy workaround for this, simply initialize the map with maxBounds set:

var map = new mapboxgl.Map({
            container: 'map', // container id
            maxBounds: [
                [-180, 90],
                [180, -90]
            ],
           ....

[Wouter125]

Solution above causes my map to vertically pan further than the height of the map itself. Any solution for this? I'm still up for a map option tho. Way easier and pretty native functionality.

[Iam-jegan]

as Wouter125 stated I'm too facing the same problem as vertical panning when maxBounds are set. Any best way to fit the map completely inside the container?

[lukehorvat]

I've found that as long as maxBounds is within map.transform.latRange, I don't encounter the vertical panning bug.

First, print out map.transform.latRange (without setting maxBounds yet):

let map = new mapbox.Map({
  container: "map",
  style: "mapbox://styles/mapbox/bright-v8"
});

console.log(map.transform.latRange[0]); // -85.05113 
console.log(map.transform.latRange[1]); // 85.05113

Then simply configure maxBounds so that it falls within this latitude range:

let map = new mapbox.Map({
  container: "map",
  style: "mapbox://styles/mapbox/bright-v8",
  maxBounds: [ [-180, -85], [180, 85] ]
});

Obviously this isn't a perfect solution, because the range is -85 to 85, not -90 to 90. But hopefully it should be sufficient for most people until a proper fix is implemented.

[lucaswoj]

It could be a map option, source option, or even a layer option. Do you see an advantage one way or the other?

This ticket is ambiguous as written. The option would make sense but behave differently on each of those entities. In each of those cases, it seems like a special case of maxBounds.

[tetreault]

+1 as noWrap: true and continuousWorld: false had no effect when I was testing a simple mapbox-gl-js demo as listed in the doc.

Adding in maxBounds: [ [-180, -85], [180, 85] ] did do the trick though!

[mollymerp]

@tetreault you can use the renderWorldCopies constructor option. a setter and getter for this option will also be included in the next release #4039