Polygons partly not rendered on higher zoomLevels

[fvieira]

NOTE: Just before submitting this issue I found out why it was happening and how to easily fix it. I decided to open the issue anyway because the mistake seems easy to make and someone else might be experiencing the same problem and this makes the fix more googlable. If you're looking for the fix, just skip to my first comment.

Describe the bug Polygon features in a ShapeSource with FillLayer and/or LineLayer, ofter get cut off on higher zoomLevels. It often happens after level 14, but I've seen it happen after 12 too.

Example of Polygon at zoomLevel 13.99:

Example of Polygon at zoomLevel 14:

To Reproduce Just replace your App's main render method with the following:

<MapboxGL.MapView style={{flex: 1}}>
      <MapboxGL.Camera
        centerCoordinate={[-7.946227, 39.589127]}
        zoomLevel={14}
      />

      <MapboxGL.ShapeSource
        id="source"
        shape={{
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-7.941227, 39.584127],
                [-7.951227, 39.584127],
                [-7.951227, 39.594127],
              ],
            ],
          },
        }}>
        <MapboxGL.FillLayer id="fill" style={{fillColor: 'blue'}} />
        <MapboxGL.LineLayer
          id="line"
          style={{lineColor: 'red', lineWidth: 2}}
        />
      </MapboxGL.ShapeSource>
    </MapboxGL.MapView>

Expected behavior Polygons show correctly on all zoomLevels.

Versions (please complete the following information):

• Platfrom: Android (haven't tested iOS, no idea if it has same problem)
• Device: Moto G7 Power
• OS: Android version 9
• react-native-mapbox-gl/maps Version: 7.0.9
• SDK Version: ???
• React Native Version: 0.61.5

Additional context What gets cut from the polygon varies depending on where it is. For example, just replacing the polygon's coordinates with these below

[-7.941227 + 0.1, 39.584127],
[-7.951227 + 0.1, 39.584127],
[-7.951227 + 0.1, 39.594127],

results in the triangle being cut in two places (see below).

[fvieira]

So, the mistake here is that a proper Polygon must have the first coordinate repeated at the end. If we replace these coordinates

[
    [-7.941227, 39.584127],
    [-7.951227, 39.584127],
    [-7.951227, 39.594127],
],

with these

[
    [-7.941227, 39.584127],
    [-7.951227, 39.584127],
    [-7.951227, 39.594127],
    [-7.941227, 39.584127],
],

everything works properly.

This mistake is very easy to make because 1) the repetition seems unecessary and 2) this actually works for most zoomLevels. I think react-native-mapbox-gl/maps could do a better job here, either by actually working without the repeated coordinate, or at least warning the user if the repeated coordinate is not there.

Anyway, feel free to close this issue, it's googlable purpose has been fulfilled.

[kristfal]

We, Mapbox, and really any well used GIS library are following the GeoJSON specification for JSON-based polygon definitions.

We should not deviate from it as it a well established and widely accepted specification. If you want convenience methods for creating polygons, I'd recommend turf.js.

[kobagapu]

Hi @kristfal @fvieira @cheeaun can we have any examples for draw a polyline in Reactnative App using mapbox

[ferdicus]

@kobagapu, there are several examples in the /example app with polylines. Please have a look there.

[kobagapu]

@ferdicus Example app is not working build failed with message env.json file missing

[ferdicus]

@ferdicus Example app is not working build failed with message env.json file missing

Did you check the README.md?

[kobagapu]

@ferdicus Added accesstoken.js file with my access token in root folder it comes error with below attachment

[mfazekas]

@kobagapu have you also ran npm install after adding accesstoken as described bellow?!

https://github.com/react-native-mapbox-gl/maps/tree/master/example#installation

[kobagapu]

@fvieira is it possible to draw a polygon dynamically with out using JSON or static Coordinates only onpress method pick coords and draw the polygon