How does VersaTiles work?

There are a lot of excellent FLOSS solutions for generating, processing, serving and rendering maps. But in the end you have to combining multiple solutions and build a complete tech stack to generate and serve maps. That takes a lot of effort.

VersaTiles tackles this by defining a 5-step process chain defining how to process OpenStreetMap data and serve it as an interactive web map. It also provides a reference implementation of these 5 steps, but is flexible enough, so that every step can be replaced by your preferred solution. So if you want e.g. a different tile source, a different server or a different frontend, you can just replace the relevant part and still use the other steps.

The 5 steps of VersaTiles

OSMGenerator.mbtilesConverter.versatilesServerHTTPProxyHTTPSFrontendWeb
The grey boxes represent data. Red boxes are steps that process the data.
The whole process chain uses OSM data as input and generates a web map as output.

The process chain in more details:

OSM Using the latest OSM dump …
Generator Generator produces vector tiles.
We are using tilemaker to generate vector tiles in shortbread scheme.
.mbtiles But .mbtiles is an annoyingly bad file format, especially for scalable infrastructures, so …
Converter Converter prepares these tiles for the server
by precompressing, cleaning and converting them to…
.versatiles a versatiles container, a much more simpler and efficient file format.
Server Server is serving the vector tiles.
HTTP … but only speaks HTTP, because …
Proxy Proxy is handling network stuff
like TLS certificates, caching, load balancing, CORS etc.
HTTPS Now we have a running server infrastructure,
so we can put in front of it a …
Frontend Frontend loads and renders the vector tiles.
Web Enjoy.

We combined permissively licensed open source software, data, schemes and styles, such as tilemaker, Geofabrik Shortbread and MapLibre.

VersaTiles lets you use OpenStreetMap based vector tiles, without any restrictions, locked-in paid services or attribution requirements beyond OpenStreetMap. You can use the freely downloadable tilesets from VersaTiles on your own infrastructure, in any way you like. Our open spec, royalty free and permissively licensed container format works with virtually any webserver or CDN — with no requirement to pay unreasonable prices for "Tiles-as-a-Service".

How is it constructed?

There are multiple ways to walk these 5 steps. (You can skip the first two by downloading the latest tiles.)

We cover all these steps with multiple implementations and Docker containers. You can find all repositories on GitHub. To give you a rough overview we created this flow chart.

OSMGenerator.mbtilesConverter.versatilesServerHTTPProxyHTTPSFrontendWebversatiles-tilemakerDocker Containerversatiles-rsRust Packagenode-versatilesNPM PackageversatilesDocker Containerversatiles-nginxDocker Containerversatiles-frontendDocker Containerfrontend.tarFileversatiles-tilemakerDocker Containerversatiles-nginxDocker Containerversatiles-frontendDocker ContainerversatilesDocker Containerversatiles-rsRust Packagenode-versatilesNPM Packagefrontend.tarFilestyles.tarFilesprites.tarFilefonts.tarFileversatiles-dockerGitHub Repositoryshortbread-tilemakerGitHub Repositoryversatiles-rsGitHub Repositorynode-versatilesGitHub Repositoryversatiles-specGitHub Repositoryversatiles-fontsGitHub Repositoryversatiles-spritesGitHub Repositoryversatiles-stylesGitHub Repositoryversatiles-frontendGitHub Repositoryversatiles-websiteGitHub Repositoryversatiles-docsGitHub RepositoryHow does VersaTiles process OpenStreetMap data to create an interactive web map?Which container, package or binary can cover which part of this process chain?How do container, package or binary build on each other?Which repositories produce which container, package or binary?