leaflet入門｜プラグインで任意の場所をリスト化して移動する（Locationlist）

leafletのプラグイン「Locationlist」を使用すると、任意の位置をリストに登録して選択・移動することができます。

実装すると以下のようになります。

リストに登録した場所を順番に移動することができます。

リストに登録した場所の一覧から任意の場所を選択・移動することができます。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin Locationlist</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 -->
    <link rel="stylesheet" href="css/leaflet.locationlist.css" />
    <script src="js/leaflet.locationlist.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);

        // Locationlist
        var locList = [
          { title: 'point_1' , latlng: [35.7101,139.8087], zoom: 15 },
          { title: 'point_2' , latlng: [35.7101,139.8127], zoom: 15 },
          { title: 'point_3' , latlng: [35.7101,139.8167], zoom: 15 }
        ];

        var locListCtrl = new L.control.locationlist(
          {
            locationsList: locList,
            showList:true
          }
        );

        map.addControl(locListCtrl);

        locListCtrl.on('prev', function() { alert('prev call back function.'); });
        locListCtrl.on('next', function() { alert('next call back function.'); });

        // add marker
        for(let locObj of locList) {
          L.marker(locObj.latlng).addTo(map);
        }

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin Locationlist</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);

// Locationlist

var locList = [

{ title: 'point_1' , latlng: [35.7101,139.8087], zoom: 15 },

{ title: 'point_2' , latlng: [35.7101,139.8127], zoom: 15 },

{ title: 'point_3' , latlng: [35.7101,139.8167], zoom: 15 }

];

var locListCtrl = new L.control.locationlist(

{

locationsList: locList,

showList:true

}

);

map.addControl(locListCtrl);

locListCtrl.on('prev', function() { alert('prev call back function.'); });

locListCtrl.on('next', function() { alert('next call back function.'); });

// add marker

for(let locObj of locList) {

L.marker(locObj.latlng).addTo(map);

}

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Locationlist

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

index.html
css/leaflet.locationlist.css
css/img/icon-next.png
css/img/icon-prev.png
js/leaflet.locationlist.js

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

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

<!-- plugin -->
    <link rel="stylesheet" href="css/leaflet.locationlist.css" />
    <script src="js/leaflet.locationlist.js"></script>
<!-- plugin -->

２−３．Locationlistの設定

L.control.locationlist オブジェクトを生成する際に、引数で登録する場所を設定します。

locationsList：場所を登録
showList：登録した場所をリスト表示する(true）/しない(false)

// Locationlist
var locList = [
  { title: 'point_1' , latlng: [35.7101,139.8087], zoom: 15 },
  { title: 'point_2' , latlng: [35.7101,139.8127], zoom: 15 },
  { title: 'point_3' , latlng: [35.7101,139.8167], zoom: 15 }
];

var locListCtrl = new L.control.locationlist(
  {
    locationsList: locList,
    showList:true
  }
);

map.addControl(locListCtrl);

// Locationlist

var locList = [

{ title: 'point_1' , latlng: [35.7101,139.8087], zoom: 15 },

{ title: 'point_2' , latlng: [35.7101,139.8127], zoom: 15 },

{ title: 'point_3' , latlng: [35.7101,139.8167], zoom: 15 }

];

var locListCtrl = new L.control.locationlist(

{

locationsList: locList,

showList:true

}

);

map.addControl(locListCtrl);

２−４．Locationlistの設定（その他のオプション）

前後（←・→）矢印で移動する際に、コールバック関数を設定することができます。

これを使用してメッセージの表示など処理を加えることができます。

locListCtrl.on('prev', function() { alert('prev call back function.'); });
locListCtrl.on('next', function() { alert('next call back function.'); });

1 2	locListCtrl.on('prev', function() { alert('prev call back function.'); }); locListCtrl.on('next', function() { alert('next call back function.'); });