Streamlitでインタラクティブな地図を表示する：簡単なチュートリアルと例 | st.map

Name: Olaf Källström

Published on 2023/7/24

Streamlitは私たちがデータアプリケーションを構築する方法を革新しました。これはデータサイエンティストや開発者が簡単にインタラクティブなWebアプリケーションを作成するための強力なオープンソースのPythonライブラリです。その中でも最も魅力的な機能の1つがst.mapです。この関数を使用すると、ユーザーは簡単にインタラクティブな地図を作成して表示することができます。この記事では、st.mapの詳細について掘り下げ、実用的な例とチュートリアルを提供します。

データ分析と機械学習の世界では、位置データは重要な役割を果たします。病気の蔓延を追跡したり、交通パターンを分析したり、顧客の人口統計情報を理解したりする際に、地図は理解しやすく解釈しやすい視覚的な表現を提供します。Streamlitのst.map関数は、このような位置データの表示を容易にするツールです。

Streamlitでのst.mapの理解

Streamlitでのst.mapとは何ですか？

Streamlitでは、st.mapは地図を作成し、データポイントをプロットするための関数です。これは、ジオスペーシャルデータの可視化に使用される強力なPythonライブラリであるfoliumライブラリをラップしたものです。st.map関数は、名前付きカラム「lat」と「lon」または「latitude」と「longitude」を持つpandas DataFrameを受け取り、それを地図にプロットします。

import streamlit as st
import pandas as pd
 
## 緯度と経度の値を持つサンプルDataFrameを作成する
data = pd.DataFrame({
    'latitude': [37.7749, 34.0522, 40.7128],
    'longitude': [-122.4194, -118.2437, -74.0060]
})
 
## データを使用して地図を作成する
st.map(data)

このシンプルなコードは、地図を作成し、DataFrameからデータポイントをプロットします。地図は自動的にデータポイントを中心に配置し、ズームレベルを調整します。

Streamlitでの地図の表示

Streamlitで地図を表示するには、適切なデータを使用してst.map関数を呼び出すだけです。ただし、この機能を最大限に活用するためには、データの操作方法とマップのカスタマイズ方法を理解することが重要です。

例えば、ズームレベルを手動で調整するには、zoomパラメータに整数値を渡します。値が大きいほど、データポイントにより近づきます。値が小さいほど、ズームアウトします。

## 指定したズームレベルを持つ地図を作成する
st.map(data, zoom=10)

StreamlitアプリにGeoJSONマップを追加する方法

GeoJSONとは？

GeoJSONは、さまざまな地理的データ構造をエンコードするためのフォーマットです。Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon、およびGeometryCollectionなど、さまざまな地理データタイプをサポートしています。GeoJSONはJSON規格を使用して地図を作成するため、さまざまなアプリケーションで簡単に使用できます。

StreamlitアプリにGeoJSONマップを追加する方法

StreamlitアプリにGeoJSONマップを追加するには、GeoJSONデータをDataFrameに読み込み、それをst.map関数に渡す必要があります。以下は、これを行う方法の例です。

import geopandas as gpd
 
# GeoJSONデータをGeoDataFrameに読み込む
gdf = gpd.read_file('path_to_your_geojson_file.geojson')
 
# GeoDataFrameをDataFrameに変換する
df = pd.DataFrame(gdf)
 
# GeoJSONデータで地図を作成する
st.map(df)

この例では、geopandasライブラリを使用してGeoJSONデータをGeoDataFrameに読み込んでいます。次に、このGeoDataFrameを通常のpandas DataFrameに変換し、st.map関数に渡すことができます。

st.mapの機能を使って地図を拡張する

Streamlitのst.map関数には、地図を拡張するためのさまざまな機能があります。これには、カスタムマーカーの追加、ズームレベルの調整、およびデータポイントを中心に自動的にマップを配置する機能が含まれます。

カスタムマーカーの追加

地図にカスタムマーカーを追加することで、特定のデータポイントを強調表示することができます。カスタムマーカーを追加するには、緯度と経度の値を含む別のDataFrameを作成する必要があります。

# 強調表示したいポイントを含むDataFrameを作成する
highlight = pd.DataFrame({
    'latitude': [37.7749],
    'longitude': [-122.4194]
})
 
# 強調表示ポイントを地図に追加する
st.map(data, highlight)

この例では、地図上の1つのポイントを強調表示しています。highlight DataFrameにはこのポイントの緯度と経度の値が含まれています。元のデータとともに、このDataFrameをst.map関数に渡します。

ズームと自動中心設定

st.map関数は自動的に地図をデータポイントの周りに中心を設定し、ズームレベルを全ポイントに合わせて調整します。ただし、ズームレベルと地図の中心を手動で調整することもできます。

# 指定したズームレベルと中心で地図を作成する
st.map(data, zoom=10, center=[37.7749, -122.4194])

この例では、ズームレベルを10に設定し、地図を座標[37.7749、-122.4194]の周りに中心に合わせています。centerパラメータは、地図の中心にするポイントの緯度と経度のリストを受け取ります。

st.mapの問題のトラブルシューティング

st.mapは強力なツールですが、使用中に問題が発生することがあります。一般的な問題は「st.mapが機能しない」というエラーです。これは、st.mapに渡されるDataFrameが正しい列を持っていないか、列の名前が正しくない場合に発生することがよくあります。st.mapは、名前付きの列「lat」と「lon」または「latitude」と「longitude」を持つDataFrameを必要とします。

この問題に遭遇した場合は、DataFrameが正しい列を持っているか、適切な名前で列が命名されているかを確認してください。

Streamlitでのインタラクティブな地図の作成

インタラクティブな地図は、データ可視化の強力なツールです。これにより、ユーザーはズームインやズームアウト、異なる地域へのパン、さらにはデータポイントをクリックして詳細情報を取得することができます。Streamlitのst.map関数を使用すると、これらのインタラクティブな地図を簡単に作成することができます。

インタラクティブな地図を含める簡単な方法

Streamlitアプリにインタラクティブな地図を追加するには、緯度と経度の値を持つDataFrameをst.map関数に渡すだけで簡単です。ただし、カスタムマーカーやポップアップ情報などのインタラクティビティを追加して地図をさらに強化することもできます。

たとえば、データポイントをクリックしたときに詳細情報が表示されるポップアップ機能を追加できます。これは、表示したい情報を持つDataFrameに追加の列を追加することで行うことができます。

# ポップアップ情報のための追加の列を追加
data['info'] = ['サンフランシスコ', 'ロサンゼルス', 'ニューヨーク']
 
# データを使用して地図を作成する
st.map(data)

この例では、データポイントをクリックすると、都市の名前が表示されます。

StreamlitとFoliumを使用した地図の表示

st.mapは地図を作成するための強力なツールですが、Foliumなどの他のライブラリも使用してより複雑な地図を作成することができます。Foliumは、モバイルフレンドリーなインタラクティブな地図のための人気のあるオープンソースJavaScriptライブラリであるLeaflet.jsを使用してインタラクティブな地図を作成するためのPythonライブラリです。

StreamlitでFolium地図を表示するには、st.pydeck_chart関数を使用することができます。以下に例を示します。

import folium
 
# Folium地図を作成する
m = folium.Map(location=[37.7749, -122.4194], zoom_start=10)
 
# Streamlitで地図を表示する
st.pydeck_chart(m)

この例では、座標[37.7749、-122.4194]を中心にズームレベル10でFolium地図を作成しています。その後、st.pydeck_chart関数を使用してこの地図をStreamlitで表示します。

これは、Streamlitでインタラクティブな地図を作成する際の一例に過ぎません。PythonやStreamlit、Foliumなどのライブラリの力を借りれば、可能性は無限大です。データサイエンティストがデータを可視化するためにまたはデータ駆動型のWebアプリを構築する開発者が持つべき強力なツールとして、インタラクティブな地図があります。

Streamlitを使用したデータ可視化の向上

Streamlitのst.map関数は、データ可視化における強力なツールです。インタラクティブな地図を作成することで、データの視覚的な表現が簡単に理解でき、解釈できるようになります。このセクションでは、st.mapのいくつかの高度な機能と、データ可視化を向上させるためにそれらをどのように使用できるかについて説明します。

st.mapの高度な機能

st.mapの特徴の1つは、大規模なデータセットを処理できる能力です。数千のデータポイントを地図上で効率的にプロットすることができ、アプリの動作を遅くすることなく可視化することができます。これにより、大規模なデータセットを可視化するための理想的なツールになります。

st.mapのもう1つの高度な機能は、他のPythonライブラリとの互換性です。データ操作のためのpandas、数値計算のためのnumpy、追加の可視化オプションのためのmatplotlibなどのライブラリを使用することができます。この相互運用性により、st.mapはデータ可視化のための多目的なツールになります。

st.mapを使用したデータ可視化の例

st.mapのパワーを示すために、データ可視化のいくつかの例を見てみましょう。ニューヨーク市のAirbnbのリスティングデータセットを持っているとします。このリスティングを地図上にプロットし、ニューヨーク市におけるAirbnbのリスティングの分布を把握することができます。

# データセットを読み込む
data = pd.read_csv('nyc_airbnb_listings.csv')
 
# データを使用して地図を作成する
st.map(data)

この例では、地図上の各データポイントはAirbnbのリスティングを表しています。このデータを地図上に可視化することで、ニューヨーク市のどのエリアに最も多くのAirbnbのリスティングがあるかを簡単に確認することができます。

PyGWalkerを使用してStreamlitで簡単にインタラクティブなデータ可視化を作成する

PyGWalker (opens in a new tab)は、Streamlit AgGridの代替として素晴らしい結果をもたらす別の素晴らしいツールです。

PyGWalker + Streamlit のオンラインデモ (opens in a new tab)

PyGWalker (opens in a new tab)は、TableauのようなUIを容易にStreamlitアプリに組み込むことができるPythonライブラリです。

このパワフルなデータ可視化PythonライブラリをStreamlitアプリに組み込むための詳細な手順を、Coding is FunのSvenさん (opens in a new tab)が制作した素晴らしいビデオでチェックしてみてください！

Svenさんと彼の素晴らしい貢献 (opens in a new tab)にPyGWalkerコミュニティ (opens in a new tab)への特別な感謝を申し上げます！

さらに、次のリソースも参照できます:

PyGWalkerとStreamlitを使用したデータの探索と発見の方法 (opens in a new tab)
より多くのPyGWalkerの例については、PyGWalker GitHubページ (opens in a new tab)をご覧ください。

(opens in a new tab)

まとめ

Streamlitのst.map関数は、インタラクティブな地図を作成し、地理空間データを可視化するための強力なツールです。データサイエンティストがデータを可視化するためにまたはデータ駆動型のWebアプリを構築する開発者が持つべき強力なツールとして、st.mapはシンプルで効率的なインタラクティブな地図の作成方法を提供します。その高度な機能と他のPythonライブラリとの互換性により、st.mapはデータの可視化と分析を向上させることができる多目的なツールです。

よくある質問

Streamlitでマップを作成する方法は？

Streamlitでマップを作成するのは簡単です。緯度と経度の値を含むpandasのDataFrameが必要です。このDataFrameをst.map関数に渡すことで、マップを作成することができます。

インタラクティブな場所マップを作成するには？

st.map関数を使用して、Streamlitでインタラクティブな場所マップを作成することができます。この関数はマップを作成し、データポイントをプロットします。マップはインタラクティブであり、ズームインやズームアウト、さらには異なる地域をパンすることができます。また、マップのインタラクティビティを向上させるために、カスタムマーカーやポップアップ情報を追加することもできます。

StreamlitにはAPIがありますか？

はい、Streamlitにはシンプルで直感的なAPIがあります。このAPIを使用すると、インタラクティブなウェブアプリケーションを作成することができます。APIは、マップやチャート、テーブルなど、さまざまなタイプの視覚化の作成に使用することができるさまざまな関数を提供しています。また、ボタン、スライダー、テキスト入力などのインタラクティビティをアプリに追加するためにも、APIを使用することができます。

Streamlitでインタラクティブなデータダッシュボードを構築する：包括的なチュートリアル Streamlitで動的なタブを作成：簡単に始める方法