search

eurostat / gridviz

A package for visualizing gridded data 🌐
https://github.com/eurostat/gridviz
European Union Public License 1.2
199 stars 10 forks source link

Background Layer from WMS Tiles? #84

Closed wahlatlas closed 1 year ago

wahlatlas commented 1 year ago

What I would like to accomplish is displaying data on the 100m grid from the German census like I've done in QGis

grid100m_title

So far I have the 100m grid data running for the whole of Germany with gridviz, see https://wahlatlas.net/experimente/z11exposee/gridviz/basic.html

However the German mapping authority offers their background tiles only as WMS/WMTS, so an individual tile has the following URL https://sgx.geodatenzentrum.de/wms_basemapde?&service=WMS&request=GetMap&layers=de_basemapde_web_raster_grau&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3035&bbox=4198656.00000592,2939904.000260939,4207104.000005504,2948352.0002606986

whereas the Gisco tiles supported so far by gridviz seem to adhere to the slippy map standard like https://gisco-services.ec.europa.eu/maps/tiles/NaturalEarth/EPSG3035/6/6/5.png

Now I wonder how/if I can make gridviz work with the WMS tiles as I did with e.g. leaflet.
I have looked into The difference between XYZ and TMS tiles and how to convert between them but couldn't figure out how to implement this in BackgroundLayer.js

jgaffuri commented 1 year ago

Gridviz supports only XYZ tiles. We will add WMTS !

jgaffuri commented 1 year ago

WMS background layer was added to version 2.0.22 See: https://eurostat.github.io/gridviz/docs/reference#wms

jgaffuri commented 1 year ago

There are however difficulties to have a proper visualisation when using transparency - as mentioned in issue #83. I will have a look !

wahlatlas commented 1 year ago

This is super helpful, many thanks!

transparency

The regular transparency styling already looks very satisfying in the above example using:

new gviz.SquareColorWGLStyle({ colorCol: "dwell", opacity: (r, zf) => (zf < 800 ? 0.37 : 1), tFun: (value) => gviz.sExp(Math.min(value / 100000, 1), -15) })

All the text from the background layer is readable no matter if covered by transparent layer or not. So far no tests with complex color ramps yet but totally workable already.