PythonでMapLibre GL JSを用いたWebGISを作ってみよう

2025年10月12日（日）に専修大学生田キャンパスにて開催されたFOSS4G 2025 Japan コアデイの発表「PythonでMapLibre GL JSを用いたWebGISを作ってみよう」に使用した発表資料のスライド版です。

1. PythonでMapLibre GL JSを 用いたWebGISを作ってみよう ぴっかりん (@ra0kley) FOSS4G 2025 Japan 2025.10.12 ショートプレゼンテーション
2. FOSS4G 2025 Japan はじめに • 本発表は、所属会社で行っていることではなく、個人で 使ってみたライブラリの発表になります 2
3. FOSS4G 2025 Japan 発表内容 ⚫ 自己紹介 ⚫ MapLibre GL JSとは？ ⚫ MapLibre GL JSをPythonで扱うモチベーション ⚫ インストール方法 ⚫ 基本的な使い方 ⚫ デモ（使い方の例） ⚫ まとめ 3
4. 4 自己紹介
5. FOSS4G 2025 Japan 自己紹介 • 本名: 青木 亮祐（あおき りょうすけ） • 出身: 静岡県東部地域 • 趣味: 地理空間情報と戯れる、ラジオを聴く、散歩、旅行... • 推し: 鬼頭明里さん、すそのん ←個人では「ぴっかりん」という名前で SNS等に生息してます 5
6. 6 MapLibre GL JSと Pythonで扱うモチベーション
7. FOSS4G 2025 Japan MapLibre GL JSとは？ オープンソースのJavaScript地図ライブラリ 「Mapbox GL JS」という地図ライブラリがライセンス変更を 契機にオープンソースフォークとして誕生 7 出典: MapLibre GL JS API Documentation
8. FOSS4G 2025 Japan MapLibre GL JSとは？ 詳しく知りたい方は、以下のZenn本がオススメ！ 8 出典: https://zenn.dev/asahina820/books/071ba23476fdc4 出典: https://zenn.dev/asahina820/books/c29592e397a35b
9. FOSS4G 2025 Japan MapLibre GL JSをPythonで扱うモチベーション ⚫ Pythonは、GISデータのダウンロードや解析を行えるライブラリが あり、可視化まで行えるワークフローが構築可能 ⚫ 発表者自身が、深層学習モデルの開発を仕事で行っており、 Pythonを主に使っており、他の部署でフロントエンド部分を 開発している しかし、人的リソースの関係から簡単なフロントエンド部分を 開発することもある → Pythonで簡単にフロントエンドが構築できると嬉しい！ 9
10. FOSS4G 2025 Japan MapLibre for Python ⚫ MapLibre GL JSのPythonバイディング ⚫ Jupyter NotebookやShiny（ダッシュボード作成用フレームワーク）、 Streamlitなどと一緒に扱えるという利点もある 10 出典: https://eoda-dev.github.io/py-maplibregl/
11. 11 MapLibre for Pythonの インストールと基本的な使い方
12. FOSS4G 2025 Japan インストール方法 pipやuv、pixiといったPythonのパッケージ管理 ライブラリを用いてインストール可能 ※ いずれにせよ仮想環境を新しく作るのがオススメ（依存関係が。。。） gdalを一緒に使いたい場合は、pixiがオススメ uvでインストールする場合 pixiでインストールする場合 12 $ uv add 'maplibre[all]' $ pixi add 'maplibre'
13. FOSS4G 2025 Japan 基本的な使い方 以下のスクリプトを実行すると、地図を表示するHTMLが保存される (専修大学 生田キャンパス周辺を表示) 13 from maplibre import Map, MapOptions # 最初に表示する場所やズームレベル、ピッチなどを設定 # 地図のスタイルとして、OpenStreetMapのライトテーマを指定 map_options = MapOptions( center=(139.5544361, 35.6112653), zoom=17, hash=True, style='https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', pitch=60, ) # 表示条件を地図に反映 m = Map(map_options) # HTMLファイルとして保存 temp_file = './01_basic_usage.html' with open(temp_file, "w") as f: f.write(m.to_html())
14. FOSS4G 2025 Japan 基本的な使い方 以下のようなHTMLが保存される（正直、中身は分かっていないです） 14
15. FOSS4G 2025 Japan 基本的な使い方 ブラウザで開くと… MapLibre GL JSで作られたWeb地図が表示された！！ 15
16. 16 デモ（使い方の例）
17. FOSS4G 2025 Japan デモ（使い方の例） Project PLATEAUのデータを表示 17
18. FOSS4G 2025 Japan デモ（使い方の例） 登記所備付地図データ（PMTiles）を重ねて表示 18
19. FOSS4G 2025 Japan デモ（使い方の例） leafmapという色々なことができるPythonライブラリにも 「Maplibre for Python」が取り込まれています AIと連携した地図表示（AIエージェント）も作ることが可能！！ 19
20. FOSS4G 2025 Japan デモ（使い方の例） 詳しくは、以下のZenn本のPython版をアドベントカレンダーの 一部として執筆します！（宣言） 20 出典: https://zenn.dev/asahina820/books/071ba23476fdc4 出典: https://zenn.dev/asahina820/books/c29592e397a35b
21. 21 まとめ
22. FOSS4G 2025 Japan まとめ ⚫ MapLibre GL JSのPythonバイディングが登場し、 比較的モダンなWeb地図が作れるようになりました ⚫ deck.glのレイヤーを表示したり、PMTilesの表示も可能 ⚫ leafmapを用いれば、さらにAIとの連携などの可能 Pythonでデータ処理を行っていた方も、この際にぜひフロントエンドに 触れてみると良いかも！？ 22
23. ありがとうございました！ ↑ X (旧Twitter)アカウント ↑ GitHubアカウント 23