ImageSource: updateImage() doesn't render properly if the size of the image changes to a smaller size - Githubissues

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

https://docs.mapbox.com/mapbox-gl-js/

Other

11.19k stars 2.22k forks source link

ImageSource: updateImage() doesn't render properly if the size of the image changes to a smaller size #13306

Open rory-orennia opened 1 week ago

rory-orennia commented 1 week ago

mapbox-gl-js version: 3.7.0

browser: Vivaldi, but it doesn't matter

Steps to Trigger Behavior

Call source.updateImage() on an image source while using an image that has a new size
See that the rendering is off now
Change the link for the mapbox-gl library to 3.6.0 instead of 3.7.0
Re-run. Both images are fine now

Link to Demonstration

https://jsfiddle.net/kx7mrb62/

This has 2 sources slowly diverging left and right and flipping between a 5px and a 24px image. The one on the left uses source.imageUpdate() and the one on the right deletes and re-creates the layer and source every time
if you update the mapbox-gl link to use 3.6.0 instead of 3.7.0 both images are identical

Expected Behavior

The image should be re-mapped to the coordinates with it's new size taken into account

Actual Behavior

The Bigger image size works fine, but if the image size shrinks the whole effect breaks

rory-orennia commented 1 week ago

Side question: Why does mapbox seem to drastically lower the fidelity of images added to the map this way? That 24x24 px emoji in the example above looks like it's been crushed down to a way lower resolution. I'm noticing the same behaviour in our production application