TLDR: Maps are easy to get started with if you follow some “common” assumptions. When getting to pin point accuracy, or translating between different models of the earth, maps become difficult very quickly.

Intro

Recently I have been looking a designing frontends for Geospatial applications. There are many good blogs out there (marks blog) for the actual data analysis and geospatial analysis aspect. But I have only found a few good examples of building interactive maps for the web.

assumptions

Open Street Map uses WGS84 (EPSG.) the spherical mercador projection. Why does this matter?

Loose notes:

• leaflet has a lot of features built in and seems like the first thing people reach for displaying geospatial information
• MapLibre GL JS seems like the new library that uses canvas, WebGL2 API, and has a lot of backing from the GIS community

How they work

Both right now are using Open Street Maps tiling service. A tiling service breaks up the world into varying images at different zoom levels. These are all represented via 4 parameters, s,x,y,z

Example using MapLibre

MapLibre GL JS seems to be the best library so far. Additionally they can render things like 3d buildings and elevation for a high-fidelity experience.

MapLibre GL seems like the best out of the box library for displaying geospatial info. I think I would start most frontends with this library and either swap to Leaflet if there is an issue, or build something custom (if MapLibre doesn’t support it then WASM and WebGPU seem like the best fall backs).

MapLibre

Resources

• https://openmaptiles.org/docs/ This allows you to serve your own map tiles similar to OSM via importing a PBF (Protocolbuffer Binary Format). This is ok but there are now new standards for tile serving in the cloud era such as, PMTiles.

• https://protomaps.com/blog/pmtiles-v3-whats-new This allows for the serving of MapTiles via efficient static site serving (e.g. can throw tiles on S3 storage and serve from there). This also makes it easier to do things like write an API on top of geospatial data. This only makes sense if your underlying map is faily static (and you can place a small dynamic dataset on top via MapLibre GL, but need to the load that data into the client browser for combination). If you have a dynamic dataset that must be tied to the underlying map, then there are better alternatives. This blog post from protomaps eloquently describes the different use cases and solutions (https://protomaps.com/blog/you-might-not-want-pmtiles/)

• Running your own tile server on a CDN for production: https://protomaps.com/blog/serverless-maps-now-open-source/