4 地図とマーカー

4.1 地図の表示

pythonで地図を表示するライブラリとしてはfoliumがあります。まずは、地図を表示してみましょう。今回は熊本市役所を中心とした地図を表示したいと思います。

なお、foliumで緯度経度を指定する場合、緯度、経度の順番で記述する必要があります。map1.ipynbに以下を記述します。

import folium

map = folium.Map(location=[32.8032, 130.7080]) 
map

※一部表示されない場合：Ctrl+Shift+P でコマンドパレットを開き、Developer: Reload Window を実行します。

folium.Map の引数locationに地図の中心位置を指定します。今回は熊本市役所の緯度経度を指定しています。

zoom_startにズームレベル（0～18、大きい方が拡大）を設定できます。

import folium

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 
map

なお、表示した地図をwebサイトなどで使用したい場合、HTMLで保存できます。

import folium

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 
map.save('map.html')

4.2 マーカー

地図上の指定の場所にマーカーを設置できます。folium.Markerで場所を指定し、add_toで地図を指定します。

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

# マーカーの追加
marker = folium.Marker([32.8032, 130.7080])
marker.add_to(map)

map

popup/tooltip

Markerの引数popupにクリックしたときに表示する文字を設定できます。

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

# マーカーの追加
marker = folium.Marker([32.8032, 130.7080], popup="熊本市役所")
marker.add_to(map)

map

なお、popup を tooltip　にすることで、マウスを乗せるだけで表示できます。

popup/tooltipにはHTMLが使用可能です。popupに横幅を指定し、文字が横書きになるようにしてみます。

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

marker = folium.Marker([32.8032, 130.7080], popup='<div style="width:5em">熊本市役所</div>')
marker.add_to(map)

map

アイコン

アイコンを変更するには、folium.Iconで色（color）とアイコンの種類（icon）を指定します。

marker2 = folium.Marker([32.80237,130.711038], popup="鶴屋", icon=folium.Icon(color="red",icon="home"))
marker2.add_to(map)
map

iconの種類は絵文字での指定です。以下の「glyphicon glyphicon-XXX」のXXX部分を指定します。

例：glyphicon glyphicon-plus　→ icon="plus"

https://getbootstrap.com/docs/3.3/components/

4.3 データからマーカー表示

熊本県オープンデータより「熊本県「くまもとフリーWi-Fi」設置箇所一覧」を取得します。

これをDataFrameに読み込みます。文字コードがシフトJISでWindows独自の文字も使用しているため、cp932を指定します。

import pandas as pd

df = pd.read_csv("5_wificsv2025.6.16.csv", encoding="cp932")
df.head()

欠損データが無いかを確認します。

df.isnull().sum()

緯度経度に欠損があれば削除しておきます。

df = df.dropna(subset=["緯度","経度"])
df.head()

これを一行ずつ緯度と経度と名称を取得し、マーカーを設置します。

import folium

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

for index, row in df.iterrows():
    pos = [row['緯度'], row['経度']]
    marker = folium.Marker(pos, tooltip=row['名称'])
    marker.add_to(map)

map

4.4 まとめてマーカー表示

なお、foliumのプラグインであるMarkerClusterを使うと、たくさんあるマーカーを地域毎にまとめて表示できます。

import folium
from folium.plugins import MarkerCluster

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 
marker_cluster = MarkerCluster()

for index, row in df.iterrows():
    pos = [row['緯度'], row['経度']]
    marker = folium.Marker(pos, tooltip=row['名称'])
    marker.add_to(marker_cluster)

marker_cluster.add_to(map)
map

4.5 描画

直線

複数の点を結ぶ直線を描くことができます。folium.PolyLineを使用します。

import folium

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

# 直線の座標リスト（[緯度, 経度]）
points = [
    [32.8052, 130.7054],  # 熊本城
    [32.8032, 130.7080],  # 熊本市役所
    [32.80237, 130.711038],  # 鶴屋
]

# 直線を追加
line = folium.PolyLine(
    locations=points, # 座標リスト
    color='red', # 線の色
    weight=5, # 線の太さ
    opacity=0.7, # 不透明度
    tooltip="説明"
)
line.add_to(map)

map

円

ある地点から範囲を指定して円を描くことが出来ます。

import folium

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

en = folium.Circle(
    location=[32.80237,130.711038], # 中心
    radius=100, # 半径100m
    color='#ff0000', # 枠の色
    fill_color='#0000ff', # 塗りつぶしの色
    tooltip="説明"
)
en.add_to(map)

map

4.6 ヒートマップ

大量のデータポイントの分布を視覚化する場合、ヒートマップが有効です。folium.plugins.HeatMapを使用します。

熊本県のWi-Fi設置箇所のヒートマップを表示してみます。

import folium
from folium.plugins import HeatMap

map = folium.Map(location=[32.8032, 130.7080], zoom_start = 15) 

# DataFrameから緯度経度のリストを取得
data = df[['緯度','経度']].values.tolist()

# ヒートマップを追加
HeatMap(data, radius=20, blur=3).add_to(map)

map

radiusは半径（ピクセル単位）、blurはぼかしの程度を示します。ヒートマップは、データポイントが密集している領域を視覚的に把握するのに適しており、マーカーを大量に表示するよりも処理が高速です。