Create Interactive Web Maps — A Hands-on Workshop

GIS tooling has historically lived behind a high entry barrier — partly because professional desktop GIS is genuinely complex, but also because the path from "I have data on a map" to "someone can actually use this on the web" usually involves multiple disconnected tools. This workshop was designed to flatten that path, in one sitting, for two very different audiences sharing the same room.

Across four hours we walked through five concrete steps, each building on the last:

• Setting up a local environment — runtime, package manager, source repo
• Using the WebGIS application to compose an interactive map without writing any code
• The key design ideas behind the application, framed as "how the tool wants you to think"
• The plugin system architecture — where plugins attach, what they can and can't touch
• Building a working plugin from scratch and seeing it run inside the live map

The first half was deliberately code-free, so anyone in the room could publish a real interactive map by the break. The second half pivoted to plugin development for the developers who wanted to push further.

The workshop was taught on Re:Earth Visualizer and its plugin system — the open-source WebGIS our team builds in the open — but the underlying ideas are general: how a no-code authoring layer and a runtime extension layer can coexist inside the same map application without one swallowing the other.

Whether participants came in as GIS professionals, developers, or somewhere in between, the goal was less "see this product" and more "leave with a usable mental model you can take home."

Postscript: FOSS4G 2026 will be hosted in Japan — the bid was selected by community vote, and the team's broader contribution (including this workshop) was part of the case we made for it. We're now helping put the 2026 program together.

---
layout: talk.njk
title_zh: "制作交互式 Web 地图 —— 一场动手实操工作坊"
title_ja: "インタラクティブな Web マップをつくる — ハンズオン・ワークショップ"
title_en: "Create Interactive Web Maps — A Hands-on Workshop"
year: 2024
event: FOSS4G 2024
eventUrl: https://2024.foss4g.org/
role: workshop
location: 巴西，贝伦
location_ja: ブラジル・ベレン
location_en: Belém, Brazil
cover: /images/talks/foss4g-2024-interactive-maps-workshop/hero.jpg
description: "A 4-hour hands-on workshop on building interactive web maps and extending them through plugins — designed to scale progressively from non-technical map-makers in the first half to plugin developers in the second."
workTags:
  - talk
---

<div lang="zh">

GIS 工具一直以来都坐在一个比较高的门槛之后。一方面，专业的桌面 GIS 本身就足够复杂；另一方面，从「我的数据已经画到地图上了」到「另一个人可以在 Web 上真的用起来」之间，往往要跨过好几个并不互相连通的工具。这场工作坊试图把这段路径在一次坐下来的时间里压缩掉，而且要同时照顾坐在同一个房间里的两类完全不同的参与者。

4 小时之内，我们顺着 5 个一层一层叠上去的步骤往前走：

- 搭建本地环境——runtime、包管理器、源码仓库
- 用 WebGIS 应用，在不写代码的情况下，组装一张交互式地图
- 应用背后的设计思路——「这个工具希望你怎么思考」
- 插件系统的架构——插件挂在哪里、能做什么、不能做什么
- 从零写一个插件，看着它真的跑在你刚才那张地图里

上半场刻意是零代码的，让房间里任何人都能在中场休息之前，公开一张真实可交互的 Web 地图。下半场则切到插件开发，给那些想再往前走一步的开发者。

工作坊用的素材是 Re:Earth Visualizer 和它的插件系统——我们团队在公开开发的开源 WebGIS——但底下谈的想法是更通用的：一个 no-code 的创作层和一个 runtime 的扩展层，要怎么在同一个地图应用里共存，而不会被对方吃掉。

无论参与者是 GIS 专业人士、是开发者、还是介于两者之间，工作坊的目标都不是「来看一下这个产品」，而是「带回一个自己用得上的心智模型」。

补一句。FOSS4G 2026 最终确定在日本举办——这是通过社区投票决定的，而我们团队的一系列工作，包括这次工作坊，也是当时申办工作的一部分。现在我们也在参与 2026 年大会的筹备。

