リーフレット(leaflet)は軽量、多機能、拡張性、スマホ対応している地図の機能を持った、JavaScriptライブラリです。リーフレットを使ってマップ上をクリックして、マーカーなどのレイヤーを追加、マーカーをクリックで削除する方法を確認します。
デモ
See the Pen leaflet 5 by logsuke (@design-list) on CodePen.
レイヤーの追加・削除
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var baseLayers = {
"<span style='color: red;'>シンプル</span>": osm,
}
var map = L.map('myMap', {
center: [32.639884, 130.987154],
zoom: 8,
layers: [osm]
})
var LayerControl = L.control.layers(baseLayers).addTo(map);
map.on('click', function (e) {
var marker = L.marker([e.latlng.lat,e.latlng.lng]).on('click', removeMarker);
map.addLayer(marker)
});
function removeMarker () {
map.removeLayer(this)
}
17 ~ 20 : 地図上をクリックすると、removeMarker 関数が呼び出されるマーカーレイヤーを作成し、追加
22 ~ 24 : removeMarker 関数内でレイヤーを削除する。
JS地図ライブラリ・リーフレット レイヤーグループにレイヤーを追加・削除する
2023年01月10日
leaflet