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

by ぴっかりん

Slide 1

Slide 1 text

PythonでWeb地図アプリを作ってみよう青木亮祐 / ぴっかりん (@ra0kley) PyCon mini Shizuoka 2026 2026.02.21

Slide 2

Slide 2 text

PyCon mini Shizuoka 2026 はじめに ● 本発表は、所属会社で行っていることではなく、個人で使ってみたライブラリの発表になります ● デモは、以下のリンクからGoogle Colab上で実行することが可能です https://colab.research.google.com/drive/1t5xE- G9oq1hWenw6uhf10xjls204SF2a?usp=sharing ● X（旧Twitter）を見ていることが多いので、ぜひ #pyconshizu を付けて感想をポストして頂けると嬉しいです！ 2

Slide 3

Slide 3 text

PyCon mini Shizuoka 2026 本日のトークのゴール ✓ Web地図を作る上での基本事項がざっくり分かる ✓ 指定した場所の地図を表示できるようになる ✓ 緯度、経度の列があるCSV形式のデータを地図上に表示できるようになる ✓ ？？？？？ 3

Slide 4

Slide 4 text

PyCon mini Shizuoka 2026 発表内容 1. 自己紹介 2. Web地図の基礎 3. leafmapの紹介と基礎 4. 静岡のデータを可視化してみよう 5. まとめ 4

Slide 5

Slide 5 text

5 自己紹介 01

Slide 6

Slide 6 text

PyCon mini Shizuoka 2026 1. 自己紹介 ● 出身: 静岡県駿東郡長泉町 ● 趣味: 地理空間情報と戯れる、散歩、旅行... ● 推し: 鬼頭明里さん、すそのん、不動産情報ライブラリス ● 活動: PLATEAU ADVOCATE 2025、 OSGeo.JP 運営委員、 SatAI.Challenge 運営メンバ ←「ぴっかりん」という名前でSNS等に生息してます 6 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成

Slide 7

Slide 7 text

PyCon mini Shizuoka 2026 1. 自己紹介私のPyCon参加歴 PyConJP 2021（オンライン） 7

Slide 8

Slide 8 text

PyCon mini Shizuoka 2026 1. 自己紹介私のPyCon参加歴 PyConJP 2021（オンライン） PyConJP 2022（オンサイト） PyCon APAC 2023（オンサイト） 8 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成

Slide 9

Slide 9 text

PyCon mini Shizuoka 2026 1. 自己紹介私のPyCon参加歴 PyConJP 2021（オンライン） PyConJP 2022（オンサイト） PyCon APAC 2023（オンサイト） PyCon mini Shizuoka 2024 continue （オンサイト・発表）あと、PyCon JP 2025（広島）でも発表しています 9 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成

Slide 10

Slide 10 text

PyCon mini Shizuoka 2026 1. 自己紹介？実は右の地図、都道府県名のほかに位置の情報も含まれているデータから作成しています 10 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成

Slide 11

Slide 11 text

PyCon mini Shizuoka 2026 1. 自己紹介？ 11 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成・・・ =

Slide 12

Slide 12 text

PyCon mini Shizuoka 2026 ・・・ 1. 自己紹介？ 12 「国土数値情報（行政区域データ）」（国土交通省）を加工して作成 = 都道府県の形が緯度、経度で表され格納

Slide 13

Slide 13 text

PyCon mini Shizuoka 2026 1. 自己紹介？このように「位置情報」をもつデータ（位置情報＋αでも当然OK） → 地理空間情報世の中には、様々な地理空間情報が溢れています！ 13

Slide 14

Slide 14 text

PyCon mini Shizuoka 2026 1. 自己紹介？世の中には、様々な地理空間情報が溢れています！ 14 位置情報！静岡市「静岡市公共施設一覧」を加工して作成

Slide 15

Slide 15 text

