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

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

地図の表示については以前の [Javascript] 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に入れ、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を重ねて表示することも可能です。

コメント