Leafletでマーカークリック時に当該マーカーをバウンド(跳ねる動作を)させる方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で、マーカークリック時に当該マーカーをバウンド(跳ねる動作を)させたい。「Leaflet.SmoothMarkerBouncing」プラグインを導入することで実装できる模様。以下にサンプル及びソースコードをメモ。

Leaflet.SmoothMarkerBouncing

GitHub

https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing

デモページ

http://hosuaby.github.io/Leaflet.SmoothMarkerBouncing/

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/gh/hosuaby/Leaflet.SmoothMarkerBouncing@v3.0.3/dist/bundle.js"></script>

サンプル

https://taitan916.info/sample/leaflet.js/plugin/Leaflet.SmoothMarkerBouncing/

マーカーをクリックするとバウンドする点が確認できる。

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hosuaby/Leaflet.SmoothMarkerBouncing@v3.0.3/dist/bundle.js"></script>

<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

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

//マーカー生成
const mapData = [
    { 'lat' : '35.689607', 'lng' : '139.700571', 'body' : '新宿駅', }, 
    { 'lat' : '35.681236', 'lng' : '139.767125', 'body' : '東京駅',}, 
    { 'lat' : '35.628471', 'lng' : '139.73876', 'body' : '品川駅',}, 
    { 'lat' : '35.658581', 'lng' : '139.745433', 'body' : '東京タワー',}, 
    { 'lat' : '35.660238', 'lng' : '139.730077', 'body' : '六本木ヒルズ',}, 
    { 'lat' : '35.714765', 'lng' : '139.796655', 'body' : '浅草寺',}, 
    { 'lat' : '35.636564', 'lng' : '139.763144', 'body' : 'レインボーブリッジ',}, 
];
for( key in mapData ){
    makeMarker(mapData[key]);
}

function makeMarker( mapData ){

    L.marker([mapData.lat, mapData.lng])
    .bindPopup(mapData.body)
    .addTo(map)
    .setBouncingOptions({
        bounceHeight : 10, //バウンドする高さ
        bounceSpeed : 60, //バウンドするスピード(値が低いほど速く動く)
        exclusive : true, //バウンドする際、他のマーカーは停止
    })
    .on('click', function() {
        this.toggleBouncing();
    });
}
</script>

注意点

マーカーの色を変更する「leaflet.sprite」プラグインとは相性が悪いのかJSファイルを読み込むだけで動作しなくなった。

公式のデモページではオリジナルのマーカーだと問題無さそうなので、実運用の際はleaflet.spriteではなくオリジナルマーカーで対応する必要あり。