Dragging/Panning the map on a current iPad pro running iOS 16.5.1 I experience the following – even without WMS background layer:

• the map only moves after I am ending the drag with a touch end

Will post a video of the observed behaviour versus the expected one.

There is currently no clear way to add a line layer.

I am trying to add an extra 'boundaries' layer on top of NUTS2JSON and struggling with it.

For example, users might want to add line layers that might not necessarily be boundaries: https://eurostat.github.io/gridviz/docs/reference#showing-boundaries

If the geographic distance between two point locations in a three.js scene is 5000 why does a Three.Points geometry not fill this space if PointsMaterial.size is set to 5000?

At the moment, the population/scale thresholds for requesting placenames do not work for different datasets. A new dynamic approach is required for defining the thresholds in the defineWhere() function.

Tooltip not working for single CSV file datasets

See https://eurostat.github.io/gridviz/examples/test/single_csv_bugs.html

on both mobile and desktop, the tooltip of a clicked cell can appear off the screen

Check these examples:

Pinch to zoom on a GridViz instance that takes the whole window works like expected, e.g. this one, where the zoom center roughly stays the same
https://eurostat.github.io/gridviz/examples/DE.html

Pinch to zoom in an embedded view (Observable or other) zooms the map but also moves the map in a north-eastern direction so that the detail you wanted to zoom in moves out of the viewport, e.g. in this example
https://observablehq.com/d/3d1d998ba43e1f69

See video here for detail on an iPad pro (iOS 17.1)
https://wahlatlas.net/experimente/testcases/gridviz_pinch_zoom_issue118.mp4

in the video the issue may look subtle, but there are cases, smaller embed, more removed from window edges, where this makes zooming on touch devices a two part action: first zoom, then drag backwards to the original position

I have to admit, I am new to aria labels but it looked to me as if the tooltip would not be read by VoiceOver (screenreader assistive technology built into MacOS) until I injected the following aria labels

d3.select("#tooltip_eurostat").attr("role","tooltip").attr("aria-live","polite")

I could see some real world use cases, here's a photohopped version of how I imagine this.
Probably the additional text-layer would only make sense on lower zoom factors.

I implemented csv-tiling in Python/Pandas and it seems to work reliable, so wanted to share a Jupyter Notebook and am glad to listen to suggestions

https://github.com/wahlatlas/grid_data/blob/main/gridviz_tiled_csv.ipynb

Open
https://eurostat.github.io/gridviz/examples/blending_alpha.html
in Firefox (tested with 117.0.1 on macOS 13.5.2 and 102.14esr on Windows 10)

looks like expected at first:

but turns into a black page the once you mouse over the map:

Navigate to a gridviz map on a mobile device > double tap the screen > watch the chaos ensue

(tested on android)

Not sure if the donut shape is an established cartographic style in that the outer diameter always equals the grid-size and only the inner diameter is controlled by data but this is what the current implementation in gridviz looks like to me and looks convincing when used on its own.

What I wanted to experiment with, is a ring around a pie chart, maybe as a border or drop shadow or to encode some additional variable. That might turn out to be aesthetically displeasing but I'd like to hear your opinion.

within the TextStyle

the following works

        text: (v) => v >100 ? v : '',  
        fontSize: (v, r, s, zf) => zf >1 ? 0.4*r : 0.6*r,
        color: () => 'lime',

but this doesn't (always results in purple or no text)

        color: (v, r, s, zf) => zf >2 ? 'lime' : 'purple',
        text: (v, r, s, zf) => zf >2 ? v : '',

what am I doing wrong?

the original example has the following for color

        color: (v, r, s) => d3.interpolateSpectral(1 - (v - s.min) / (s.max - s.min))

but it should work without D3-scales, I guess
and, more importantly, it should also work dependent on zoom factor

as per
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

the default value for CanvasRenderingContext2D.globalCompositeOperation

is source-over

therefore, if we change the following in GridViz (/src/App.js)

//restore default alpha and blend operation
this.cg.ctx.globalAlpha = 1.0
this.cg.ctx.globalCompositeOperation = "normal"

to

this.cg.ctx.globalCompositeOperation = "source-over"

BlendModes work identical in Firefox as in Safari, see here in action
https://wahlatlas.net/experimente/z11exposee/gridviz/blendMode_Test.html#!4194642,2998537,0.27

Hope I don't imagine it but initialy I found WMS tiles to load after a significant pause compared to QGis from the same tile server. However while experimenting with the maxZoom setting in .addBackgroundLayerWMS({ leaving out the maxZoom statement resulted in faster loading and a better initial experience (tests on retina displays):

