FOSS4G Hiroshima 2026 - Terra Draw Workshop¶
Welcome to the Terra Draw workshop at FOSS4G Hiroshima 2026! This 3-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.
Unlike the 2025 edition, everything you need is in this single website: every exercise page has a built-in live editor where you can write TypeScript on the left and see the result on the right — no need to jump between repositories. If you prefer working locally, a SvelteKit template is also included in this repository.
What You'll Learn¶
- Understanding Terra Draw's architecture and unified API
- Setting up Terra Draw with MapLibre GL JS
- Implementing basic drawing features with the latest drawing modes
- Customizing styles, handling events, and managing data
- Using the new undo / redo history feature
- Using the maplibre-gl-terradraw plugin for seamless integration
Prerequisites¶
To participate in this workshop, please ensure you have:
- A modern browser (Chrome, Firefox or Safari) — the embedded live editors are all you strictly need
- Node.js v24 LTS or Node.js v22 installed (download here or install by nvm) if you want to follow the local development track
- 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¶
The workshop runs for 3 hours with a 15-minute break after the first hour.
| Time | Duration | Section |
|---|---|---|
| 14:00-14:15 | 15 min | Terra Draw Introduction |
| 14:15-14:30 | 15 min | Environment Setup |
| 14:30-15:00 | 30 min | Terra Draw Basics - Exercise 1 & 2 |
| 15:00-15:15 | 15 min | Break |
| 15:15-15:35 | 20 min | Terra Draw Basics - Exercise 3 |
| 15:35-16:30 | 55 min | Advanced Features - Exercise 4 to 7 |
| 16:30-16:45 | 15 min | maplibre-gl-terradraw introduction |
| 16:45-17:00 | 15 min | Other mapping libraries & Q&A |
Workshop materials¶
Everything lives in a single repository: watergis/terradraw-workshop
- Documentation & live editors — the pages you are reading now
- Local template — a SvelteKit starter under
template/in the same repository
Getting Started¶
To begin setting up your development environment: