www.opendem.info/bathymetryviewer_cog.html
To get rid of backend components (database, mapservers, web application containers) modern geodata formats like Vector Tiles and Cloud Optimized Tiffs (COG) were tested.
Bathymetry COG is a derived product from the GEBCO 2021 Grid, made with NaturalEarth.
Marine labels and countries were made with NaturalEarth.
The COG used has one band with a colour palette. Unfortunately, this was not used out of the box.
The use of style expression with 'match' leads to artefacts at the edges of the classification (image below).
Figure 1: Rendering the image with a match expression
This is why the style expression 'interpolate' was used here.
Figure 2: Rendering the image with a interpolate expression
In the higher zoom levels, most of it looks very smooth, but there are also artefacts like in Figure 2. In this case, I would have preferred the pixelated display to better reflect the spatial resolution.
Both style expressions are available in main.js for testing.
Vector tiles were made with GDAL. Have a look at the OpenDEMsearcher GitHub Repo for more information about Vector Tile processing.
At the higher zoom levels vector tiles were used with labels along the lines. Unfortunately, the labels are not rendered in all regions.
Only level 11 was processed for the contour lines to save hard disc space. However, the geometries also match the display in the WMS in the larger zoom levels.
Out-of-the-box labels of polygon GeoJson layers are only rendered at the centre of the polygon. A polygon to point conversion for a GeoJson layer has now simply been carried out here to save resources. The scale was taken into account during rendering.
Compared to backend-based standard services, modern technologies without a backend may not be quite as advanced, but they have great potential.
The map client can be compared directly with the standard WMS applications:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent