2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 21

FOSS4G Advent Calendar 2025

@ra0kley(ぴっかりん)

MapLibre GL JSを用いたWeb地図をPythonで作ろう！【初級編】

2
Posted at

この記事は「FOSS4G Advent Calendar 2025」の21日目の記事です。

1. はじめに

FOSS4G 2025 Japan にて「PythonでMapLibre GL JSを用いたWebGISを作ってみよう」というタイトルで発表を行いました。
発表後にもっと情報を体系的にまとめておきたいという思いにいたり、Advent Calenderの記事にしてみました。
なお、表示する内容などについては、以下のZenn本を参考にさせて頂きました。

2. PythonでWeb地図を作成するモチベーション

Pythonは、位置情報が付いたデータを解析できるライブラリが様々あり、空間関係を用いた専門的な処理から深層学習を用いた解析まで行うことができます。
そこで、解析結果をPythonで簡単にWeb地図に表示できると、 解析から可視化までのワークフローが構築できる というメリットがあります。
個人的には、サクッとプロトタイプ版を作成したい場合に便利だなと思っており、プロダクトはきちんとJavaScriptなどで実装する必要があるなと考えています。

3. 使用するライブラリとインストール

2.5次元のインタラクティブな地図を描画するライブラリであるMapLibre GL JSのPythonバイディングを使いつつ、様々なデータを表示できる「leafmap」を使っていきます。

インストール方法

uvやpixiで環境構築を行っている場合、以下のコマンドでインストールできます。
もちろん、pipやcondaでもインストールできます。

uvを使用する場合

uv add "leafmap[maplibre]"

pixiを使用する場合

pixi add leafmap

無事にインストールまで済んだら、実際に地図の表示をしていきましょう。
この記事では、他の人も簡単に試せるように、Google Colaboratoryにて実行しています。
動かしてみたい方は、以下のリンクからどうぞ！

4. 地図の表示

まずは、地図の表示をやっていきます。
このNotebookでは神奈川県横浜市にある横浜市役所周辺の地図を表示します。

対象の場所を表示するうえで、まずその緯度経度を知らべる必要があります。
地理院地図やグーグルマップなどお好みのサービスで表示する場所の緯度経度を調べましょう。
横浜市役所の場合は以下の通りです。
緯度: 35.4503981度、経度: 139.6342083度

※ Web地図に表示するうえで、北緯、東経はプラス、南緯、西経はマイナスの値で示します。例えば、ボリビアにあるウユニ塩湖は、南緯20.1770度, 西経67.63601度にありますが、緯度は-20.1770度, 経度は-67.63601度と表します。

それでは、実際に地図の表示を行ってきましょう。
コメントを除くと、なんと3行で地図を表示することができます。

import leafmap.maplibregl as maplibre

# インタラクティブに動かせる地図のオブジェクトを作成
m = maplibre.Map(center=[139.6342083, 35.4503981], zoom=15, style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")
# 地図をNotebook上に表示
m

上のコードを実行すると、下の画像のような地図が表示されます！
image.png

Mapメソッドの引数には以下の3つを指定しています。

  • center: 地図の中心の経度、緯度
    [経度、緯度]の順番でリストで指定します。
  • zoom: 地図のズーム具合を表します。ズーム度合いが低い方から0～22で指定します。
  • style: 地図のスタイルを指定します。MapLibre Style Specificationに従っている必要があります。今回は、OpenStreetMapのベクトルタイルを指定しています。

5. マーカー（ピン）の表示

地図上にマーカー（ピン）を表示していきます。
今回は、横浜市役所の位置にマーカーを表示します。
add_markerメソッドを用いて簡単に表示できます。

import leafmap.maplibregl as maplibre

m = maplibre.Map(center=[139.6342083, 35.4503981], zoom=15, style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")
# 横浜市役所の位置にマーカーを表示
m.add_marker(lng_lat=[139.6342083, 35.4503981])
m

image.png

横浜市役所の位置にマーカーが表示されました！
続いて、マーカーをクリックするとポップアップが表示され、横浜市役所の文字が表示されるようにします。
add_markerメソッドのpopup引数に指定することで実現できます。

import leafmap.maplibregl as maplibre

m = maplibre.Map(center=[139.6342083, 35.4503981], zoom=15, style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")
# 横浜市役所の位置にピンを表示し、ポップアップで「横浜市役所」を表示
m.add_marker(lng_lat=[139.6342083, 35.4503981], popup={'text': '横浜市役所'})
m

image.png

ポップアップが表示されました！

5. ポイントデータの表示

ポイントデータとは？

特定の位置を示す最も基本的な位置情報の形状です。ポイントは(x, y)のように特定の1地点を表します。(x, y, z)のように3次元でも表すことができます。
例えば、店舗の場所やバス停の場所など、特定の場所を表すときに使われています。

使用するデータ

様々な位置情報付きのデータが公開されています。ここでは国土交通省が公開している 国土数値情報 から、「バス停留所データ」を使用します。
上のリンクから神奈川県のバス停留所データをダウンロードし、ダウンロードしたZIPファイルを解凍、その中からgeojsonを取り出します。
今回は、取り出したgeojsonファイルをbus_stop_kanagawa.geojsonという名前で保存しています。

表示方法

GeoPandasというライブラリを用いて、ダウンロードしたgeojsonファイルを位置情報に対応したDataFrame形式であるGeoDataFrameとして読み込みます。
その後、add_gdfメソッドを用いてポイントデータを地図上に追加しています。
今回はポイントデータを表示するので、layer_type引数にcircleを指定するとポイントデータとして認識するようになります。

import leafmap.maplibregl as maplibre
import geopandas as gpd

point_data_path = "/content/sample_data/bus_stop_kanagawa.geojson" # 自分のデータのパスに変えてください

m = maplibre.Map(center=[139.6342083, 35.4503981],
                 zoom=15,
                 style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")

# クレジット表記のテキストをHTMLで記述
attribution_html = "<a href='https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P11-2022.html' target='_blank'>「国土数値情報（バス停留所データ）」（国土交通省）</a>"
# ポイントデータをGeoDataFrameとして読み込む
point_gdf = gpd.read_file(point_data_path)
# GeoDataFrameの内容を地図上に追加
m.add_gdf(point_gdf, layer_type="circle", fit_bounds=False, source_args={"attribution": attribution_html})
m

image.png
上の画像の黒い点が表示されたポイントデータです。なお、ポップアップは設定しなくとも自動で表示するようになっています。
ポイントをアイコン画像にすることもできます。（後日追記します。）

6. ラインデータの表示

ラインデータとは？

2つ以上の点を結んだ線の形状のデータです。複数のポイントをつないで構成し、長さを持ちます。 例えば、道路や河川の中心線、電線など線状のデータを表すときに使われています。

使用するデータ

様々な位置情報付きのデータが公開されています。ここでは国土交通省が公開している 国土数値情報 から、「バスルートデータ」を使用します。
上のリンクから神奈川県のバスルートデータをダウンロードし、ダウンロードしたZIPファイルを解凍、その中からgeojsonを取り出します。
今回は、bus_route_kanagawa.geojsonという名前で保存しています。

表示方法

ポイントデータと同じように、GeoPandasというライブラリを用いて、ダウンロードしたgeojsonファイルをGeoDataFrameとして読み込みます。
その後、add_gdfメソッドを用いてラインデータを地図上に追加しています。
layer_type引数にlineを指定すると、ラインデータとして認識するようになります。
また、そのまま表示すると線が細くなってしまうので、paint引数にて太さを設定しています(ついでに線の色も指定しています)。

import leafmap.maplibregl as maplibre
import geopandas as gpd

line_data_path = "/content/sample_data/bus_route_kanagawa.geojson" # 自分のデータのパスに変えてください

m = maplibre.Map(center=[139.6342083, 35.4503981],
                 zoom=15,
                 style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")

# クレジット表記のテキストをHTMLで記述
attribution_html = "<a href='https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N07-2022.html' target='_blank'>「国土数値情報（バスルートデータ）」（国土交通省）</a>"
# ラインデータをGeoDataFrameとして読み込む
line_gdf = gpd.read_file(line_data_path)
# GeoDataFrameの内容を地図上に追加
m.add_gdf(line_gdf, layer_type="line", fit_bounds=False, paint={"line-color": "#0067c0", "line-width": 3}, source_args={"attribution": attribution_html})
m

image.png

上の図のようにラインデータを表示することができました！なお、ポップアップは設定しなくとも自動で表示するようになっています。

7. ポリゴンデータの表示

ポリゴンデータとは？

頂点を結ぶ線が閉じた形状（すなわち面）のデータです。領域で構成され、面積を持ちます。
例えば、建物や道路、公園など面状のデータを表すときに使われています。

使用するデータ

様々な位置情報付きのデータが公開されています。ここでは国土交通省が公開している 国土数値情報 から、「行政区域データ」を使用します。
上のリンクから神奈川県の行政区域データをダウンロードし、ダウンロードしたZIPファイルを解凍、その中からgeojsonを取り出します。
ここでは、admin_areas_kanagawa.geojsonという名前で保存しています。

表示方法

ポイントデータやラインデータと同じように、GeoPandasというライブラリを用いて、ダウンロードしたgeojsonファイルをGeoDataFrameとして読み込みます。
その後、add_gdfメソッドを用いてポリゴンデータを地図上に追加しています。
layer_type引数にfillを指定すると、ポリゴンデータとして認識してくれるようになります。
また、表示する色の調整として、fill-colorでポリゴンの塗りつぶし色を、fill-opacityで透過度を設定しています。

import leafmap.maplibregl as maplibre
import geopandas as gpd

polygon_data_path = "/content/drive/MyDrive/MapLibre_Python_tutorial_ja/data/admin_areas_kanagawa.geojson" # 自分のデータのパスに変えてください

m = maplibre.Map(center=[139.6342083, 35.4503981],
                 style="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json")

# クレジット表記のテキストをHTMLで記述
attribution_html = "<a href='https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P11-2022.html' target='_blank'>「国土数値情報（行政区域データ）」（国土交通省）</a>"
# ポリゴンデータをGeoDataFrameとして読み込む
polygon_gdf = gpd.read_file(polygon_data_path)
# GeoDataFrameの内容を地図上に追加
m.add_gdf(polygon_gdf, layer_type="fill", paint={"fill-color": "#0067c0", "fill-opacity": 0.3}, source_args={"attribution": attribution_html})
m

image.png

上の図のようにポリゴンデータを表示することができました！なお、ポップアップは設定しなくとも自動で表示するようになっています。

8. おわりに

この記事では、PythonでMapLibre GL JSベースのWeb地図を作成する方法として、

  • 地図の表示
  • ポイントデータの表示
  • ラインデータの表示
  • ポリゴンデータの表示
    を紹介しました。

MapLibre GL JSの強みが出てくる2.5次元表示などは、中級編に書きたいなと思っています。
この記事が、PythonでWeb地図を作ってみるきっかけになると嬉しいです。

参考にしたWebサイト

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?