Leaflet overlapping polygons merge before applying opacity

Question

I have a leaflet map to which I add hundreds of polygons. It happens sometimes that there are numerous polygons overlapping at the same point, adding their opacity and in the end making it impossible to see the base map.

A minimum example of overlapping polygons adding their opacity

The way I add the polygons to the map is as follows:

map = L.map('map');
var coveragePane = map.createPane('coverage');
coveragePane.style.opacity = 0.2;

let geojsonBlue = L.geoJson(data, 
  {
    stroke: false, 
    // fillOpacity: 0.25,
    fillColor: "#0000FF",
    zIndex: 25,
   }
);
geojsonBlue.addTo(map, {pane: 'coverage'});

As can be seen in the above code I have tried adding the polygons with full opacity to a pane and then setting the opacity of the pane to be transparent. This however seems to recursively set the opacity of the layers and not the whole pane as one solid layer.

Previously I have also tried merging the polygons using Turf.js union which gave a good result. This however is computationally expensive and impractical for hundreds of polygons. It also makes it difficult to dynamically add and remove layers one by one.

Is there another way one can merge the rendered polygons (in the rasterized world, not the vector world) before applying the transparency/opacity.

One question mentions D3.js, but I'm not sure if that is relevant for polygons.

I'm also thinking of rendering the polygons to PNG map tiles on the server and serving the rasterized tiles out and applying the opacity to them. But what tool can I use on the server to do this?

See this example of what I'm trying to fix.

IvanSanchez IvanSanchez · Accepted Answer · 2019-07-05T13:31:05

Is there another way one can merge the rendered polygons (in the rasterized world, not the vector world) before applying the transparency/opacity?

Use a L.Canvas as the target L.Renderer for the polygons, then apply the opacity to the corresponding HTMLCanvasElement or one of its parents - e.g. the Leaflet pane containing the HTMLCanvasElement.

e.g.:

map.createPane('semitransparent');
map.getPane('semitransparent').style.opacity = '0.5';
var canvasRenderer = L.canvas({pane: 'semitransparent'});
L.polygon(..., {renderer: canvasRenderer}).addTo(map);
L.polygon(..., {renderer: canvasRenderer}).addTo(map);

It's kinda a hack, but should work for your use case.

Leaflet overlapping polygons merge before applying opacity

1 Answers