search

maplibre / maplibre-native

MapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.
https://maplibre.org
BSD 2-Clause "Simplified" License
1.03k stars 300 forks source link

Awkward animation of dashes at certain zoom levels #2433

Open Helium314 opened 4 months ago

Helium314 commented 4 months ago

Describe the bug When crossing certains zoom levels (possibly near whole numbers, but I did not check), dashed lines have some sort of animation, which look out of place.

https://github.com/maplibre/maplibre-native/assets/43007630/2db05c9a-d582-4a53-b75c-1d91715a3a16

To Reproduce Steps to reproduce the behavior:

  1. Have a line layer with dashes, in this case { "id": "steps", "source": "jawg-streets", "source-layer": "road", "filter": ["all", ["in", ["get", "class"], ["literal", ["path"]]], ["in", ["get", "type"], ["literal", ["steps"]]], ["==", ["geometry-type"], "LineString"], ["!", ["in", ["get", "structure"], ["literal", ["bridge", "tunnel"]]]]], "type": "line","paint": {"line-color": "#f6eee6", "line-width": ["interpolate", ["exponential", 2], ["zoom"], 14.0, 0.35, 16.0, 0.7, 24.0, 179.2], "line-dasharray": [0.6, 0.4]} },
  2. Scroll map to have some dashes in view
  3. Zoom

Expected behavior Dashes should appear stable, i.e. without anything moving.

Platform information:

westnordost commented 4 months ago

The same issue exists for maplibre-gl-js. (Test by zooming in on some steps here https://streetcomplete.app/map-jawg/)

1ec5 commented 1 month ago

Mapbox removed the dash transition in mapbox/mapbox-gl-js#12326 (after the fork). The rationale in mapbox/mapbox-gl-js#10605 was that, apart from looking funky, it also complicated adding support for data-driven styling with line-dasharray: maplibre/maplibre-gl-js#1235.

westnordost commented 1 month ago

The issue occurs because MapLibre assumes that the map style itself does not dynamically interpolate the size of the (dashed) lines depending on the zoom level. The style used in the the StreetComplete style linked above scales the line-widths of roads, outlines etc. with the zoom level while most other styles don't.

westnordost commented 1 week ago

(FWIW, reproducible with org.maplibre.gl:android-sdk:11.3.0-vulkan-pre0)