<div id="mapid"></div>
#mapid {
height : 400px;
}
let map = L.map('mapid');
map.setView([35.1709194,136.8793482], 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]);
let marker2 = L.marker([35.172,136.884]);
let marker3 = L.marker([35.174,136.884]);
let group = L.layerGroup([marker2,marker3]);
let baseLayers = {'国土地理院':tile,};
let overlays = {'marker1':marker1,'marker2,3':group,};
L.control.layers(baseLayers, overlays,{collapsed:false}).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');
popup1.setLatLng([35.1706,136.882]).openOn(map);
L.rectangle([[35.1697,136.8815],[35.1706,136.8825]]).addTo(map);
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.