before (maxZoom: 50)

after (//maxZoom)

I tried everything, obeyed every comma and bracket, different ordering, but it seems that data pre-processing and cellInfoHTML are not possible in the same layer. Once you use preprocess everything in cellInfoHTML will be ignored and you just get the default tooltip with column name and value.

Among your examples I couldn't find an example that uses both.

• Add example with NO population - as sparkline ?
• Add example with some climatic indicator

This is a bug related with d3 zoom. If the camera is moved using center([x,y]), then the first pan or zoom event will jerk the camera back to origin [0,0]. This does not occur on desktop.

https://github.com/eurostat/gridviz/blob/master/docs/reference.md#background-layer

looks like the wms background layer does not offer filterColor

also, it is probably

filterColor: (zf) => "#ffffff66",

instead of

filterColor: zf => "#ffffff66",

Should #110 turn out to achieve cross-browser and cross-os compatibility for blendmodes, please add the

blendOperation: (zf) => zf<1 ? "multiply" : "none",

syntax to the documentation

The envelope which is sent to the arcgis server placenames service needs to be taken from the bounding box of the Three.js world.

I have to admit that I haven't fully understood how the legend works but by default it seems to be appended to the body element which is not ideal when used within larger pages where the map doesn't fill the whole viewport.

Might it be preferable to attach legend and tooltip div to the viz-container instead?

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

Hi,
is there a possibility to use GridViz with React directly?
Or is the current workaround to integrate it with leaflet?

Thanks and best regards :)

There's a little copy&paste thing in the documentation
https://eurostat.github.io/gridviz/docs/reference#app-options-object

from the three zoom/pan events in the options object

onZoomStartFun: (event) => {
    console.log('pan/zoom start', event)
},
onZoomFun: (event) => {
    console.log('zoom', event)
},
onZoomEndFun: (event) => {
    console.log('pan/zoom end', event)
},

it looks to me as if the onZoomStartFun event doesn't fire
I do see "zoom" and "pan/zoom end" in the console but never "pan/zoom start"

It would be nice to have a way to include easily some zoom in/out buttons. With "+" and "-" text.
Just like we have in https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/grids

Maybe something similar to what exists in openlayer and leaflet, see:
https://openlayers.org/en/latest/apidoc/module-ol_control_Zoom-Zoom.html
https://leafletjs.com/reference.html#control-zoom
https://www.tutorialspoint.com/leafletjs/leafletjs_controls.htm

Currently, the div id is given to legendDivId option:
const map = new gridviz.Map(document.getElementById('map'), { x: 4500000, y: 2900000, z: 1000, legendDivId: 'ext_legend' })
instead, it should be a container. So that we can do instead something like:
const map = new gridviz.Map(document.getElementById('map'), { x: 4500000, y: 2900000, z: 1000, legendDiv: document.getElementById('ext_legend') })

Have to investigate further and create example
this is 100m-grid-data with wms background.

works as expected in this zoom level

same area as above but zoomed in further. results in data grid showing gaps:

@joewdavies et al, once again this is great stuff! keep up the great work!

Would love to use the GridViz to display some grids and I have a 100m resolution tif that even if I rescale it to 1k yields about 200MB as a CSV. As a tif, it has about 2MB ...

I see that you have some tif files in your assets:
https://github.com/eurostat/gridviz/tree/master/assets/tiff/test

CSVs can be very inefficient as they repeat coordinates of the regular grid. An ASC file would reduce that size a little as the first rows define the grid.

But I can't see any reference to the tif assets usage. Are you planning to have some methods to visualize it?

Cells appear too large when gridviz is rendered in a container that doesn't take full screen width and height

This is 1km grid I assume and therefore the tooltip value looks more plausible to me than the color key

Source atlas.zensus2011.de

The tooltip position is not right. It happens in observable, and in general when the map is not at the top left of the browser window.
See: GridViz/examples/tooltip.html

The mouse position data seems not to be the right one.

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

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

Not sure if selectionRectangleWidthPix is an SVG rect and if you've experimented with non-scaling-stroke
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect

On some zoom-levels the selectionRectangleWidthPix gets too thick for my taste, overlapping neighboring cells significantly, but maybe that's intentional for better discoverability?

This looks like a terrific project that could solve a lot of challenges I regularly face. However it seems to me that tiling the csv-files for larger geographies is crucial. Do you have any preliminary documentation of the format no matter how rough around the edges it may be.

Also how did you create the files for your example. Is there any R or Python code to prepare the tiled csv format? That would obviously be even more appreciated than an elaborate documentation of the format.

Thanks in advance!