<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; margin: 0; }
#map { width: 100%; height: 100%; }
.leaflet-marker-icon-color-blue { filter: hue-rotate( 30deg); }
.leaflet-marker-icon-color-pink { filter: hue-rotate( 90deg); }
.leaflet-marker-icon-color-red { filter: hue-rotate(150deg); }
.leaflet-marker-icon-color-yellow { filter: hue-rotate(210deg); }
.leaflet-marker-icon-color-green { filter: hue-rotate(270deg); }
.leaflet-marker-icon-color-alua { filter: hue-rotate(330deg); }
.leaflet-marker-icon-color-rainbow { animation: 6s linear 0s infinite normal filter_hue_rotate; }
@keyframes filter_hue_rotate {
0% { filter: hue-rotate( 0deg); }
100% { filter: hue-rotate(360deg); }
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
// 即時関数
(() => {
// 地図の設定
const map = L.map('map').setView([30.37486500, 130.9576461], 14);
// 地図タイルの設定
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// markerとpopupの設定
const marker = L.marker([30.37486500, 130.9576461], { title: 'marker-title' })
.addTo(map)
.bindPopup('<h3>test</h3><p>hogehoge</p>')
.openPopup();
// markerのiconの要素にClassを追加
L.DomUtil.addClass(marker.getElement(), 'leaflet-marker-icon-color-rainbow');
})();
</script>
</body>
</html>
参考情報
https://osm.org/
https://openstreetmap.org/
https://leafletjs.com/
https://leafletjs.com/examples/quick-start/
https://leafletjs.com/reference.html
https://leafletjs.com/reference.html#map
https://leafletjs.com/reference.html#marker
https://leafletjs.com/reference.html#domutil
あとがき
ノンプログラマーの素人が記述をしたコードです。
狭い利用範囲と少ない利用頻度での確認ですので、
記載内容に間違いや勘違いがあるかもしれません。
上記内容を参照の際は自己責任でお願い致します。