JS地図ライブラリ・リーフレットで地図上にマーカー（Marker）を配置する方法とカスタマイズ

var map = L.map('myMap', {
    center: [32.639884, 130.987154],
    zoom: 8,
})

var layer_1 = L.marker([33,129]).addTo(map);

var layer_2 = L.marker([33,130]).bindPopup('popup').openPopup().addTo(map);

var layer_3 = L.marker([33,131]).bindTooltip('tooltip', {direction: 'bottom', offset: L.point(-15, 30)}).addTo(map);

var Icon = L.icon({
    iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
    iconSize: [38, 95],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
});
var layer_4 = L.marker([33,132], {icon: Icon}).addTo(map);

var layer_5 = L.marker([33,133], {draggable: true}).addTo(map);

// event
layer_5.addEventListener('moveend', (e) => {
  alert(e.target._latlng);
})

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var layer_1 = L.marker([33,129]);

var layer_2 = L.marker([33,130]).bindPopup('popup').openPopup();

var layer_3 = L.marker([33,131]).bindTooltip('tooltip', {direction: 'bottom', offset: L.point(-15, 30)});

var Icon = L.icon({
    iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
    iconSize: [38, 95],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
});
var layer_4 = L.marker([33,132], {icon: Icon});

var layer_5 = L.marker([33,133], {draggable: true});

// event
layer_5.addEventListener('moveend', (e) => {
  alert(e.target._latlng);
})

var layers = L.layerGroup([layer_1, layer_2, layer_3, layer_4, layer_5]);
var overlays = { "Icons": layers }

setTimeout(function(){
  layers.removeLayer(layer_4)
}, 2.5*1000);

const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
});

var baseMaps = {
  "osm": osm,
}

var map = L.map('myMap', {
    center: [32.639884, 130.987154],
    zoom: 8,
    layers: [osm, layers]
})

var layerControl = L.control.layers(baseMaps, overlays).addTo(map);

const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('myMap', {
    center: [32.639884, 130.987154],
    zoom: 8,
    layers: [osm]
})

function customIcon(latLng, text, size, type) {
    var customIcon = L.divIcon({
        html: `<span>${text}</span>`,
        className: type,
        iconSize: [size, size]
    });
    var marker = L.marker(latLng, {icon: customIcon});
    return marker;
}

customIcon([32.87036022808352, 131.02844238281253], '90', 100, 'circle').addTo(map);