[Javascript] Leafletへマーカーを追加する方法

Leafletで地図を表示したいと考えたときに、単に地図だけを表示したい場面はほとんどないと思います｡
位置を示したり､範囲を枠で囲う目的でLeafletを使うことが殆どではないでしょうか｡
ですので今回は位置を示すMarkerの追加方法を解説していきます｡

地図の表示については以前の [Javascript] Leafletの始め方 をご覧ください｡
この記事のソースコードもこちらの記事に追加する形で説明しています｡

[Javascript] Leafletの始め方
Leafletとは簡単にWebページ上に地図を表示させることが出来るJavascriptライブラリです See the Pen Leaflet-start by panda1749 (@panda1749)...
blog.8nda.com

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に入れ､LayerGroupをMapへ追加しています｡

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

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

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にはtileLauer上に表示したいMarkerなどを指定するのが基本的な使い方です｡
overlaysにtileLayerを指定してtileLayerを重ねて表示することも可能です｡

コメント