【Leaflet】マップにスケールバーを追加する

Contents

1 はじめに
2 スケールバーを追加する方法
3 実装例

はじめに

　Leflet で描画したマップをサイトに掲載するとき、スケールバーが有ったほうが見やすくなることが有ります。そこで今回は、Leaflet でスケールバーを追加する方法について紹介したいと思います。

スケールバーを追加する方法

　以下の１行を追加すれば、スケールバーが表示されます。

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

DrawTrail

図1.スケールバーを追加

　左下にスケールバーが追加されました。マイル/フィート表記もあるので、メートル表記のみにするには、以下のように記載します。

L.control.scale({imperial: false, metric: true}).addTo(map);

DrawTrail

図2.スケールバーをメートル表記に変更

　メートル表記のみになりました。
　スケールバーの位置を変更するためには、以下のように記載します。

L.control.scale({imperial: false, metric: true, position: 'topright'}).addTo(map);

DrawTrail

図3.スケールバーの位置を変更

　スケールバーの表示が右上になりました。

実装例

　ソースコードと実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<script>
function init_map() {

    const map = L.map('mapcontainer');
    map.setView([43.6599240747891, 142.14111328125003], 6); //初期の中心位置とズームレベルを設定

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);

    //スケールバーを追加する
    L.control.scale({imperial: false, metric: true}).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

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