leaflet入門｜mouseoverイベントをカスタマイズする（OverIntent）

Leafletのプラグイン「Leaflet.OverIntent」を使って、mouseoverイベントの代わりに、mouseintentイベントを使用して、よりユーザの意図するイベントを実行します。

今回は例としてマーカーにカーソルを当てると、ポップアップメッセージが表示されるようにしています。
比較として、以下のように設定しています。
・左側の縦に並んでいるマーカーには、mouseover イベントを設定。
・右側の縦に並んでいるマーカーには、mouseintent イベントを設定。
それぞれ、マーカーを早く縦になぞると違いが分かりやすいです。

Demoを表示

マーカーをなぞると、左側（mouseover）は、マウスカーソルを当てると都度ポップアップが表示されるのに対し、右側（mouseintent）は、ある程度カーソルがマーカー上にないとポップアップが表示されません。

個人的には、右側（mouseintent）の方が、本来選択したいマーカーのみポップアップが表示されるため、見やすいと思いました。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin Leaflet.OverIntent</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/leaflet.overintent.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',{
          center: [35.7122, 139.8117],
          zoom: 15,
          minZoom: 13,
          maxZoom: 16
        });

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

        function openPopup() {
          this.openPopup();
        }

        function initMouseIntentMarkers(L, map, bouncingOptions) {
          var i;
          var lat;
          var lng;

          for (i = 1; i <= 8; i++) {
            lat = 35.7182 - (i / 750);
            lng = 139.8147;
            L.marker([lat, lng], { intentDuration: 300 })
              .bindPopup("No."+ i)
              .addTo(map)
              .on('mouseintent', openPopup);
          }
        }

        function initMouseOverMarkers(L, map, bouncingOptions) {
          var i;
          var lat;
          var lng;

          for (i = 1; i <= 8; i++) {
            lat = 35.7182 - (i / 750);
            lng = 139.8087;            
            L.marker([lat, lng])
              .bindPopup("No."+ i)
              .addTo(map)
              .on('mouseover', openPopup);
          }
        }

        initMouseOverMarkers(L, map);
        initMouseIntentMarkers(L, map);

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin Leaflet.OverIntent</title>

<!--

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

-->

</style>

</head>

<body>

// Mapの基本設定

var map = L.map('mapid',{

center: [35.7122, 139.8117],

zoom: 15,

minZoom: 13,

maxZoom: 16

});

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

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

}).addTo(map);

function openPopup() {

this.openPopup();

}

function initMouseIntentMarkers(L, map, bouncingOptions) {

var i;

var lat;

var lng;

for (i = 1; i <= 8; i++) {

lat = 35.7182 - (i / 750);

lng = 139.8147;

L.marker([lat, lng], { intentDuration: 300 })

.bindPopup("No."+ i)

.addTo(map)

.on('mouseintent', openPopup);

}

function initMouseOverMarkers(L, map, bouncingOptions) {

var i;

var lat;

var lng;

for (i = 1; i <= 8; i++) {

lat = 35.7182 - (i / 750);

lng = 139.8087;

L.marker([lat, lng])

.bindPopup("No."+ i)

.addTo(map)

.on('mouseover', openPopup);

}

initMouseOverMarkers(L, map);

initMouseIntentMarkers(L, map);

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Leaflet.OverIntent

GitHubから取得したjsファイルを以下のように配置します。

index.html
js/leaflet.overintent.js

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

2-1で配置した css・jsファイルを読み込みます。

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

２−３．OverIntentの設定

L.markerオブジェクト生成時に、on(‘mouseintent’,関数名)で設定します。
また、オプション（intentDuration）を使うとイベントが通知されるまでの時間（ミリ秒）が設定できます。

L.marker([lat, lng], { intentDuration: 300 })
  .bindPopup("No."+ i)
  .addTo(map)
  .on('mouseintent', openPopup);

L.marker([lat, lng], { intentDuration: 300 })

.bindPopup("No."+ i)

.addTo(map)

.on('mouseintent', openPopup);

その他のコードは、主にデモ用にマーカーを表示する処理を行なっています。

これで、Leaflet.OverIntent を使用することができます。

３．その他のおすすめプラグイン

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

すべてのおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン