FOSS4G 広島 2026 - Terra Draw ワークショップ¶
FOSS4G 広島 2026 の Terra Draw ワークショップへようこそ! この 3 時間のハンズオンでは、Terra Draw の統一 API を使って、ウェブ地図アプリケーションに高度な描画機能を組み込む方法を学びます。
ワークショップの概要¶
Terra Draw は、MapLibre、Leaflet、OpenLayers、Mapbox、Google Maps、ArcGIS といった主要なウェブ地図ライブラリすべてで動作する、強力なクロスプラットフォーム描画ライブラリです。このワークショップでは、基本的な考え方から応用的な実装までを扱います。
2025 年版とは違い、必要なものはすべてこの 1 つのウェブサイトに揃っています。各演習ページにはライブエディタが組み込まれており、左側で TypeScript を書くと右側に結果が表示されます。リポジトリを行き来する必要はありません。ローカル環境で作業したい方のために、SvelteKit のテンプレートも同じリポジトリに用意しています。
学べること¶
- Terra Draw のアーキテクチャと統一 API の理解
- MapLibre GL JS での Terra Draw のセットアップ
- 最新の描画モードを使った基本的な描画機能の実装
- スタイルのカスタマイズ、イベント処理、データ管理
- 新機能である元に戻す / やり直す(undo / redo) 履歴機能の利用
- maplibre-gl-terradraw プラグインによるスムーズな組み込み
事前準備¶
このワークショップに参加するにあたり、以下をご用意ください。
- モダンなブラウザ (Chrome、Firefox、Safari) — 埋め込みのライブエディタを使うだけならこれで十分です
- ローカル開発も試したい場合は Node.js v24 LTS または Node.js v22 (ダウンロード、または nvm でのインストール)
- VS Code またはお好みのコードエディタ (ダウンロード)
- JavaScript とウェブ開発の基礎知識
- ウェブ地図の基本的な知識 (あると望ましいですが必須ではありません)
タイムテーブル¶
ワークショップは 3 時間で、最初の 1 時間の後に 15 分の休憩があります。
| 時間 | 所要時間 | セクション |
|---|---|---|
| 14:00-14:15 | 15 分 | Terra Draw とは |
| 14:15-14:30 | 15 分 | 環境構築 |
| 14:30-15:00 | 30 分 | Terra Draw の基本 - 演習 1 と 2 |
| 15:00-15:15 | 15 分 | 休憩 |
| 15:15-15:35 | 20 分 | Terra Draw の基本 - 演習 3 |
| 15:35-16:30 | 55 分 | 応用機能 - 演習 4 から 7 |
| 16:30-16:45 | 15 分 | maplibre-gl-terradraw の紹介 |
| 16:45-17:00 | 15 分 | 他の地図ライブラリ と質疑応答 |
ワークショップの教材¶
すべて 1 つのリポジトリにまとまっています: watergis/terradraw-workshop
- ドキュメントとライブエディタ — 今ご覧になっているページです
- ローカル用テンプレート — 同じリポジトリの
template/以下にある SvelteKit のスターター
はじめに¶
まずは Terra Draw がどういうものか、そして 2026 年の新機能を見ていきましょう。