leaflet入門|プラグインでマーカーにアニメーション効果をつける(BounceMarker)

leafletのプラグイン「BounceMarker」使用して、マーカーにアニメーション効果をつけます。

BounceMarker では、マーカーが地図の上から降ってくるようなアニメーション効果をつけることができます。

また、leafletの標準マーカー以外に、他のプラグインで表示したマーカーにも同様に効果をつけることができます。

Demo1:標準マーカーにアニメーション効果をつける

Demo2:プラグイン(Awesome-Markers)を使用したマーカーにアニメーション効果をつける

全体のコード(Demo1)

解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

Step1:ファイルの配置

ソースファイルは以下の構成になっています。

index1.html
js/bouncemarker.js

Step2:プラグインの読み込み

BounceMarker の本体は GitHubからダウンロードできます。

GitHub-BounceMarker

Step3:BounceMarker の設定

L.markerのオプションに、{ bounceOnAdd:true } を指定します。

また、bounceOnAddCallback オプションを使用するとコールバック関数も指定することができます。(Demo1の右側のマーカーにはコールバック関数を指定しています。)

Step4:他のプラグインとの連携

Demo2では、マーカーをカスタマイズするプラグイン(Awesome-Markers)を使用したマーカーに、BounceMarkerでアニメーション効果をつけました。

BounceMarkerの設定方法は、Demo1と同じです。

Awesome-Markers プラグインの使用方法につきましては、こちらに使用方法を記載しています。

leaflet入門|プラグインでマーカーのアイコンを変更する(Awesome-Markers)

まとめ

プラグイン(BounceMarker)を使用して、マーカーにアニメーション効果をつけました。

設定が簡単 & 他のプラグインとも連携でき便利なので、手軽にアニメーション効果を

つけたい場合に、オススメのプラグインです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする