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