地図上のマーカにIDを設定(Leaflet)

プログラムの概要とデモ

地図上のマーカにIDを設定するプログラムです。 クリックイベントなどで、クリックしたマーカからIDを取得し、そのIDをキーにデータ参照したり、データベースを検索したりすることができます。 サンプルプログラムでは、マーカをクリックすると、地図上にマーカを表示と同じポップアップを表示し、詳細情報や写真を表示しています。

ソースの説明

HTML、CSSのソース

 HTML、CSSのソースは、地図にボタンを表示と同じです。

JavaScriptのデータ定義のソース

 マーカ表示のサンプルプログラムでは、日本三名園の位置にマーカを表示しています。 マーカをクリックすると、名称と住所と写真を表示するポップアップが表示されます。
 地図上にマーカを表示では、マーカにポップアップの表示情報をすべて登録していたため、マーカのデータが大きくなるという問題がありました。地図上のマーカにIDを設定すると、マーカには、IDと表示用の名前だけしか登録されないため、データをコンパクトにすることができます。また、IDをキーにしてデータベースを検索する処理を組み込むことも可能となります。

var placeList = [{ // マーカデータの定義 'name':'兼六園', 'addr':'石川県金沢市兼六町', 'coord':{'lat':36.562214, 'lng':136.662544}, 'photo':'<img src="img/kenrokuen.jpg" width="180" height="120" />' },{ 'name':'後楽園', 'addr':'岡山県岡山市北区後楽園', 'coord':{'lat':34.667849, 'lng':133.934932}, 'photo':'<img src="img/korakuen.jpg" width="180" height="120" />' },{ 'name':'偕楽園', 'addr':'茨城県水戸市常磐町1丁目', 'coord':{'lat':36.374166, 'lng':140.452557}, 'photo':'<img src="img/kairakuen.jpg" width="180" height="120" />' }]; var map; // leaflet地図 var bound; // 表示領域(全体表示で表示される範囲) var mark = []; // マーカ情報

JavaScriptのプログラムのソース

 マーカのIDの設定は、Leafletの機能ではなく、Javascriptの機能で使って行っています。 マーカ情報の配列に、Leafletを使って作成したマーカオブジェクトを格納し、そのマーカオブジェクトに、'ID'という名前のハッシュを追加しているだけです。
 Leafletでは、クリックしたオブジェクトは、e.targetで参照できますので、e.target.idで設定したIDを参照できます。
 サンプルプログラムでは、テータ定義された配列をループし、Markerの登録時に配列のインデックスをIDとして登録し、クリック時に参照しています。 クリックイベントの処理では、クリックしたマーカのIDから、データ配列を参照し、ポップアップを表示しています。

function init() { ・・・・・ let grp = L.layerGroup(); // マーカ表示用レイヤグループ map.addLayer(grp); let latLng = L.latLng(placeList[0].coord.lat, placeList[0].coord.lng); bound = L.latLngBounds(latLng, latLng); for (let i = 0; i < placeList.length; i++) { // マーカを登録 let place = placeList[i]; latLng = L.latLng(place.coord.lat, place.coord.lng); bound.extend(latLng); mark[i] = L.marker(latLng, {title: place.name}); mark[i].id = i; mark[i].addTo(grp).on('click', markClick); } map.fitBounds(bound); // マーカ全体の範囲を表示 } function markClick(e) { // マーカクリック時の処理 let place = placeList[e.target.id]; let str = place.name + '<br>\n' + place.addr + '<br>\n'; if (typeof(place.photo) != 'undefined') str += place.photo; L.popup().setLatLng(e.latlng).setContent(str).openOn(map); }
Copyright (C) ASH Joe Masumura