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

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

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

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

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

１．全体のコード（Demo1）

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin BounceMarker</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- plugin -->
    <script src="js/bouncemarker.js"></script>
<!-- plugin -->
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
        // Mapの基本設定
        var map = L.map('mapid').setView([35.7102, 139.8132], 15);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      		maxZoom: 18,
      		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      	}).addTo(map);

        var option1 = { bounceOnAdd:true }
        L.marker([35.7101,139.8117], option1).addTo(map);

        var option2 = {
            bounceOnAdd: true,
            bounceOnAddCallback: function(){ alert('call back function'); }
        }
        L.marker([35.7101,139.8157], option2).addTo(map);
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin BounceMarker</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

// Mapの基本設定

var map = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(map);

var option1 = { bounceOnAdd:true }

L.marker([35.7101,139.8117], option1).addTo(map);

var option2 = {

bounceOnAdd: true,

bounceOnAddCallback: function(){ alert('call back function'); }

}

L.marker([35.7101,139.8157], option2).addTo(map);

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

index1.html
js/bouncemarker.js

２−２．プラグインの読み込み

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

GitHub-BounceMarker

<!-- plugin -->
    <script src="js/bouncemarker.js"></script>
<!-- plugin -->

２−３．BounceMarker の設定

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

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

var option2 = {
    bounceOnAdd: true,
    bounceOnAddCallback: function(){ alert('call back function'); }
}
L.marker([35.7101,139.8157], option2).addTo(map);

var option2 = {

bounceOnAdd: true,

bounceOnAddCallback: function(){ alert('call back function'); }

}

L.marker([35.7101,139.8157], option2).addTo(map);

２−４．他のプラグインとの連携

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

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

<script>
    // Mapの基本設定
    var map = L.map('mapid').setView([35.7102, 139.8132], 15);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    }).addTo(map);

    // Font Awesome fa-utensils
    options = {
        prefix: 'fa'
       ,icon: 'utensils'
       ,markerColor: 'blue'
    };
    L.marker([35.7101,139.8132], { bounceOnAdd: true, icon: L.AwesomeMarkers.icon(options)}).addTo(map);

</script>

// Mapの基本設定

var map = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

}).addTo(map);

// Font Awesome fa-utensils

options = {

prefix: 'fa'

,icon: 'utensils'

,markerColor: 'blue'

};

L.marker([35.7101,139.8132], { bounceOnAdd: true, icon: L.AwesomeMarkers.icon(options)}).addTo(map);

</script>

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

leaflet入門｜プラグインでマーカーのアイコンを変更する（Awesome-Markers）

３．まとめ

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

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

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

４．その他のプラグイン

その他のマーカー系のおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン（マーカーのカスタマイズ）

マーカー系を含む全てのおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン