mapbox: avoiding of a duplication layers at low zoom scale

Question

I faced with problem that my layers are duplicating at low zoom scale.

Using mapbox-gl-leaflet, it's combining mapbox map with leaflet. But first of all I'm using mapbox layers so seems the problem is in mapbox.

Here is code example:

var map = L.map('map',  {minZoom: 1 }).setView([38.912753, -77.032194], 1);

var gl = L.mapboxGL({
    accessToken: "access_token",
    style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);

gl._glMap.on('load', () => {

  gl._glMap.addLayer({
   "id": "line-example",
    "type": "line",
    "source": {
      "type": "geojson",
        "data": {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [[28.2, 60.0], [-10, -13]]
          }
        }
    },
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "rgba(13, 12, 39, .7)",
      "line-width": 6
    }
  });
});

And here is the result:

How can I fix this problem with duplicating? I need that my layer appear only in one 'world'.

Manish Manish · Accepted Answer · 2019-09-03T08:26:42

You can prevent the map from rendering multiple copies of the world (and the layer) by setting renderWorldCopies to false.

Something like this would work:

var gl = L.mapboxGL({
    accessToken: "access_token",
    style: 'mapbox://styles/mapbox/bright-v8',
    renderWorldCopies: false,
}).addTo(map);

For more options, check API spec here: https://docs.mapbox.com/mapbox-gl-js/api/

mapbox: avoiding of a duplication layers at low zoom scale

2 Answers