[Leaflet.js] Excelのデータからマーカーをプロット

レイヤやスケールを追加した基本的な地図を表示するところまでできました。
次にマーカーをプロットしてみます。

マーカーをプロットする方法

公式のDocumentationによれば，

L.marker([lat, lon],{option}).addTo(map);

1	L.marker([lat, lon],{option}).addTo(map);

と記述するだけでマーカーをプロットすることができます。

しかしながら，このようにスクリプト内に直接記述してマーカーをプロットすることが目的ではないので，Excelのデータと連携する手法を考えてみます。今考えられるだけでも以下のような手法があるはず。

VBAからスクリプトを実行させる
VBAでGeoJSONデータをつくり，地理院地図などでロードする
VBAでGeoJSONデータを含むHTMLファイルを書き出す

手始めにこのページでは，一つ目のVBAからスクリプトを実行させる方法をやってみます。

スクリプトを受けるHTMLファイルを用意しておきます。

<!DOCTYPE html><html>
    <head><title>Leaflet Marker Plot Sample</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <style>
            body {padding: 0; margin: 0}
            html, body, #map {height: 100%; width: 100%;}
        </style>    
    </head>
    <body>
        <div id="map"></div>
        <script>
            var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
                minZoom: 5, maxZoom: 14, 
                attribution: "<a href='http://bit.ly/mapsgsi' target='_blank'>地理院タイル</a>"
                })
            var map = L.map('map', {center: [35.6846,139.7527], zoom: 9,layers: [blk]});
            L.control.scale({imperial: false}).addTo(map);
        </script>
    </body>
</html>

<!DOCTYPE html><html>

<head><title>Leaflet Marker Plot Sample</title>

<style>

body {padding: 0; margin: 0}

html, body, #map {height: 100%; width: 100%;}

</style>

</head>

<body>

var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {

minZoom: 5, maxZoom: 14,

attribution: "<a href='http://bit.ly/mapsgsi' target='_blank'>地理院タイル</a>"

})

var map = L.map('map', {center: [35.6846,139.7527], zoom: 9,layers: [blk]});

L.control.scale({imperial: false}).addTo(map);

</script>

</body>

</html>

緯度･経度のデータをテーブルに用意します。以下の例では東京を中心にランダムに決めています。

このファイルは上のアイコンからダウンロードできます。

標準モジュールに以下のプロシージャを追加します。
プロシージャの説明はコメントに記載の通りです。

Sub Marker_Plot_Sample()

    Dim R As Long, Rmax As Long
    Dim lat As Double, lon As Double
    Dim Rank As String, Marker As String
    Dim ie As Object
    
    'IEオブジェクトを生成
    Set ie = CreateObject("InternetExplorer.Application")
    
    With ie
        '地図のページを開く
        .navigate "http://xl.hisholy.net/leaflet_essentials/sample3.html"
        'IEの表示が完了するまで待つ
        Do While .Busy Or .ReadyState < 4
            DoEvents
        Loop
    End With
    
    'テーブルのデータを用いる
    With ThisWorkbook.Worksheets(1).ListObjects(1)
        Rmax = .ListRows.Count 'テーブルの行数を取得
        
        For R = 1 To Rmax 'テーブルの1行目から最後の行までループ
            'テーブルの各行からデータを取得
            lat = .ListColumns("緯度").DataBodyRange(R)
            lon = .ListColumns("経度").DataBodyRange(R)
            Rank = .ListColumns("ランク").DataBodyRange(R)
            'スクリプトを作成
            Marker = "L.marker([" & lat & "," & lon & _
                "]).bindPopup(""" & Rank & """).addTo(map);"
            'IEでスクリプトを実行
            ie.Document.parentWindow.execScript (Marker)
        Next R
        
    End With
    
    'ウインドウのサイズを指定して表示
    With ie
        .Visible = True
        .Width = 1200
        .Height = 1200
    End With

    Set ie = Nothing

End Sub

Sub Marker_Plot_Sample()

Dim R As Long, Rmax As Long

Dim lat As Double, lon As Double

Dim Rank As String, Marker As String

Dim ie As Object

'IEオブジェクトを生成

Set ie = CreateObject("InternetExplorer.Application")

With ie

'地図のページを開く

.navigate "http://xl.hisholy.net/leaflet_essentials/sample3.html"

'IEの表示が完了するまで待つ

Do While .Busy Or .ReadyState < 4

DoEvents

Loop

End With

'テーブルのデータを用いる

With ThisWorkbook.Worksheets(1).ListObjects(1)

Rmax = .ListRows.Count 'テーブルの行数を取得

For R = 1 To Rmax 'テーブルの1行目から最後の行までループ

'テーブルの各行からデータを取得

lat = .ListColumns("緯度").DataBodyRange(R)

lon = .ListColumns("経度").DataBodyRange(R)

Rank = .ListColumns("ランク").DataBodyRange(R)

'スクリプトを作成

Marker = "L.marker([" & lat & "," & lon & _

"]).bindPopup(""" & Rank & """).addTo(map);"

'IEでスクリプトを実行

ie.Document.parentWindow.execScript (Marker)

Next R

End With

'ウインドウのサイズを指定して表示

With ie

.Visible = True

.Width = 1200

.Height = 1200

End With

Set ie = Nothing

End Sub

必要に応じてボタンなど設置すればよいと思いますが，まずはマクロのダイアログから実行します。

このような結果になります。マーカーをクリックすると，ランクA〜Cのデータがポップアップして表示されます。

マーカーをプロットする方法

関連記事

共有: