<div id="mapid"></div>
#mapid {
height : 400px;
}
let map = L.map('mapid');
let latlng = L.latLng(35.170,136.882);
map.setView(latlng, 16);
let tile = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution:'<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
minZoom:2,
maxZoom:18,
});
map.addLayer(tile);
let marker1 = L.marker([35.170,136.882]);
marker1.addTo(map); //map.addLayer(marker1);
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);
//以下説明用コード
let popupOpt = {autoClose:false,closeOnClick:false,closeButton:false,minWidth:0,};
let popup1 = L.popup(popupOpt).setContent('1');
let popup2_3 = L.popup(popupOpt).setContent('2and3');
marker1.bindPopup(popup1);
marker1.openPopup();
popup2_3.setLatLng([35.175,136.884]).openOn(map);
L.rectangle([[35.1715,136.8835],[35.175,136.8845]]).addTo(map);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.