2

I am experiencing some strange behaviour of fill opacity settings. This happens on Circle and semi-Circle markers. FillOpacity is not set explicitly and is using default values.

My scenario is described below (simplified version can be tested in following JS Bin

I am having more than 100k semiCircles, which are defined in a canvas element for faster rendering.

For each zoom level bigger than 10 different radii are defined, so that to have a readable map. The higher the zoom, the smaller the radius. After "zoomend" event is fired, the current zoom is defined and the corresponding radius is set to the circle with:

layerSites1.eachLayer(function(layer) {
    return layer.setRadius(rad1); 
});

After zooming in (usually to the maximum) and when I start zooming out the density of fillOpacity changes - it becomes darker. This can be fixed even with the smallest move of the map. Sometimes the complete circle is with darker fillOpacity, sometimes just a part of it. Below you can find examples for both cases: Complete circle Part of circle

The above mentioned JS Bin example can be tested - the change of fillOpacity is more visible on the red circles. You need to fully zoom in and then zoom out, so that to observer the effect. If this does not happen the first time, try again to zoom in and then zoom out.

I will be grateful for any suggestion whether I am doing something wrong or it is an issue of browser rendering, or something else. I tested it with Chrome, Chromium, IE and Firefox.

Thank you!

Ivaylo
  • 395
  • 4
  • 15

1 Answers1

1

It seems there's a timing issue between zoomend events and the actual redrawing of the canvas. Maybe an issue worth raising on GitHub, but in the meantime, letting the call stack clear and only then setting the radius seems to do the trick:

setTimeout(function() {
    layerSites1.eachLayer(function(layer) {
        return layer.setRadius(rad1);
    });
}, 0);

Here's an updated JsBin

nikoshr
  • 32,926
  • 33
  • 91
  • 105
  • Your solution did the trick also on my large map with 100.000+ markers :) In fact I was desperate and removed the filling of markers, but now I can return to my original idea thanks to you. I will report that on GitHub. Thanks so much, nikoshr! – Ivaylo Apr 13 '18 at 16:44
  • Hi @nikoshr. As you suggested I opened an issue on Github. One more thing, which is described also there. As I confirmed your work-around works very good when zooming in and out. But the new problem is that whenever you move the map (not zooming) the distorted fill opacity is redrawn again. [The issue on Github](https://github.com/Leaflet/Leaflet/issues/6137). – Ivaylo Apr 16 '18 at 13:09