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:

← Back to page