leaflet入門｜プラグインでスライダーを表示する（slider）

leafletのプラグイン「Leaflet.Slider」を使って、地図上にスライダーを表示します。
このスライダーには、自由に処理を設定することができます。
今回は、スライダーの動きに合わせて地図のズームレベルを変更します。

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

このボタンをクリックすると、スライダーが表示されます。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin Leaflet.Slider</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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="css/leaflet-slider.css" />
    <script src="js/leaflet-slider.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);

        // slider
        slider = L.control.slider(function(value) {
            map.setView(map.getCenter(), value);
    			}, {
        		max: 16,
            min: 13,
        		value: 15,
        		step:1,
        		size: '250px',
        		orientation:'vertical',
        		id: 'slider',
            logo: '<i class="fas fa-sliders-h"></i>'
    		}).addTo(map);

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

<!DOCTYPE html>

<html>

<head>

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

// slider

slider = L.control.slider(function(value) {

map.setView(map.getCenter(), value);

}, {

max: 16,

min: 13,

value: 15,

step:1,

size: '250px',

orientation:'vertical',

id: 'slider',

logo: '<i class="fas fa-sliders-h"></i>'

}).addTo(map);

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Leaflet.Slider

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

index.html
css/leaflet-slider.css
js/leaflet-slider.js

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

Step1で配置した css・jsファイルを読み込みます。
また、今回はスライダーのアイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

<!-- plugin -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="css/leaflet-slider.css" />
    <script src="js/leaflet-slider.js"></script>
<!-- plugin -->

２−３．Leaflet.Sliderの設定

L.control.sliderオブジェクトを生成して、L.mapオブジェクトに追加します。

＜L.control.sliderの引数＞
第一引数：スライダーの値が変化した際の処理を定義します。
第二引数：スライダーのオプションを指定します。

// slider
slider = L.control.slider(function(value) {
    map.setView(map.getCenter(), value);
  }, {
    max: 16,
    min: 13,
    value: 15,
    step:1,
    size: '250px',
    orientation:'vertical',
    id: 'slider',
    logo: '<i class="fas fa-sliders-h"></i>'
}).addTo(map);

// slider

slider = L.control.slider(function(value) {

map.setView(map.getCenter(), value);

}, {

max: 16,

min: 13,

value: 15,

step:1,

size: '250px',

orientation:'vertical',

id: 'slider',

logo: '<i class="fas fa-sliders-h"></i>'

}).addTo(map);

オプション
max：スライダーの最大値を指定。
min：スライダーの最小値を指定。
value：スライダーの初期値を指定。
step：スライダーの増減値を指定。
orientation：スライダーの表示方向（水平・垂直）を指定。
id：スライダーの名前。
logo：スライダーボタンのアイコンを指定。文字でもOK。
※その他のオプションは、GitHubを参照してください。

これで、スライダーを表示できます。