PyCon mini Shizuoka 2026 1. 自己紹介？ 3Dの地理空間情報もあります！（この話はまたどこかで） 15 静岡県「VIRTUAL SHIZUOKA 静岡県中・西部点群データ」を東京都デジタルツイン3Dビューアで表示

Slide 16

Slide 16 text

PyCon mini Shizuoka 2026 1. 自己紹介？今までのPyConでは3Dデータや衛星画像など専門的なことを話してきました 16 PyCon mini Shizuoka 2024 continue 「 PythonでPLATEAUのデータを扱ってみる」 PyCon JP 2025 「 Hello, satellite data! ～Pythonではじめる衛星データ解析～」

Slide 17

Slide 17 text

PyCon mini Shizuoka 2026 1. 自己紹介？しかし、そのベースとなっている地図について話していなかった & 最近はPythonでも扱いやすくなってきたということで、PythonでWeb地図アプリを作る方法をお話したいと思います！！ 17

Slide 18

Slide 18 text

PyCon mini Shizuoka 2026 1. 自己紹介？ PythonでWeb地図を作成するモチベーション Pythonは、位置情報が付いたデータを解析できるライブラリがたくさんある（空間関係を用いた専門処理から、深層学習までさまざま） Web地図を用いた表示までできると、解析から可視化までのワークフローが構築可能！！ 18

Slide 19

Slide 19 text

19 Web地図の基礎 02

Slide 20

Slide 20 text

PyCon mini Shizuoka 2026 2. Web地図の基礎そもそもWeb地図とは？ ✓ Webブラウザ上でインタラクティブに操作できる地図 ✓ 有名なものだと、Google Maps、OpenStreetMapなど → 皆さん、当たり前のように使っていますよね 20 OpenStreetMap 地理院地図（電子国土WEB)

Slide 21

Slide 21 text

PyCon mini Shizuoka 2026 2. Web地図の基礎位置の表し方 ✓ 緯度、経度 → 経度: 東西方向 → 緯度: 南北方向 ✓ 皆さんお馴染みですよね？ 21 出典: https://commons.wikimedia.org/wiki/ File:Latitude_and_Longitude_of_the_Earth.svg

Slide 22

Slide 22 text

PyCon mini Shizuoka 2026 2. Web地図の基礎位置の表し方 ✓ 地球は球体、けど平面に表したい！ → 球体を平面になるように変換すればOK → この変換を「投影」、変換のルールを「地図投影法」という → 面積、角度、距離をすべて正確には再現できない（歪みを許容） 22 ※ Nano Bananaにより作成

Slide 23

Slide 23 text

PyCon mini Shizuoka 2026 2. Web地図の基礎位置の表し方 ✓ Webメルカトル図法 → Google Mapsをはじめ、多くのWeb地図サービスで使用 → 北緯および南緯約85度以上の領域の描画をあきらめ、地球全体を正方形の地図で表現 23 ※ Nano Bananaにより作成約85度以上の部分はあきらめる

Slide 24

Slide 24 text

PyCon mini Shizuoka 2026 2. Web地図の基礎位置の表し方 ✓ 平面直角座標系 → 日本全体を19の領域に分割し、その範囲を平面として変換 → 日本の公共測量で使用オープンデータにて、位置が平面直角座標系で記載されていることも 24 出典: https://www.gsi.go.jp/sokuchikijun/jpc.html

Slide 25

Slide 25 text

PyCon mini Shizuoka 2026 2. Web地図の基礎地図データ主に、「ラスターデータ」と「ベクターデータ」の2種類がある 25 ラスターデータベクターデータ地理院地図航空写真地理院地図Vector

Slide 26

Slide 26 text

PyCon mini Shizuoka 2026 2. Web地図の基礎ラスターデータ格子状に並んだ数値情報を含むピクセルの集合として表現されるデータ → 代表的なものが航空写真などの画像データ → 地形や気温のような連続性のあるデータを扱うのに適しているメリット単純な構造のため、計算や比較がしやすいデメリット解像度がピクセルの大きさで決まるので、拡大や縮小で劣化する 26

Slide 27

Slide 27 text

PyCon mini Shizuoka 2026 2. Web地図の基礎さまざまなラスターデータ航空写真以外にも地表面温度、標高など 27 © 国土地理院 © JAXA EORC © JAXA EORC 航空写真標高地表面温度

Slide 28

Slide 28 text

PyCon mini Shizuoka 2026 2. Web地図の基礎ベクターデータ頂点の集合からなる幾何学的な形状を持つデータのこと → ある地点（お店の場所など）や道路、建物の形状と属性など → 細かい形状を表現するのに適しているメリット拡大/縮小による劣化が無く、細かい形状を表現できるデメリット計算や比較がラスターデータに比べ難しい 28

Slide 29

Slide 29 text

PyCon mini Shizuoka 2026 2. Web地図の基礎ベクターデータの種類ベクターデータには、3つの種類がある 29 ポイントラインポリゴン特定の位置を示す形状 2つ以上の点を結んだ線の形状、長さを持つ頂点を結ぶ線が閉じた形状（面）、面積を持つ店舗やバス停の場所など道路の中心線や鉄道など建物や道路、公園など

Slide 30

Slide 30 text

PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル ✓ 大きな位置情報データを事前にタイル状に分割し、必要な範囲のデータだけを配信可能とする仕組み → 必要な範囲のみを読み込むことで、高速に表示ができる ✓ 全世界を所定のルールでタイル上に分割し、それぞれのタイルに横方向の位置（X）と縦方向の位置（Y）、表示倍率（Z）を付与 → Webメルカトル投影法による世界地図を原点に分割していく 30

Slide 31

Slide 31 text

PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル ✓ (0, 0)のWebメルカトル投影法による世界地図から 4分割ずつして、世界全体の領域を表現 31 出典: https://maps.gsi.go.jp/development/siyou.html

Slide 32

Slide 32 text

PyCon mini Shizuoka 2026 2. Web地図の基礎 Web地図を支える仕組み: 地図タイル地図タイルの表示倍率を「ズームレベル」という 32 出典: https://maps.gsi.go.jp/development/siyou.html

Slide 33

Slide 33 text

33 leafmapの紹介と基礎 03

Slide 34

Slide 34 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎 “超”便利なライブラリ leafmap 地理空間情報の可視化や簡単な解析を簡単にできるPythonライブラリ MITライセンスなので、比較的自由に利用可能 34 出典: https://leafmap.org/

Slide 35

Slide 35 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎インストール方法 Pythonのパッケージ管理ライブラリを用いてインストール可能 ※ いずれにせよ仮想環境を新しく作るのがオススメ（依存関係が。。。）個人的には、pixiがオススメ uvでインストールする場合 pixiでインストールする場合 35 $ uv add leafmap $ pixi add leafmap

Slide 36

Slide 36 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎地図の表示サンプルとして、さっそく会場周辺の地図を表示していきます。なんと、 3行のコードで表示することができます。 36

Slide 37

Slide 37 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎地図の表示サンプルとして、さっそく会場周辺の地図を表示していきます。なんと、 3行のコードで表示することができます。 37 地図の中心としたい緯度経度をリスト形式で指定緯度、経度の順番初期表示のズームレベルを指定

Slide 38

Slide 38 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎地図の表示会場周辺の地図が表示されました！！！！！ 38

Slide 39

Slide 39 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎マーカーの表示地図上に会場の場所にマーカーを立てていきましょう。「add_marker」メソッドで実現ができます。 39

Slide 40

Slide 40 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎マーカーの表示地図上に会場の場所にマーカーを立てていきましょう。「add_marker」メソッドで実現ができます。 40 マーカーを立てたい場所の緯度経度をリスト形式で指定緯度、経度の順番

Slide 41

Slide 41 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎マーカーの表示会場の場所にマーカーが表示されました！ 41

