Standalone Web Maps, No Platform Required
11-18, 09:00–12:00 (Pacific/Auckland), WF711

Calling all researchers, land managers, and FOSS4G hobbyists who need a modern web map. Using just a Github account, you can make a web map that is simple and free to deploy, is totally customizable, can be integrated into your CMS or modern web stack.


In this workshop, we will walk through how to build a map inside a GitHub repository, hosted with GitHub Pages, and built entirely with open source tools. Attendees will vote up modules at the end, so that time permitting, we can address the most relevant ways to take things further.

Key concepts / technologies:
- PMTiles: because they work via HTTP, PMTiles (portable map tiles) do not require a map server to deliver tiled map data to your browser.
- Protomaps: is a global basemap stored in PMTiles that can be downloaded from a bounding box and customized to meet your needs.
- Overpass: is an API and querying language for OpenStreetMap that can be used to extract select data you want to use to add context and fidelity by styling them within your basemap
- GitHub Pages: provide a built-in web hosting platform for any Github repo. Provided your repo is under 1 GB of data, achievable for most project or site-level maps, this is all you need to host your map
- Maplibre GL JS: is an open source, vector tile map rendering library for Javascript. It supports PMTiles and can be used to control how your data from PMTiles and other sources is rendered and displayed.

Individual modules will include step-by-step instructions for how to:
1. Set up a GitHub account
2. Use Overpass to create an OpenStreetMap extract
3. Define a bounding box to download reference layers from Protomaps
4. Initialize GitHub Pages to display your map
5. Use Maplibre to render your map
6. Customize the stylesheet
7. Add local fonts and sprites and reference them from your repo

Time permitting and in order of priority, we will cover these additional topics:
8. (Bonus) Interactivity enhancements (such as custom pop-ups)
9. (Bonus) When and how to add Terrain (hillshade, contours)
10. (Bonus) Migrating your tiles to cloud storage
11. (Bonus) Create custom icons / spritesheet

Open source enthusiast, CNG board member, Maplibre board member, cartographer at large