Drawing of layers changes randomly with zoom in and zoom out

[fedeojeda95]

After upgrading from version 3.7 of the iOS SDK to version 4.1, the behaviour of layers has been inconsistent. Particularly, the drawing of layers from a GeoJson has been extremely inconsistent. With some layers, specifically lineLayers, the drawing is changed unexpectedly when zooming in and zooming out.

To give some context for the issue, I'm adding a single GeoJson source (MGLShapeSource created with a MGLShapeCollectionFeature). Afterwards, I'm adding several MGLLineStyleLayer with that source.

As en example, when I load a map with the GeoJson and it's layers, it looks like the following:

When I zoom in a little bit, the drawing changes completely, by removing some parts and adding some unexpected ones

When I zoom out, it changes how the layers are drawn in an even weirder way, by adding one line:

In order to verify that the source (the GeoJson) is correct and is not a malformed json, I tried using the web http://geojson.io/. When putting the GeoJson used as the source there, it shows it correctly, as it is first rendered.

On our application, we also implemented the touch event on each feature in order to show a small callout view. Even though the shape is drawn incorrectly, the touch events are recognized on the original lines (where the correct shape should be drawn). I believe this may imply that the source and layers are correct, but the drawing is wrong

I could not find any reason why this could be happening. Even though I used this example, this is happening with several sources and layers of different types. If you need any further information on how to reproduce this, please feel free to ask for it.

Steps to reproduce

1. Add a source from a GeoJson to the style
2. Add a layer lineLayer to the style
3. Zoom in or zoom out

Expected behavior

The maps renders correctly with the layers

Actual behavior

The layers are not shown correctly, the drawing changes randomly

Configuration

Mapbox SDK versions: 4.1.1, but happens with every 4.* version iOS/macOS versions: 11.2, but happens with any version Device/simulator models: iPhone 8 (Real device), iPad Pro (Simulator), iPhone X (simulator). I haven't found a device where it doesn't happen Xcode version: 9.2

Thank you very much!

[julianrex]

Thanks for the report @fedeojeda95.

Out of curiosity, have you tried this on Android?

[julianrex]

/cc @kkaefer @jfirebaugh

[fedeojeda95]

Thanks for the answer @julianrex. The exact same source and layers on Android work perfectly on version 5.5.1 of the Android SDK.

[jfirebaugh]

Can you post the GeoJSON?

[fedeojeda95]

Hi @jfirebaugh. I can post the GeoJson, indeed. I'd like to remind that it's not only happening for this specific GeoJson, it's happening for a lot of different ones. I'll post it nevertheless.

Click to expand geojson...