Slide 42

Slide 42 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎ポップアップの表示マーカーをクリックすると、地図上にポップアップで情報を表示できるようにしていきましょう。「add_marker」メソッドの「popup」引数に指定し実現できます 42

Slide 43

Slide 43 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎ポップアップの表示「ここが会場」というポップアップが表示されました 43

Slide 44

Slide 44 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎ポップアップの表示「ここが会場」というポップアップが表示されましたが、幅が短すぎて縦書きみたいになっています。少し工夫をしてみます。また、ポップアップの表示内容はHTMLで指定できます。ついでに太字にしてみましょう。 44

Slide 45

Slide 45 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎ポップアップの表示「folium」というライブラリを用いて、ポップアップをカスタムできます。 45

Slide 46

Slide 46 text

PyCon mini Shizuoka 2026 3. leafmapの紹介と基礎ポップアップの表示きちんと横書きで表示され、「ここが会場」も太字になりました！ 46

Slide 47

Slide 47 text

47 静岡のデータを可視化してみよう 04

Slide 48

Slide 48 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようここで唐突な質問皆さん、お昼ごはんに何を食べましたか？（静岡にはおいしい食べ物がたくさんあります！！！） 48

Slide 49

Slide 49 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう私は、昨年参加時のお昼ごはんに海鮮丼を食べました静岡は、海鮮もおいしい！！（帰静したときに、1回は海鮮を食べてるくらい） 49

Slide 50

Slide 50 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう静岡市にある用宗漁港、清水港、由比漁港の3つの港がありますここで、水揚げされる魚介類を「しずまえ鮮魚」といいます 50 出典: https://www.city.shizuoka.lg.jp/s2473/s005023.html

Slide 51

Slide 51 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう静岡県のオープンデータカタログカタログサイトから「しずまえ鮮魚」を食べることが出来る飲食店のデータを使っていきます（※ 古い情報であることに注意） 51 出典: https://opendata.pref.shizuoka.jp/dataset/12287.html

Slide 52

Slide 52 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようまずは、pandasでCSVを読み込み中身を確認 52

Slide 53

Slide 53 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう CSVの中身を見ると、「緯度」「経度」が含まれている！ 53 静岡市「しずまえおさかな処マップ掲載飲食店」を改変して使用、CC BY 4.0

Slide 54

Slide 54 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう地図に表示する際は、「スポット名」、「詳細」、「電話番号」、「URL」辺りも表示したい → 欠損値の情報もあり、そのままだと「NaN」と地図上に表示されてしまう → pandasで当該箇所は「情報なし」に置換しよう 54 静岡市「しずまえおさかな処マップ掲載飲食店」を改変して使用、CC BY 4.0

Slide 55

Slide 55 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようここから先は、コードが長くなるため、Google Colabの Notebookをメインに説明していきます。詳しくは、冒頭に案内したNotebokをご覧ください。 55

Slide 56

Slide 56 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう欠損値を「情報なし」に変換 56

Slide 57

Slide 57 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようそれでは、きれいにしたデータを地図上に表示していきます。先ほど、書いたコードをベースに追加していきます。 57

Slide 58

Slide 58 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう DataFrameの内容を地図上に追加 for文でDataFrameの内容を1つずつ抽出しながらポップアップに表示する内容を装飾、地図に追加を繰り返していきます。 58

Slide 59

Slide 59 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう DataFrameの内容を地図上に追加地図上にDataFrameの内容が表示されました！！ 59

Slide 60

Slide 60 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようカスタムアイコンの追加地図上に情報を表示することができるようになりましたが、 ✓ 会場と飲食店のマーカーの区別がつかない ✓ 何だか味気ないといった課題があります。そこで、飲食店のマーカーをカスタムしましょう。以下のお魚のアイコンを表示していきます 60

Slide 61

Slide 61 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようカスタムアイコンの追加「folium」というライブラリにある「CustomIcon」を用いると画像やアイコンのサイズを指定し、地図上に表示できます。 61

