Mapbox-gl fill layer distorts rendering on higher zoom

0
votes

I'm using mapbox-gl version 0.46.0-beta.1 (With ReactJS).

I've drawn simple fill layers using GeoJSON source.

The coordinates used to draw the fill are

Coordinates Data: Coordinates Data

At a specific zoom level, the polygon renders as expected.

Expected Layer: Expected Layer

But on zooming in, the polygon distorts.

Distorted Fill Layer: Distorted Fill Layer

The code I'm using is:

       `let paint = {
          'fill-color': 'Some Color',
          'fill-opacity': 0.4,
          'fill-outline-color': 'Some Color'
        }
        let uniqueID = 'someuniqueID';
        map.addLayer({
          'id': uniqueID,
          'type': 'fill',
          'source': {
              'type': 'geojson',
              'data': {
                  'type': 'Feature',
                  'geometry': {
                      'type': 'Polygon',
                      'coordinates': [polyCoords]
                  }
              }
          },
          'paint': paint
        })`
2
mapboxmapbox-gl-jsmapbox-gl
There have been a number of geojson polygon fill bugs in the past, so it's possible you've found something like that. Probably best to report it in the Mapbox issue tracker. – Steve Bennett

2 Answers

0
votes

We were able to solve the same problem by making sure the first point in the polygon is also the last. For this polygon, you should add the point:

[28.6045067810482..., 77.3860210554725...]
0
votes

I also had this issue. For a bounding box of coordinates for mapbox, having just the 4 coordinate pairs to create the polygon does create rendering artifacts, directly like above. When making your coordinate bounding box as a polygon, be sure to enter a 5th record, which would be the same as your coordinate at coor[0], where coor is your array of coordinate pairs. You will only notice the weird rendering and re-drawing when zooming, this in fact made it go away for me.

For example:

var coors = [[+sw_lng, +sw_lat], [+sw_lng, +ne_lat], [+ne_lng, +ne_lat], [+ne_lng, +sw_lat]]; //makes a 4 pointed polygon
coors.push(coors[0]);  //then continue