Background map and blend modes

[wahlatlas]

Do I understand correctly that part of the perfomance trick gridviz does is, that everything in the viewport is rendered into one canvas element at once and that there are no distinct layers that could be styled individually by css?

I am asking this because background maps can greatly benefit from blend modes, as you can see in this example (1km grid, Census 2011 population counts, mix-blend-mode: multiply)

and I was wondering if this could be achieved with gridviz

[jgaffuri]

Gridviz does not use this css property. This is indeed an interesting perspective !

There are however currently possiblities for transparent styles. See for example for:
https://github.com/eurostat/gridviz/blob/master/docs/reference.md#shapecolorsize-style
https://github.com/eurostat/gridviz/blob/master/docs/reference.md#square-color-webgl-style

I just added these two examples:
https://eurostat.github.io/gridviz/examples/styles/shapecolorsize_transparency.html
https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_transparency.html

[jgaffuri]

See:
https://codepen.io/chriscoyier/pen/oNNxby
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

blend mode:
https://drafts.fxtf.org/compositing/#ltblendmodegt
composite mode:
https://drafts.fxtf.org/compositing/#compositemode

See also: https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/globalAlpha
https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation-dev

[jgaffuri]

It is now handled in version 2.0.49 !
See the example: https://eurostat.github.io/gridviz/examples/blending_alpha.html

It is now possible to specify something like:

   alpha: 0.75,
   blendOperation: "multiply"

at style or layer definition level.

[jgaffuri]

I just published a little change in version 2.0.50: The alpha and blendOperation parameters are now functions of the zoom factor parameter zf:

   alpha: (zf) => 0.75,
   blendOperation: (zf) => "multiply"

In such a way, it may be possible to alter the alpha depending on the zoom level, to make a fading effect for example...

[wahlatlas]

This looks great in Chrome and Safari but gives me a black page in Firefox (102.14esr on Windows10; 117.0 on macOS 13.5.2) once I mouseover the map