地図上のマーカにIDを設定するプログラムです。
クリックイベントなどで、クリックしたマーカからIDを取得し、そのIDをキーにデータ参照したり、データベースを検索したりすることができます。
サンプルプログラムでは、マーカをクリックすると、地図上にマーカを表示と同じポップアップを表示し、詳細情報や写真を表示しています。
地図上のマーカにIDを設定するプログラムです。
クリックイベントなどで、クリックしたマーカからIDを取得し、そのIDをキーにデータ参照したり、データベースを検索したりすることができます。
サンプルプログラムでは、マーカをクリックすると、地図上にマーカを表示と同じポップアップを表示し、詳細情報や写真を表示しています。
HTML、CSSのソースは、地図にボタンを表示と同じです。
マーカ表示のサンプルプログラムでは、日本三名園の位置にマーカを表示しています。
マーカをクリックすると、名称と住所と写真を表示するポップアップが表示されます。
地図上にマーカを表示では、マーカにポップアップの表示情報をすべて登録していたため、マーカのデータが大きくなるという問題がありました。地図上のマーカに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 = []; // マーカ情報
マーカの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);
}