search

mapbox / mapbox-maps-android

Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL.
https://www.mapbox.com/mobile-maps-sdk
Other
481 stars 135 forks source link

Symbol layer with polygon source results in jumping / multiplying icons #1198

Open daniel-j-h opened 2 years ago

daniel-j-h commented 2 years ago

Environment

Observed behavior and steps to reproduce

Hey folks, I'm working with a symbol layer which I style with an image. I'm connecting it to a geojson source with polygon features. When zooming in and out I get unexpected behavior from the icons: sometimes the icons jump between zoom levels, sometimes I get icons multiplying. See the videos attached below.

The polygons I feed into the symbol layer's source are the field polygons you can see in the videos below - I have additional layers for the polygons/fills.

(The label rendering issues are due to https://github.com/mapbox/mapbox-maps-android/issues/1197 please disregard in the context of this ticket)

Expected behavior

I expected one icon per polygon, in the center/centroid of the polygon.

More importantly I expected icons to stay in place when changing zoom levels, and not multiplying.

Notes / preliminary analysis

See #1197 for the symbol layer definition, I do not have any zoom-level dependent styling set up other than min and max zoom.

Additional links and references

Here are two screen recordings showing the issue. The first one shows the icons jumping between zoom levels, the second one shows how the icons seem to multiply when zooming in all the way.

https://user-images.githubusercontent.com/527241/156408716-79eab345-ded5-4efd-aa3a-5a447442f404.mp4

https://user-images.githubusercontent.com/527241/156411708-94a0cbfd-56ab-4bc5-bfbd-d3697bd55e55.mp4

ZiZasaurus commented 2 years ago

@daniel-j-h, thank you for reporting this behavior. I am able to reproduce the issue with the icons multiplying as well and will investigate this behavior.

daniel-j-h commented 2 years ago

Thanks! :raised_hands:

Here's a workaround solving

  1. the icons placement jumping between zoom levels, and
  2. the icons multiplying when zooming in

We can manually transform (multi)polygon to point features e.g. with TurfMeasurement.center and have a GeoJSON source with only these point features; everything else (especially the map style) can stay the same. With point features, these issues are gone.

implementation("com.mapbox.mapboxsdk:mapbox-sdk-turf:6.3.0")
// Upstream issue prevents us from emitting polygons here
// https://github.com/mapbox/mapbox-maps-android/issues/1198
// We work around it by transforming polygons to points (center)

// Add properties to the map features we want to style layers with
// Use id property, so we can use the feature state functionality
// https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfeaturestate
val feature = TurfMeasurement.center(Feature.fromGeometry(poly, null, field.guid))
BlowJohan commented 2 years ago

Same issue, but with text.

BlowJohan commented 2 years ago

@ZiZasaurus Same behavior on IOS. I want to show names of my polygons on the map. But than i zoom in closely (about 13-14 zoom level), my polygon name multiply. Since you started investigate this behavior 7 months is past. Can you please give some update on this bug?

bitcooker commented 6 months ago

You can solve this issue by setting the layout property icon-allow-overlap to true. Please reference this https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/#symbol-layers