CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
Vladislav Kochurko
Vladislav Kochurko

Reputation: 37

How to prevent map repetition at low zoom levels in MapBox JS library?

I am developing an interactive map with markers on it. However, I am facing an issue where at high zoom-out levels, the map starts repeating itself, causing my markers to duplicate due to repeated coordinates. Additionally, having multiple repeated maps on a wide screen looks unappealing.

Is there a way in the MapBox JS library to disable map repetition or perhaps replace the repeated map with an infinite ocean?

Upvotes: -2

Views: 170

Answers (2)

Powerhouse
Powerhouse

Reputation: 1

In the Mapbox JS library, the repetition of maps at low zoom levels is caused by the default setting of the wrap property, which enables horizontal map wrapping. To prevent this, you can use the maxBounds option to restrict the map view to a specific bounding box.

const map = new mapboxgl.Map({
    container: 'map', // ID of the container element
    style: 'mapbox://styles/mapbox/streets-v11', // Mapbox style URL
    center: [0, 0], // Initial center [longitude, latitude]
    zoom: 2, // Initial zoom level
    maxBounds: [[-180, -85], [180, 85]] // Restrict bounds
});

Upvotes: 0

Steve Bennett
Steve Bennett

Reputation: 126517

I'm not aware of any way to achieve that.

Upvotes: 0

Related Questions