(Return to the blog homepage.)
Modern digital maps are "slippy maps". Users expect to be able to drag to pan seamlessly, to scroll or pinch-zoom to scale, and perhaps even to rotate it.
Supporting those operations means that modern maps are vector maps, whose features are digitally composited and rendered on-demand, not raster maps, whose features are presented as static, pre-rendered PNGs.
The globe is huge. If you care only about Tijuana, it makes no sense to ship you data about far-flung cities such as Tokyo and Toronto.
This means there needs to be some way to address the different parts of the globe. Thus, we have tiles, which express:
See zoom levels on the OSM wiki for more.
Since a tile is a collection of features, we need some way to tie the collection of features together at the file-format level. There is a standard container format for vector maps that does this: the MapBox vector tile.
A single tile is not that interesting. Most maps have millions of tiles at different zoom levels. Again, we need some way to tie the collection of tiles together at the file-format level. There are two standard container formats: MBTiles and PMTiles. PMTiles is newer, and requires no server process. Instead, such files can be hosted on Amazon S3 or Cloudflare's R2.
Most humans aren't very good at reading binary file formats. Instead, you author a MapLibre Style file that describes how a renderer ought to display your tiles. Then you use a renderer, like MapLibre GL JS on the web, or MapLibre Native on mobile.
But wait, where did you get your tiles from?
OpenStreetMap provides a crowdsourced, planet-wide database of geographic features. You can work with the entire planet, or a smaller extract from GeoFabrik or BBBike. These extracts are provided as PBF files, and must be converted into a tileset.
To convert a PBF into a tileset, you'll use a tile factory such as tilemaker, planetiler or OpenMapTiles.
Phew, it's a lot! This isn't meant to be a how-to guide -- just to orient you to the problem domain.