leafletに縮尺を追加 & ズームコントローラをスライダーに変更

leafletの地図を見やすく＆操作しやすくするための小ネタです。

leafletの地図の表示についてはこちらを参照

縮尺を追加

やっぱり縮尺があったほうが地図は見やすい！
というわけで、縮尺を追加します。

この１行を追加するだけです！

1
L.control.scale().addTo(map);

左下に、メートル単位、フィート単位の縮尺が追加されました。

scalebar

フィートは日本では一般的ではないので、消しちゃいましょう。
imperialの値をfalseにします。

1
L.control.scale({imperial:false}).addTo(map);

メートルの縮尺だけになりました！

scalebar

他にも地図を重ねたり、切り替えたり、いろんなことが出来るようです。
leafletの公式HPを参照してみてください。

ズームコントローラをスライダーに変更

leafletのズームコントローラはデフォルトでは、＋ ーボタンになっています。

zoomControl

これをスライダーに変更してみます。
これはleafletではサポートしていないので、mapboxの機能を使います。

まずは<head>タグ内で、ズームスライダーを読み込みます。

1
2
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.css' rel='stylesheet' />

zoomsliderControlの表示をtrueに、
デフォルトのzoomControlの表示をfalseにします。

1
var map = L.map('map',{ zoomsliderControl: true,zoomControl: false}).setView([35.65863174　, 139.74542422], 14);

こうすると、スライダーが表示されます。

zoomControl