メインコンテンツまでスキップ

Leafletにマーカーを追加する

· 約3分

Leafletを使って地図にマーカーを追加する方法についての解説します。
例えば、位置を示したり範囲を枠で囲う目的でLeafletを使うことが出来ます。

参考

地図の表示については以前の Leafletで地図をデザインする をご覧ください｡

mapへ直接追加する​

let marker1 = L.marker([35.170,136.882]);
marker1.addTo(map); //map.addLayer(marker1);

L.marker(<LatLng>)でMarkerを作成し､ marker.addTo (<Map|LayerGroup>)又はmap.addLayer(<Layer>)でmapに追加します｡ Markerの数が少ない場合はこれが一番シンプルで簡単な方法です｡ 数が多くなってくると1つ1つのMarkerを管理しにくくなるので次のLayerGroupを使うようにしましょう｡

LayerGroupでまとめて追加​

let marker2 = L.marker([35.172,136.884]);
let marker3 = L.marker([35.174,136.884]);
let group = L.layerGroup([marker2,marker3]);
group.addTo(map);

MarkerをLayerGroupに入れ､ayerGroupをMapへ追加しています｡

L.layerGroupを使うことで複数のLayer(Marker)を1つのLayerとして扱うことが出来ます｡ Layerの一括追加､削除や種類ごとにLayerを制御したい場合に便利です｡ LayerGroupの代わりにFeatureGroupを使うことでも同様の事が行えます｡

下のは直接追加したmarker1とLayerGroupを使ったmarker2,3のサンプルです｡

<div id="mapid"></div>
#mapid {
  height : 400px;
}
let map = L.map('mapid');
let latlng = L.latLng(35.170,136.882);
map.setView(latlng, 16);
let tile = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution:'<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
    minZoom:2,
    maxZoom:18,
});
map.addLayer(tile);

let marker1 = L.marker([35.170,136.882]);
marker1.addTo(map); //map.addLayer(marker1);

let marker2 = L.marker([35.172,136.884]);
let marker3 = L.marker([35.174,136.884]);
let group = L.layerGroup([marker2,marker3]);
group.addTo(map);

//以下説明用コード
let popupOpt = {autoClose:false,closeOnClick:false,closeButton:false,minWidth:0,};
let popup1 = L.popup(popupOpt).setContent('1');
let popup2_3 = L.popup(popupOpt).setContent('2and3');

marker1.bindPopup(popup1);
marker1.openPopup();

popup2_3.setLatLng([35.175,136.884]).openOn(map);
L.rectangle([[35.1715,136.8835],[35.175,136.8845]]).addTo(map);

Control.Layers​

let baseLayers = {'国土地理院':tile,};
let overlays = {'marker1':marker1,'marker2,3':group,};
L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);

L.control.layers(Object, Object)を使うことにより､Markerの表示､非表示をユーザが選択できるメニューを表示することができます｡

1つ目の引数baseLayersにはtileLayer､2つめの引数overlaysにはtileLayer上に表示したいMarkerなどを指定するのが基本的な使い方です｡ overlaysにtileLayerを指定してtileLayerを重ねて表示することも可能です｡

<div id="mapid"></div>
#mapid {
  height : 400px;
}
let map = L.map('mapid');
map.setView([35.1709194,136.8793482], 16);
let tile = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution:'<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
    minZoom:2,
    maxZoom:18,
});

map.addLayer(tile);

let marker1 = L.marker([35.170,136.882]);

let marker2 = L.marker([35.172,136.884]);
let marker3 = L.marker([35.174,136.884]);
let group = L.layerGroup([marker2,marker3]);

let baseLayers = {'国土地理院':tile,};
let overlays = {'marker1':marker1,'marker2,3':group,};
L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);

//以下説明用コード
let popupOpt = {autoClose:false,closeOnClick:false,closeButton:false,minWidth:0,};
let popup1 = L.popup(popupOpt).setContent('1');
let popup2_3 = L.popup(popupOpt).setContent('2and3');

popup1.setLatLng([35.1706,136.882]).openOn(map);
L.rectangle([[35.1697,136.8815],[35.1706,136.8825]]).addTo(map);
popup2_3.setLatLng([35.175,136.884]).openOn(map);
L.rectangle([[35.1715,136.8835],[35.175,136.8845]]).addTo(map);

コメント

コメントはまだありません