PythonでWeb地図アプリを作ってみよう

2026年2月21日（土）に静岡県静岡市で開催されたPyCon mini Shizuoka 2026にて発表した資料です。
デモとして使用していたGoogle Colabのノートブックは以下から動かすことができます。

https://colab.research.google.com/drive/1t5xE-G9oq1hWenw6uhf10xjls204SF2a?usp=sharing

Transcript

1. PythonでWeb地図アプリを 作ってみよう 青木亮祐 / ぴっかりん (@ra0kley) PyCon mini Shizuoka 2026 2026.02.21
2. PyCon mini Shizuoka 2026 はじめに • 本発表は、所属会社で行っていることではなく、個人で 使ってみたライブラリの発表になります • デモは、以下のリンクからGoogle Colab上で 実行することが可能です https://colab.research.google.com/drive/1t5xE- G9oq1hWenw6uhf10xjls204SF2a?usp=sharing • X（旧Twitter）を見ていることが多いので、ぜひ #pyconshizu を付けて感想をポストして頂けると嬉しいです！ 2
3. PyCon mini Shizuoka 2026 本日のトークのゴール ✓ Web地図を作る上での基本事項がざっくり分かる ✓ 指定した場所の地図を表示できるようになる ✓ 緯度、経度の列があるCSV形式のデータを地図上に 表示できるようになる ✓ ？？？？？ 3
4. PyCon mini Shizuoka 2026 発表内容 1. 自己紹介 2. Web地図の基礎 3. leafmapの紹介と基礎 4. 静岡のデータを可視化してみよう 5. まとめ 4
5. 5 自己紹介 01
6. PyCon mini Shizuoka 2026 1. 自己紹介 • 出身: 静岡県駿東郡長泉町 • 趣味: 地理空間情報と戯れる、散歩、旅行... • 推し: 鬼頭明里さん、すそのん、不動産情報ライブラリス • 活動: PLATEAU ADVOCATE 2025、 OSGeo.JP 運営委員、 SatAI.Challenge 運営メンバ ←「ぴっかりん」という名前でSNS等に 生息してます 6 「国土数値情報（行政区域データ）」（国土交通省）を 加工して作成
7. PyCon mini Shizuoka 2026 1. 自己紹介 私のPyCon参加歴 PyConJP 2021（オンライン） 7
8. PyCon mini Shizuoka 2026 1. 自己紹介 私のPyCon参加歴 PyConJP 2021（オンライン） PyConJP 2022（オンサイト） PyCon APAC 2023（オンサイト） 8 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成
9. PyCon mini Shizuoka 2026 1. 自己紹介 私のPyCon参加歴 PyConJP 2021（オンライン） PyConJP 2022（オンサイト） PyCon APAC 2023（オンサイト） PyCon mini Shizuoka 2024 continue （オンサイト・発表） あと、PyCon JP 2025（広島）でも発表しています 9 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成
10. PyCon mini Shizuoka 2026 1. 自己紹介？ 実は右の地図、都道府県名のほかに 位置の情報も含まれているデータ から作成しています 10 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成
11. PyCon mini Shizuoka 2026 1. 自己紹介？ 11 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成 ・・・ =
12. PyCon mini Shizuoka 2026 ・・・ 1. 自己紹介？ 12 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成 = 都道府県の形が緯度、経度で表され格納
13. PyCon mini Shizuoka 2026 1. 自己紹介？ このように「位置情報」をもつデータ（位置情報＋αでも当然OK） → 地理空間情報 世の中には、様々な地理空間情報が溢れています！ 13
14. PyCon mini Shizuoka 2026 1. 自己紹介？ 世の中には、様々な地理空間情報が溢れています！ 14 位置情報！ 静岡市「静岡市公共施設一覧」を加工して作成
15. PyCon mini Shizuoka 2026 1. 自己紹介？ 3Dの地理空間情報もあります！（この話はまたどこかで） 15 静岡県「VIRTUAL SHIZUOKA 静岡県 中・西部 点群データ」を東京都デジタルツイン3Dビューアで表示
16. PyCon mini Shizuoka 2026 1. 自己紹介？ 今までのPyConでは3Dデータや衛星画像など専門的なことを 話してきました 16 PyCon mini Shizuoka 2024 continue 「 PythonでPLATEAUのデータを扱ってみる」 PyCon JP 2025 「 Hello, satellite data! ～Pythonではじめる 衛星データ解析～」
17. PyCon mini Shizuoka 2026 1. 自己紹介？ しかし、そのベースとなっている地図について話していなかった & 最近はPythonでも扱いやすくなってきた ということで、PythonでWeb地図アプリを作る方法を お話したいと思います！！ 17
18. PyCon mini Shizuoka 2026 1. 自己紹介？ PythonでWeb地図を作成するモチベーション Pythonは、位置情報が付いたデータを解析できるライブラリが たくさんある （空間関係を用いた専門処理から、深層学習までさまざま） Web地図を用いた表示までできると、 解析から可視化までのワークフローが構築可能！！ 18
19. 19 Web地図の基礎 02
20. PyCon mini Shizuoka 2026 2. Web地図の基礎 そもそもWeb地図とは？ ✓ Webブラウザ上でインタラクティブに操作できる地図 ✓ 有名なものだと、Google Maps、OpenStreetMapなど → 皆さん、当たり前のように使っていますよね 20 OpenStreetMap 地理院地図（電子国土WEB)
21. PyCon mini Shizuoka 2026 2. Web地図の基礎 位置の表し方 ✓ 緯度、経度 → 経度: 東西方向 → 緯度: 南北方向 ✓ 皆さんお馴染みですよね？ 21 出典: https://commons.wikimedia.org/wiki/ File:Latitude_and_Longitude_of_the_Earth.svg
22. PyCon mini Shizuoka 2026 2. Web地図の基礎 位置の表し方 ✓ 地球は球体、けど平面に表したい！ → 球体を平面になるように変換すればOK → この変換を「投影」、変換のルールを「地図投影法」という → 面積、角度、距離をすべて正確には再現できない（歪みを許容） 22 ※ Nano Bananaにより作成
23. PyCon mini Shizuoka 2026 2. Web地図の基礎 位置の表し方 ✓ Webメルカトル図法 → Google Mapsをはじめ、多くのWeb地図サービスで使用 → 北緯および南緯約85度以上の領域の描画をあきらめ、 地球全体を正方形の地図で表現 23 ※ Nano Bananaにより作成 約85度以上の部分は あきらめる
24. PyCon mini Shizuoka 2026 2. Web地図の基礎 位置の表し方 ✓ 平面直角座標系 → 日本全体を19の領域に分割し、 その範囲を平面として変換 → 日本の公共測量で使用 オープンデータにて、位置が 平面直角座標系で記載 されていることも 24 出典: https://www.gsi.go.jp/sokuchikijun/jpc.html
25. PyCon mini Shizuoka 2026 2. Web地図の基礎 地図データ 主に、「ラスターデータ」と「ベクターデータ」の2種類がある 25 ラスターデータ ベクターデータ 地理院地図 航空写真 地理院地図Vector
26. PyCon mini Shizuoka 2026 2. Web地図の基礎 ラスターデータ 格子状に並んだ数値情報を含むピクセルの集合として表現されるデータ → 代表的なものが航空写真などの画像データ → 地形や気温のような連続性のあるデータを扱うのに適している メリット 単純な構造のため、計算や比較がしやすい デメリット 解像度がピクセルの大きさで決まるので、拡大や縮小で劣化する 26
27. PyCon mini Shizuoka 2026 2. Web地図の基礎 さまざまなラスターデータ 航空写真以外にも地表面温度、標高など 27 © 国土地理院 © JAXA EORC © JAXA EORC 航空写真 標高 地表面温度
28. PyCon mini Shizuoka 2026 2. Web地図の基礎 ベクターデータ 頂点の集合からなる幾何学的な形状を持つデータのこと → ある地点（お店の場所など）や道路、建物の形状と属性など → 細かい形状を表現するのに適している メリット 拡大/縮小による劣化が無く、細かい形状を表現できる デメリット 計算や比較がラスターデータに比べ難しい 28
29. PyCon mini Shizuoka 2026 2. Web地図の基礎 ベクターデータの種類 ベクターデータには、3つの種類がある 29 ポイント ライン ポリゴン 特定の位置を示す形状 2つ以上の点を結んだ線 の形状、長さを持つ 頂点を結ぶ線が閉じた形 状（面）、面積を持つ 店舗やバス停の場所など 道路の中心線や鉄道など 建物や道路、公園など
30. PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル ✓ 大きな位置情報データを事前にタイル状に分割し、必要な範囲の データだけを配信可能とする仕組み → 必要な範囲のみを読み込むことで、高速に表示ができる ✓ 全世界を所定のルールでタイル上に分割し、それぞれのタイルに 横方向の位置（X）と縦方向の位置（Y）、表示倍率（Z）を付与 → Webメルカトル投影法による世界地図を原点に分割していく 30
31. PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル ✓ (0, 0)のWebメルカトル投影法による世界地図から 4分割ずつして、世界全体の領域を表現 31 出典: https://maps.gsi.go.jp/development/siyou.html
32. PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル 地図タイルの表示倍率を「ズームレベル」という 32 出典: https://maps.gsi.go.jp/development/siyou.html
33. 33 leafmapの紹介と基礎 03
34. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 “超”便利なライブラリ leafmap 地理空間情報の可視化や簡単な解析を簡単にできるPythonライブラリ MITライセンスなので、比較的自由に利用可能 34 出典: https://leafmap.org/
35. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 インストール方法 Pythonのパッケージ管理ライブラリを用いてインストール可能 ※ いずれにせよ仮想環境を新しく作るのがオススメ（依存関係が。。。） 個人的には、pixiがオススメ uvでインストールする場合 pixiでインストールする場合 35 $ uv add leafmap $ pixi add leafmap
36. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 地図の表示 サンプルとして、さっそく会場周辺の地図を表示していきます。 なんと、 3行のコードで表示することができます。 36
37. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 地図の表示 サンプルとして、さっそく会場周辺の地図を表示していきます。 なんと、 3行のコードで表示することができます。 37 地図の中心としたい緯度経度をリスト形式で指定 緯度、経度の順番 初期表示のズームレベルを指定
38. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 地図の表示 会場周辺の地図が表示されました！！！！！ 38
39. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 マーカーの表示 地図上に会場の場所にマーカーを立てていきましょう。 「add_marker」メソッドで実現ができます。 39
40. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 マーカーの表示 地図上に会場の場所にマーカーを立てていきましょう。 「add_marker」メソッドで実現ができます。 40 マーカーを立てたい場所の緯度経度をリスト形式で指定 緯度、経度の順番
41. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 マーカーの表示 会場の場所にマーカーが表示されました！ 41
42. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 ポップアップの表示 マーカーをクリックすると、地図上にポップアップで 情報を表示できるようにしていきましょう。 「add_marker」メソッドの「popup」引数に指定し実現できます 42
43. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 ポップアップの表示 「ここが会場」というポップアップが表示されました 43
44. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 ポップアップの表示 「ここが会場」というポップアップが表示されましたが、幅が短すぎて 縦書きみたいになっています。少し工夫をしてみます。 また、ポップアップの表示内容はHTMLで指定できます。 ついでに太字にしてみましょう。 44
45. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 ポップアップの表示 「folium」というライブラリを用いて、ポップアップをカスタムできます。 45
46. PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 ポップアップの表示 きちんと横書きで表示され、「ここが会場」も太字になりました！ 46
47. 47 静岡のデータを可視化してみよう 04
48. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう ここで唐突な質問 皆さん、お昼ごはんに何を 食べましたか？ （静岡にはおいしい食べ物がたくさんあります！！！） 48
49. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 私は、昨年参加時のお昼ごはんに海鮮丼を食べました 静岡は、海鮮もおいしい！！ （帰静したときに、1回は海鮮を食べてるくらい） 49
50. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 静岡市にある用宗漁港、清水港、由比漁港の3つの港があります ここで、水揚げされる魚介類を「しずまえ鮮魚」といいます 50 出典: https://www.city.shizuoka.lg.jp/s2473/s005023.html
51. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 静岡県のオープンデータカタログカタログサイトから 「しずまえ鮮魚」を食べることが出来る飲食店のデータを 使っていきます（※ 古い情報であることに注意） 51 出典: https://opendata.pref.shizuoka.jp/dataset/12287.html
52. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう まずは、pandasでCSVを読み込み中身を確認 52
53. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう CSVの中身を見ると、「緯度」「経度」が含まれている！ 53 静岡市「しずまえおさかな処マップ 掲載飲食店」を改変して使用、CC BY 4.0
54. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 地図に表示する際は、「スポット名」、「詳細」、「電話番号」、「URL」 辺りも表示したい → 欠損値の情報もあり、そのままだと「NaN」と地図上に 表示されてしまう → pandasで当該箇所は「情報なし」に置換しよう 54 静岡市「しずまえおさかな処マップ 掲載飲食店」を改変して使用、CC BY 4.0
55. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう ここから先は、コードが長くなるため、Google Colabの Notebookをメインに説明していきます。 詳しくは、冒頭に案内したNotebokをご覧ください。 55
56. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 欠損値を「情報なし」に変換 56
57. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう それでは、きれいにしたデータを地図上に表示していきます。 先ほど、書いたコードをベースに追加していきます。 57
58. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう DataFrameの内容を地図上に追加 for文でDataFrameの内容を1つずつ抽出しながらポップアップに 表示する内容を装飾、地図に追加を繰り返していきます。 58
59. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう DataFrameの内容を地図上に追加 地図上にDataFrameの内容が表示されました！！ 59
60. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう カスタムアイコンの追加 地図上に情報を表示することができるようになりましたが、 ✓ 会場と飲食店のマーカーの区別がつかない ✓ 何だか味気ない といった課題があります。 そこで、飲食店のマーカーをカスタムしましょう。 以下のお魚のアイコンを表示していきます 60
61. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう カスタムアイコンの追加 「folium」というライブラリにある「CustomIcon」を用いると 画像やアイコンのサイズを指定し、地図上に表示できます。 61
62. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう カスタムアイコンの追加 お魚のアイコンが地図上に表示され、会場のマーカーと区別できました！ 62
63. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 近接したマーカーのグループ化 お魚のアイコンが表示されたのはいいですが、 密集している個所はたくさんのお魚が表示され、見づらいです。 そこで、近接した場所のマーカーはグループ化するようにします。 「folium」というライブラリにある「MarkerCluster」を用いると 近接したマーカーをグループ化し、地図上に表示できます。 63
64. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 近接したマーカーのグループ化 64
65. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう 近接したマーカーのグループ化 グループ化され、見やすくなりました！！ 65
66. PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう HTMLとして出力 たった1行でHTML形式で出力可能！！ このHTMLをGitHub Pagesなどで公開すれば、 誰でも地図を見れるように！！ 66
67. 67 まとめ 05
68. 68 まとめと思いきや宣伝です！ 05
69. PyCon mini Shizuoka 2026 5. 宣伝 今回、用いたPythonライブラリであるleafmapのような 地理空間情報を扱う自由かつオープンソースなソフトウェア群を FOSS4G（Free and Open Source Software for Geospatial） といいます そして、このFOSS4Gのコミュニティを支援している団体が主催する 年次カンファレンスの名前もFOSS4Gです（ややこしい） 各地の支部が主催する会議の名前も“FOSS4G”を冠することが多い （自己紹介にあったOSGeo.JPは日本の支部） 69
70. PyCon mini Shizuoka 2026 5. 宣伝 • PyCon JP 2026は、8/21～23に広島国際会議場で開催 70 出典: https://2026.pycon.jp/
71. PyCon mini Shizuoka 2026 5. 宣伝 なんと、その1週間後に 同じ広島国際会議場で 71
72. PyCon mini Shizuoka 2026 5. 宣伝 FOSS4G Hiroshima 2026が 開催されます！！ 72 出典: https://2026.foss4g.org/en/
73. PyCon mini Shizuoka 2026 5. 宣伝 現在、発表のプロポーザルも募集中です！！ 73 出典: https://x.com/osgeojapan/status/2021472266895216922
74. 74 今度こそまとめです！ 06
75. PyCon mini Shizuoka 2026 6. まとめ • 地図を作成するためには、さまざまな知識が必要だが Pythonをはじめ、さまざまなツールのおかげで楽にできるように • PythonでもWeb地図作成できるライブラリが近年出てきています • Pythonを用いると、データ処理からWeb地図表示まで 一気通貫で可能！！！ 今回の場合だと、欠損値の処理と地図上にデータを表示 75
76. PyCon mini Shizuoka 2026 本日のトークのゴール ✓ Web地図を作る上での基本事項がざっくり分かる ✓ 指定した場所の地図を表示できるようになる ✓ 緯度、経度の列があるCSV形式のデータを地図上に 表示できるようになる ✓ 生成AIに質問するための地図の知識が身に付いた！？ 76
77. PyCon mini Shizuoka 2026 6. まとめ Pythonを用いて、地理空間情報で遊ぶのは めっちゃ楽しいです！！！ あなたもぜひ、地理空間情報の沼へ！ そして、FOSS4G Hiroshima 2026にも遊びに来てください 77
78. ありがとうございました！ ↑ X (旧Twitter)アカウント ↑ GitHubアカウント 78