FOSS4G 2025 Auckland - Terra Draw Workshop¶
Welcome to the Terra Draw workshop! This 3.5-hour hands-on session will teach you how to integrate advanced drawing features into your web mapping applications using Terra Draw's unified API.
Workshop Overview¶
Terra Draw is a powerful, cross-platform drawing library that works with all major web mapping libraries including MapLibre, Leaflet, OpenLayers, Mapbox, Google Maps, and ArcGIS. This workshop will take you from basic concepts to advanced implementation.
What You'll Learn¶
- Understanding Terra Draw's architecture and unified API
- Setting up Terra Draw with Maplibre
- Implementing basic drawing features
- Customizing styles, handling events, and managing data
- Using the maplibre-gl-terradraw plugin for seamless integration
Prerequisites¶
To participate in this workshop, please ensure you have:
- Node.js v24 LTS or Node.js v22 installed (download here or install by nvm)
- VS Code or your preferred code editor (download here)
- Basic knowledge of JavaScript and web development
- Familiarity with web mapping concepts (helpful but not required)
Workshop Schedule¶
Workshop schedule is shown as below to run for 3 hours plus 30 minutes break.
| Time | Duration | Section |
|---|---|---|
| 09:00-09:25 | 25 min | Terra Draw Introduction by James Milner (Online) |
| 09:25-09:40 | 15 min | Environment Setup |
| 09:40-10:30 | 50 min | Terra Draw Basics with 3 exercises |
| 10:30-11:00 | 30 min | Break |
| 11:00-12:00 | 60 min | Advanced Features with 3 exercises |
| 12:00-12:15 | 15 min | switch maplibre to leaflet |
| 12:15-12:30 | 15 min | maplibre-gl-terradraw introduction |
Terra Draw introduction slides by James are available at Google Slides.
Workshop materials¶
- Example codes and templates
Example codes are available in watergis/terradraw-workshop-template
- Workshop documentation
Workshop documentation is available at watergis/terradraw-workshop
Getting Started¶
To begin setting up your development environment: