search

Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
593 stars 192 forks source link

fillOpacity changes on zoom #230

Closed crazicus closed 4 years ago

crazicus commented 4 years ago

Something I've noticed while working on my project is that polygons with transparency get more opaque during zoom-in and zoom-out events. You can see this behavior in the gif below.

Transparency issues

I suspect that this is due to the tiles loading/unloading, but I'm not entirely sure of this. Has anybody else run into this issue?

IvanSanchez commented 4 years ago

IIRC this is due the tile pruning algorithm in core Leaflet: when zooming in, any tile is kept in the screen until all 4 "child" tiles are visible and fully opaque (after a short fade-in transition). This is really hard to work around, as L.GridLayer in Leaflet core is unable to clear part of a tile when the corresponding child tile is loaded (or even notify when part of a tile should be cleared; and something similar happens when zooming out).

The workaround is to put the VectorGrid in a separate pane (see https://leafletjs.com/examples.html ), and set the opacity of that pane via CSS.

crazicus commented 4 years ago

Ah okay, that fixed the issue, but also raised another. The behavior I had set up previously would increase the opacity on a feature when moused over, but now this doesn't work as the layers base style is set to an opacity and fillOpacity of 1, so the opacity can't increase on mouseover. Do you know of a workaround for this?