Mapbox GL cut off the layer when zooming

Question

EDIT: After optimizing my GeoJson file and uploading the .mbtile created by Tippecanoe, I still have the same problem, to be more specific, depending on how much zoom I do the polygon is cut in one size or another.

OK

WRONG

I have reproduced the error so you can see the complete code in stackblitz.

ORIGINAL QUESTION: I am creating a source dynamically from a tileset uploaded in Mapbox Studio. My goal is to show the map boundaries of the provinces of Spain, so that, when I click on one of them, a new layer is created showing only the boundaries of that province.

The loading of data from the tileset works correctly, but when I click on a province to create a new layer it is cut, as if it were split into two parts. In fact, sometimes it shows me the cut layer on the left side, and sometimes the one on the right side.

1. Tileset loaded correctly

2. After clicking on a province, the image is cut off.

3. In some cases, the part of the cut shown is the reverse

The related code. First I add the source when loading the map:

 this.map.on('load', () => {
       this.map.addSource('provinceClicked', {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [] 
            
          }  
        });

Then, I create a layer when the user clicks on the province.

 // "provincias_fill" is a layer previously created from another source (Works correctly)
 this.map.on('click', 'provincias_fill', (e)=>{ 

  this.map.getSource('provinceClicked').setData({ 
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": e.features[0].geometry.coordinates
        } 
      }
  ] 
  })     
  //Fill layer with blue background
  this.map.addLayer({
    'id': 'mainLine',
    'type': 'fill',
    'source': 'provinceClicked', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.1
    }
  });

  // Add a black outline around the polygon.
  this.map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'provinceClicked',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 3
    } 
  });  
});

I get this example to create a layer with previous coordinates, and this one to create a source dynamically.

What am I doing wrong? I welcome any comments on this. Happy day to everyone.

Answer 1

Try assigning unique identifiers (as key: value) to every province in your dataset. Then signal Mapbox to use this identifier when loading features, by providing the key through promoteId in addSource() on load.

E.g.:

 this.map.on('load', () => {
     this.map.addSource('provinceClicked', {
       'type': 'geojson',
       'data': {
         'type': 'FeatureCollection',
         'features': [] 
       },
       promoteId: {"sourceLayerId": key}
  });

Also see Mapbox Layer features duplicate IDs