Slide 62

Slide 62 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみようカスタムアイコンの追加お魚のアイコンが地図上に表示され、会場のマーカーと区別できました！ 62

Slide 63

Slide 63 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう近接したマーカーのグループ化お魚のアイコンが表示されたのはいいですが、密集している個所はたくさんのお魚が表示され、見づらいです。そこで、近接した場所のマーカーはグループ化するようにします。「folium」というライブラリにある「MarkerCluster」を用いると近接したマーカーをグループ化し、地図上に表示できます。 63

Slide 64

Slide 64 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう近接したマーカーのグループ化 64

Slide 65

Slide 65 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう近接したマーカーのグループ化グループ化され、見やすくなりました！！ 65

Slide 66

Slide 66 text

PyCon mini Shizuoka 2026 4. 静岡のデータを可視化してみよう HTMLとして出力たった1行でHTML形式で出力可能！！このHTMLをGitHub Pagesなどで公開すれば、誰でも地図を見れるように！！ 66

Slide 67

Slide 67 text

67 まとめ 05

Slide 68

Slide 68 text

68 まとめと思いきや宣伝です！ 05

Slide 69

Slide 69 text

PyCon mini Shizuoka 2026 5. 宣伝今回、用いたPythonライブラリであるleafmapのような地理空間情報を扱う自由かつオープンソースなソフトウェア群を FOSS4G（Free and Open Source Software for Geospatial）といいますそして、このFOSS4Gのコミュニティを支援している団体が主催する年次カンファレンスの名前もFOSS4Gです（ややこしい）各地の支部が主催する会議の名前も“FOSS4G”を冠することが多い（自己紹介にあったOSGeo.JPは日本の支部） 69

Slide 70

Slide 70 text

PyCon mini Shizuoka 2026 5. 宣伝 ● PyCon JP 2026は、8/21～23に広島国際会議場で開催 70 出典: https://2026.pycon.jp/

Slide 71

Slide 71 text

PyCon mini Shizuoka 2026 5. 宣伝なんと、その1週間後に同じ広島国際会議場で 71

Slide 72

Slide 72 text

PyCon mini Shizuoka 2026 5. 宣伝 FOSS4G Hiroshima 2026が開催されます！！ 72 出典: https://2026.foss4g.org/en/

Slide 73

Slide 73 text

PyCon mini Shizuoka 2026 5. 宣伝現在、発表のプロポーザルも募集中です！！ 73 出典: https://x.com/osgeojapan/status/2021472266895216922

Slide 74

Slide 74 text

74 今度こそまとめです！ 06

Slide 75

Slide 75 text

PyCon mini Shizuoka 2026 6. まとめ ● 地図を作成するためには、さまざまな知識が必要だが Pythonをはじめ、さまざまなツールのおかげで楽にできるように ● PythonでもWeb地図作成できるライブラリが近年出てきています ● Pythonを用いると、データ処理からWeb地図表示まで一気通貫で可能！！！今回の場合だと、欠損値の処理と地図上にデータを表示 75

Slide 76

Slide 76 text

PyCon mini Shizuoka 2026 本日のトークのゴール ✓ Web地図を作る上での基本事項がざっくり分かる ✓ 指定した場所の地図を表示できるようになる ✓ 緯度、経度の列があるCSV形式のデータを地図上に表示できるようになる ✓ 生成AIに質問するための地図の知識が身に付いた！？ 76

Slide 77

Slide 77 text

PyCon mini Shizuoka 2026 6. まとめ Pythonを用いて、地理空間情報で遊ぶのはめっちゃ楽しいです！！！あなたもぜひ、地理空間情報の沼へ！そして、FOSS4G Hiroshima 2026にも遊びに来てください 77

Slide 78

Slide 78 text

ありがとうございました！ ↑ X (旧Twitter)アカウント ↑ GitHubアカウント 78