緯度経度などのデータファイルから，マーカーとイメージポップアップ付きの OpenStreetMap 地図プログラムを生成

前準備

Python のインストールと必要なPythonライブラリのインストール（Windows上）

1. Python 3.12 のインストール

   インストール済みの場合は実行不要。

   管理者権限でコマンドプロンプトを起動（手順：Windowsキーまたはスタートメニュー > cmd と入力 > 右クリック > 「管理者として実行」）し、以下を実行する。管理者権限は、wingetの--scope machineオプションでシステム全体にソフトウェアをインストールするために必要である。

   REM Python をシステム領域にインストール
   winget install --scope machine --id Python.Python.3.12 -e --silent
   REM Python のパス設定
   set "PYTHON_PATH=C:\Program Files\Python312"
   set "PYTHON_SCRIPTS_PATH=C:\Program Files\Python312\Scripts"
   echo "%PATH%" | find /i "%PYTHON_PATH%" >nul
   if errorlevel 1 setx PATH "%PATH%;%PYTHON_PATH%" /M >nul
   echo "%PATH%" | find /i "%PYTHON_SCRIPTS_PATH%" >nul
   if errorlevel 1 setx PATH "%PATH%;%PYTHON_SCRIPTS_PATH%" /M >nul

   【関連する外部ページ】

   Python の公式ページ: https://www.python.org/

2. AI エディタ Windsurf のインストール

   Pythonプログラムの編集・実行には、AI エディタの利用を推奨する。ここでは，Windsurfのインストールを説明する。

   管理者権限でコマンドプロンプトを起動（手順：Windowsキーまたはスタートメニュー > cmd と入力 > 右クリック > 「管理者として実行」）し、以下を実行して、Windsurfをシステム全体にインストールする。管理者権限は、wingetの--scope machineオプションでシステム全体にソフトウェアをインストールするために必要となる。

   winget install --scope machine Codeium.Windsurf -e --silent

   【関連する外部ページ】

   Windsurf の公式ページ: https://windsurf.com/

3. 必要なPythonライブラリのインストール
   1. Windowsで，管理者権限でコマンドプロンプトを起動（手順：Windowsキーまたはスタートメニュー > cmd と入力 > 右クリック > 「管理者として実行」）。
   2. 以下のコマンドを実行し，必要なライブラリをインストールする．

      pip install -U pandas folium
      

【関連する外部ページ】

• Python公式サイト：https://www.python.org/

【サイト内の関連ページ】

• Python詳細ガイド：別ページ »

手順

次のような，緯度経度を含むデータファイルと、画像ファイルを使う（ここでは、緯度経度を含むデータファイルと、画像ファイルをダウンロードして使うことにする）

1. 次の Python プログラムを実行

   import os
   print(os.getcwd())
   

   
2. 緯度経度を含むデータファイルの準備
   1. Web ブラウザを開き，次の URL からデータファイルをダウンロード

      https://www.kkaneko.jp/sample/photo-2017-12-03/hoge.csv

   2. 先ほど調べた「カレントディレクトリ」に、このファイルを置く
      

      * 自前で「緯度経度を含むデータファイルの準備」を行うときは、その文字コードを UTF-8 に変換しておくこと

3. 画像ファイルの準備
   1. Web ブラウザを開き，次の URL を開く

      https://www.kkaneko.jp/sample/photo-2017-12-03/index.html

   2. このディレクトリに .zip ファイルがある．.zip ファイルをダウンロードして展開（解凍）

      これは、複数の画像ファイルが入った .zip ファイルである

      
   3. 先ほど調べた「カレントディレクトリ」の下に「photo」というサブディレクトリを作る． そのディレクトリに画像ファイルを置く
      
4. 確認のため、地図表示だけを行ってみる

   import pandas as pd
   import folium
   datafile = "hoge.csv"
   lat, lon = 34.4586, 133.2295
   zoom_start = 18
   webfile_name = "c.html"
   
   m = folium.Map(location=[lat, lon], zoom_start=zoom_start)
   m.save(webfile_name)
   

   
5. 先ほど調べた「カレントディレクトリ」に HTML ファイルc.htmlができている
   
6. できたファイル c.html を Web ブラウザで開いてみる．地図が表示されれば OK．
   
7. 次は、データファイルの緯度経度などを使っての表示

   import pandas as pd
   import folium
   datafile = "hoge.csv"
   lat, lon = 34.4586, 133.2295
   zoom_start = 18
   webfile_name = "c2.html"
   
   m = folium.Map(location=[lat, lon], zoom_start=zoom_start)
   X = pd.read_csv(datafile)
   for index, r in X.iterrows():
       p = '<a href="https://maps.google.com/maps?q=&layer=c&cbll=%f, %f&cbp=11,0,0,0,0">%s <br/><img width="60" src="%s"></a>' % (r.lat, r.lon, r.building, r.imfile)
       folium.Marker([r.lat, r.lon], popup=p).add_to(m)
   
   m.save(webfile_name)
   

8. 先ほど調べた「カレントディレクトリ」に c2.html ファイルができるので Web ブラウザで開いてみる．マーカー付きの地図が表示されれば OK．

   マーカーをクリックすると、情報が表示される