</div>

<div lang="ja">

GIS のツーリングは、歴史的に高い参入障壁の向こう側にあった。プロ向けのデスクトップ GIS が実際に複雑であることもあるが、「データを地図に載せた」状態から「誰かが Web 上でそれを実際に使える」状態までの道のりが、複数の、互いに繋がっていないツールを跨ぐようにできていたことも大きい。このワークショップは、その道のりを 1 セッションで圧縮することを目的に、まったく異なる 2 種類の参加者を、同じ部屋で同時に面倒を見られるように設計した。

4 時間のなかで、互いに積み上がる 5 つの具体ステップを辿った。

- ローカル環境のセットアップ──ランタイム、パッケージマネージャ、ソースリポジトリ
- コードを書かずに、WebGIS アプリケーションでインタラクティブなマップを組み立てる
- アプリケーションの背後にある設計思想──「このツールはどう考えてほしいか」
- プラグインシステムのアーキテクチャ──プラグインがどこに刺さり、何ができて、何ができないか
- ゼロからプラグインを書き、それが動いているマップの中で実際に動くのを見る

前半はあえてコードゼロにしてあり、部屋にいる誰もが、休憩時間までに本物のインタラクティブマップを公開できるようになっている。後半は、もっと踏み込みたい開発者向けに、プラグイン開発へと舵を切った。

ワークショップの素材としては Re:Earth Visualizer とそのプラグインシステム──私たちのチームがオープンに開発している WebGIS──を用いたが、語っていた発想自体は一般的なものだ。すなわち、ノーコードでオーサリングするレイヤーと、ランタイムで拡張するレイヤーが、互いを飲み込むことなく、同じマップアプリケーションの中でどう共存するか、という問いである。

参加者が GIS のプロでも、開発者でも、その中間でも、ワークショップの狙いは「製品を見せる」ことではなく、「持ち帰って使えるメンタルモデル」を渡すことに置いていた。

追記。FOSS4G 2026 は日本での開催が決まった。コミュニティ投票によって選ばれたもので、このワークショップを含め、私たちのチームの一連の貢献も、その招致を後押しした材料のひとつだった。現在は 2026 年大会の運営側にも関わっている。

</div>

<div lang="en">

GIS tooling has historically lived behind a high entry barrier — partly because professional desktop GIS is genuinely complex, but also because the path from "I have data on a map" to "someone can actually use this on the web" usually involves multiple disconnected tools. This workshop was designed to flatten that path, in one sitting, for two very different audiences sharing the same room.

Across four hours we walked through five concrete steps, each building on the last:

- Setting up a local environment — runtime, package manager, source repo
- Using the WebGIS application to compose an interactive map without writing any code
- The key design ideas behind the application, framed as "how the tool wants you to think"
- The plugin system architecture — where plugins attach, what they can and can't touch
- Building a working plugin from scratch and seeing it run inside the live map

The first half was deliberately code-free, so anyone in the room could publish a real interactive map by the break. The second half pivoted to plugin development for the developers who wanted to push further.

The workshop was taught on Re:Earth Visualizer and its plugin system — the open-source WebGIS our team builds in the open — but the underlying ideas are general: how a no-code authoring layer and a runtime extension layer can coexist inside the same map application without one swallowing the other.

Whether participants came in as GIS professionals, developers, or somewhere in between, the goal was less "see this product" and more "leave with a usable mental model you can take home."

Postscript: FOSS4G 2026 will be hosted in Japan — the bid was selected by community vote, and the team's broader contribution (including this workshop) was part of the case we made for it. We're now helping put the 2026 program together.

</div>

<div class="gallery">
  <img src="/images/talks/foss4g-2024-interactive-maps-workshop/hero.jpg" alt="FOSS4G 2024 贝伦大会的工作坊现场（讲解中）">
  <img src="/images/talks/foss4g-2024-interactive-maps-workshop/co-host.jpg" alt="工作坊下半场——插件架构讲解（与同事联合进行）">
</div>