PMTiles is a new project that lets you serve vector map data from static files through the magic of HTTP range requests.

The vector data is entirely served from a static file on this server. Most interactive web maps work by constantly requesting little map images from an external server at different zoom levels. This approach uses much less data and doesn’t require an external server to host all the map data.

Getting this to work was a little tricky, I mostly followed the steps from Simon Willison’s post but I didn’t want to use npm. As I write this I realise that this site is generated with jekyll which uses npm anyway but somehow I would like the individual posts to Just Work™ without worrying about updating libraries and npm.

So I grabbed maplibre-gl.css, maplibre-gl.js and pmtiles.js, plonked them into this site and started hacking around. I ended up mashing up the code from Simon Willison’s post and the official examples to get something that worked.

I figured out from this github issue how to grab a module version of protomaps-themes-base without npm. However I don’t really like the styles in produces. Instead I played around a bit with the generated json styles to make something that looks a bit more like the Stamen Toner theme.

Looking at the source code for protomaps-themes-base I realise I could probably make custom themes much more easily by just swapping out the theme variables in the package.

Todo:

• Figure out how to use maputnik to generate styles for PMTiles.