Map Visualisation proof-of-concept

[nf-s]

For proof-of-concept (initial thoughts) - create map visualisation component for zarr and geoparquet (or pmtiles)

• Use (react-)map-libre
  • May also look into DeckGL
• Protomaps basemap for now (is free for non-commercial usage)
• Visualise datasets
  • Gridded datasets
    • Try visualise zarr - this will run into issues - especially for large datasets
    • I will also try generating raster pmtiles for "overviews"
  • Vector datasets (I don't believe we currently have any vector datasets)
    • Try visualise geoparquet directly - this will definitely run into issues - especially for large datasets
    • Can convert to vector pmtiles in the future if needed
• Visualise geometries
  • For now I will generate vector pmtiles for all geometries
• Visualise products
  • This will essentially "join" products (without geometry) with geometries pmtiles
• Geometry editor (there are lots of plugins available)
• Basic map controls
  • Layer selector
  • Legend
  • ...

Comments about potential map viewer

• Someone has created a zarr layer for maplibre - https://github.com/carderne/zarr-gl
• Maplibre has no geoparquet layer that I can see
  • Though there are examples of using DuckDB wasm (which I'm not crazy about) - https://dev.to/camptocamp-geo/querying-overture-maps-geoparquet-directly-in-the-browser-with-duckdb-wasm-4jn4
• DeckGL (loaders.gl) has no zarr layer - and no sign of creating one
• DeckGL does have a GeoArrow (parquet) layer - https://github.com/geoarrow/deck.gl-layers
• It may be possible to use DeckGL with the map-libre backend - and then use the map-libre zarr layer - but not sure this is a good idea
• ...right now I would go with react-maplibre for simplicity - we can try the zarr layer, and then convert geoparquet to pmtiles

[nf-s]

Previous work

This is a very clunky brainstorming on the kind of information people might be able to visualise (you have to zoom right into Manado, Indonesia, to see some grids to click on). The draw tool doesn't actually do anything at present, but you could imagine they would draw and then submit the geometry, which could then go into the next processing run, and end up in the reporting dashboard as strandard processed data (provided permissions, data etc.!)

https://sustainabledevelopmentreform.github.io/GOAP-spatial-framework/

[nf-s]

For stac-geoparquet visualisation

• https://github.com/developmentseed/stac-map

[willjnz]

@alexgleith, @nf-s As discussed today, we want to visualise STAC-Geoparquet (COGs) and Geoparquet in the browser without any server.

We are using MapLibre in the app currently. MapLibre can integrate with deck.gl which would be needed for this I think.

Approach:

1. STAC-Geoparquet (COGs): This looks awesome and also uses MapLibre: https://developmentseed.org/stac-map/ https://github.com/developmentseed/stac-map.
   Then for COGs: https://github.com/geoarrow/deck.gl-layers with DuckDB-WASM. demo: https://developmentseed.org/deck.gl-raster/examples/land-cover/ code: https://github.com/developmentseed/deck.gl-raster

2. Geoparquet: This is a good example: code: https://github.com/dzole0311/deckgl-duckdb-geoarrow/tree/main, demo: https://linked-views-demo.netlify.app/. We might need to check that we are writing our files with Arrow.

@nf-s do you have any thoughts on this? Any objection to integrating deck.gl?

[willjnz]

This visualisation seems pretty simple to implement.

We need to change 2 things for this to work:

• CORS settings on our S3 bucket
• Write parquet files with Arrow encoding for geo column (in Python code)

#35

[alexgleith]

Ping @lars-fillmore for CORS, but i thought that was done

[willjnz]

CORS is configured but only for the depoloyed app, so can't test on localhost:

[lars-fillmore]

I could add * to the AllowedOrigins list, but unsure of the security implications. It is only a Get and HEAD, so maybe * is okay?

[alexgleith]

I personally don't think CORS is a big deal.

I think let's open it up for now please, @lars-fillmore :-)

[lars-fillmore]

@willjnz please test and let me know if the change I have made works :)

[willjnz]

@lars-fillmore thanks it works!

Now I need to ensure the pipeline uses geoarrow to encode the geometry column of our outputs.