Protomaps – Self Hosted Maps and Map Tiles

It's tough to self-host the maps for Indie users. We usually host the wrapper and styles but end up using third-party tile providers. Even though there are good FOSS options for that, it's still cumbersome if you are Indie. But Protomaps makes it easy.

Protomaps is a tiled vector basemap system for the web: a renderer, a cloud-optimized geodata format, a hosted API and an open source spatial database, all designed together as an integrated system. This makes it the fastest, simplest way to power your site with sharp maps based on open data.

Protomaps

If I am making a map of a small park in my neighborhood. I don't need the tile server or the data for the entire world or city. Instead, I need the data for the park and maybe some area around it. Protomaps makes it easy to download that base map data using their service. The map data is in the PMTiles format. PMTiles is a new FOSS tile-data format. It's a single file (like SQLite) and can be hosted on any server that serves static files and supports HTTP Range requests. This means you can serve the tile data from AWS S3 or your own Nginx.

pmtiles.js is the corresponding javascript library to read the PMTiles data file and serve the tiles in the browser. It can work with Leaflet. So in Leaflet, it's just a layer. This is the best feature because almost everyone uses Leaflet already.

<pre class="wp-block-syntaxhighlighter-code">const map = L.map('map')

const p = new protomaps.PMTiles("https://lib.thejeshgn.com/lib_files/protomaps/richards_park_2021.pmtiles")

p.metadata().then(m => {
    let bounds_str = m.bounds.split(',')
    layer = new protomaps.LeafletLayer({url:p, attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'})
    layer.addTo(map)
    map.setView(<sup class='footnote'><a href='#fn-20123-1' id='fnref-20123-1' onclick='return fdfootnote_show(20123)'>1</a></sup>, 19)
}) 
</pre>

Below I have the demo, which is serving just the standard styled tiles using Protomaps. You can add more layers of information if required using leaflet.

The map is of Richard's Park of Neighborhood. It's probably an area of 2 Sq Kilometer. The size of the map file 1.1 MB. Very efficient. This is going to amazing for self contained map apps.