Standalone Web Maps, No Platform Required

This workshop will guide you through creating a web map of Te Ara Hura (The Wandering Path) on Waiheke Island, Auckland, New Zealand using open source data and tools.

Workshop Overview

This 3-hour workshop will guide you through creating your own standalone web map. By the end, you'll have a fully functional web map application that you can:

  • Clone and customize for your own projects
  • Host on GitHub Pages or any static hosting service
  • Run entirely offline (no external dependencies)
  • Share with others without requiring a server

Workshop Steps

This workshop is divided into 8 main steps:

  1. Get Set Up - Create an account or log into Github, get set up on your local machine
  2. Use Overpass to Create an OpenStreetMap Extract - Extract Te Ara Hura trail data
  3. Use Maplibre to Render Your Map - Set up local server and create your first map
  4. Initialize GitHub Pages to Display Your Map - Deploy your map to the web
  5. Define a Bounding Box and Download Reference Layers from Protomaps - Download basemap tiles
  6. Configure the Stylesheet - Set up styling with local sprites and fonts
  7. Add Terrain (Hillshade, Contours) - Visualize elevation and topography
  8. Add Interactivity - Add popups, controls, and interactive features

Bonus Steps (Time Permitting)

  1. Customize the Stylesheet - Modify colors and styling
  2. Create Custom Icons / Spritesheet - Design and add custom icons
  3. Configure for Cloud Storage - Use cloud storage for large files

Ready to begin? Start with Step 1 - Get Set Up!