Disable horizontal repeating of world map with mapbox

5
votes

I'm quite new to JS, so maybe my problem will be easy to solve, though I already spent many hours on it.

I'm using Mapbox with the leaflet api, and I would like to disable the repeating of horizontal world maps when zooming out. I already explored the maxBounds properties, but it is not satisfying, as I want to hide the map outside the bounds. Basically, I would like to have this result http://jsfiddle.net/zF6bf/ but instead of "canvas", I would like to have this map, stored on mapbox.com : cartogrph.hbem5mod

Moreover, I would like to disable drag and zoom handlers, so I'm looking for a solution which would be compatible with the following:

// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();

Can anyone help me? I would be really greatful.

Thanks in advance, Jonas

2
javascriptmapsleafletmapbox

2 Answers

7
votes

See the docs: Disable World Wrapping

<script>
var map = L.mapbox.map('map','cartogrph.hbem5mod', {
    // these options apply to the tile layer in the map
    tileLayer: {
        // this map option disables world wrapping. by default, it is false.
        continuousWorld: false,
        // this option disables loading tiles outside of the world bounds.
        noWrap: true
    }
}).setView([38, -102.0], 5);
</script>
3
votes

I found the existing answer didn't work for me. But you can use the RenderWorldCopies property to do this. See the Docs

You can use the Constructor's Option

 new mapboxgl.Map({
            renderWorldCopies: false,
            // your other options....
 })

Or with the method:

map.setRenderWorldCopies(true);