
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を重ねて表示することも可能です。
コメント