26 - アニメーション付きマーカー

学習内容: CSSアニメーションとJavaScriptを使ってマーカーにアニメーション効果を追加します。

ポイント:

CSSアニメーションでパルス・回転・バウンス効果
setInterval で位置をアニメーション
ルートに沿った移動アニメーション
requestAnimationFrame でスムーズなアニメーション

速度: 5

// CSSアニメーション用のDivIcon
const pulseIcon = L.divIcon({
    className: 'pulse-marker',
    html: '<div style="...">📍</div>',
    iconSize: [20, 20]
});

// JavaScriptでマーカーを移動
let position = 0;
const route = [[35.68, 139.76], [35.69, 139.77], ...];

function animate() {
    position += speed;
    if (position >= route.length) position = 0;

    marker.setLatLng(route[position]);
    requestAnimationFrame(animate);
}