``` { "features" : [ { "geometry" : { "type" : "Point", "coordinates" : [ -98.501616004484546, 29.434934519222111 ] }, "id" : "6485605fa0865d6f29ba466799920e03", "type" : "Feature", "properties" : { "mobileId" : "F8EBD1AD-87AC-4281-934F-A29005342A45", "visibility" : true, "toolId" : 11, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.502123106350197, 29.434748654154035 ] }, "id" : "aff0a89c2564fba6b3f70ab885b319b0", "type" : "Feature", "properties" : { "mobileId" : "574F840F-3F1B-41B2-86DD-A1F85F1D7492", "visibility" : true, "toolId" : 11, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501455454852803, 29.434692383013669 ] }, "id" : "c449b933bc54338de6a4ff47322936ec", "type" : "Feature", "properties" : { "mobileId" : "FFA2280C-654F-4C80-9D3E-587CC71DE54C", "visibility" : true, "toolId" : 18, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501927314125481, 29.434861196341274 ] }, "id" : "bf44bdb4ab578999da015bfd99d35c33", "type" : "Feature", "properties" : { "mobileId" : "DCD0B901-0DBA-43E8-9DD4-74EC8309A082", "visibility" : true, "toolId" : 9, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.502076116218916, 29.434503107121486 ] }, "id" : "9d18af0387c4aec9d814ba19b7c162d5", "type" : "Feature", "properties" : { "mobileId" : "3E4680CE-A8F1-4239-BE11-9F1420F65F65", "visibility" : true, "toolId" : 5, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501944935425627, 29.434330882799031 ] }, "id" : "bde62f77c63c8f018a6032dbba861ac4", "type" : "Feature", "properties" : { "mobileId" : "98A6B75F-8541-4C5A-B2CF-D3C8B8526FE0", "visibility" : true, "toolId" : 12, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501741311508681, 29.434148427018968 ] }, "id" : "8b00dbd2205c446dafce64545de29955", "type" : "Feature", "properties" : { "mobileId" : "32B4789A-740F-4AAD-9732-39742532CC9A", "visibility" : true, "toolId" : 16, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501494613299201, 29.43423880235251 ] }, "id" : "5f9cbe72b4943d3924432c1100884870", "type" : "Feature", "properties" : { "mobileId" : "F44115F8-155C-4072-B78F-9A4DD7D2BF0C", "visibility" : true, "toolId" : 7, "toolType" : "icons" } }, { "geometry" : { "type" : "Point", "coordinates" : [ -98.501296863151396, 29.434380333369674 ] }, "id" : "ac0204884c33a746bdcf3bd56c42dd3b", "type" : "Feature", "properties" : { "mobileId" : "03D07442-F533-4FA3-A5B3-070CA2D7A4EF", "visibility" : true, "toolId" : 3, "toolType" : "icons" } }, { "geometry" : { "type" : "Polygon", "coordinates" : [ [ [ -98.502326406661794, 29.434501838623198 ], [ -98.502345213501997, 29.434492639274598 ], [ -98.502353218537493, 29.434493687797701 ], [ -98.502499544278905, 29.434691508741398 ], [ -98.5024841760589, 29.434699015555601 ], [ -98.502426250895098, 29.434727384934199 ], [ -98.502322584314399, 29.434778170463002 ], [ -98.502184302293799, 29.434845665794299 ], [ -98.502039493167203, 29.4349167729534 ], [ -98.501899600793493, 29.434985307761899 ], [ -98.501635435482697, 29.435114629343001 ], [ -98.501567852505303, 29.435011518699199 ], [ -98.5015031813859, 29.434911417251101 ], [ -98.501427442345303, 29.434793450286101 ], [ -98.501351355127497, 29.434675049770402 ], [ -98.501287520019105, 29.434583911243401 ], [ -98.501213086901501, 29.434463307969001 ], [ -98.501135133888198, 29.434340798465598 ], [ -98.501416140092005, 29.434198038580799 ], [ -98.501544167102296, 29.434133198263201 ], [ -98.501708380091799, 29.434380725469602 ], [ -98.501768293139193, 29.4344714855417 ], [ -98.501843581788805, 29.4345850239201 ], [ -98.501920274045403, 29.434701202223501 ], [ -98.501967105569193, 29.434678247962498 ], [ -98.501904083983405, 29.434582921546902 ], [ -98.501840885507406, 29.434487324649901 ], [ -98.501781309634097, 29.434398432742402 ], [ -98.501711234842901, 29.434291244359802 ], [ -98.501589213533407, 29.434109108686101 ], [ -98.501802807047298, 29.4340028375393 ], [ -98.501930601431098, 29.434121519015399 ], [ -98.502016884009194, 29.4342041572631 ], [ -98.502151478143006, 29.434333589595699 ], [ -98.502238009542396, 29.434416005753501 ], [ -98.502326406661794, 29.434501838623198 ] ] ] }, "id" : 189.16857770041267, "type" : "Feature", "properties" : { "name" : "Boundary", "toolId" : 2, "toolType" : "polygons", "mobileId" : "38672B26-D90A-4F42-933C-280DBEEFAF88", "visibility" : true, "color" : "#D40000", "fill" : false, "id" : 189.16857770041267, "code" : "polygon-boundary", "opacity" : 1, "fillWidthOpacity" : 1, "fillOpacity" : 0, "fillWidthColor" : "#FFF", "area" : "Area: 2.039 acres" } } ], "type" : "FeatureCollection" } ```

Hope this helps to reproduce it. Thank you very much!

[julianrex]

@fedeojeda95 I'm unable to reproduce your case with a simple line layer. Are you able to share a sample project that demonstrates the problem?

[fedeojeda95]

Hi! I created a sample project where I could reproduce the bug. I pushed it on a repo because I didn't know another way to send it. I commented out the method in the AppDelegate where the API key is set for obvious reasons. The url is the following one: https://github.com/fedeojeda95/MapboxDrawingBug

Here is a GIF of what's happening. On the original project, it happens even more.

I tested it both on simulator and on a phisical device (iphone 8). Thanks!

[julianrex]

Thanks @fedeojeda95 - can confirm I'm seeing the same results as you, so thanks so much for the sample project.

/cc @kkaefer

[mourner]

Heads up that @mollymerp just confirmed that https://github.com/mapbox/mapbox-gl-native/pull/12982 fixes this issue! 🎉

[fedeojeda95]

Sounds good! I'll try it out as soon as that is merged and a version is release 🎉

[mollymerp]

closed by #12982

[lfofelipe]

The bug persists on SDK 7.1.1 [android version]