地図にボタンを表示（Leaflet）

全国ロケ地ガイド
Leafletの使い方
地図にボタンを表示（Leaflet）

プログラムの概要とデモ

　Leafletを使った地図に、HTMLのボタンを重ねて表示するプログラムです。ボタンは、日本全体を表示する「全体表示」ボタンを追加してみました。「全体表示」ボタンを押すと、日本全体を表示する状態に戻ります。

ソースの説明

HTMLの<head>タグのソース

　Leafletを利用する場合、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルとCSSファイルを参照するための指定を行います。ソースは、ダウンロードしたファイルを指定しても構いませんし、Leafletのサーバのファイルを直接指定しても構いません。私は、ダウンロードしたファイルを指定して利用しています。

<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>

HTMLの<body>タグのソース

　Leafletが利用するdivタグの下に、ボタン表示用のdivタグを作成します。ボタンは、onclickで関数を呼び出しますので、formタグは不要です。 onclickには、Leafletに対して、fitBoundメソッドで、全体表示を行う処理を記述してあります。

<div id="map_container"></div> <!-- 地図表示領域 -->
<div id="btn_container"> <!-- ボタン表示領域 -->
	<input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
</div>

CSSのソース

　ボタンのデザインは、CSSで設定します。ボタンは、地図と重ね合わせるため、「position: absolute」で、top,bottom,left,rightで、上下左右の端からの位置を指定しています。ボタンを地図の上に表示するためには、z-indexを指定する必要があります。

#map_container {
	position: absolute;
	top:0; left:0; right:0; bottom:0;
}
#btn_container {
	position: absolute;
	left:12px; bottom:12px;
	z-index: 1000;
}

JavaScriptのソース

　ボタンを押したときに、Leafletに対してメソッドを発行するためには、Leafletのインスタンスを覚えておく必要があります。サンプルでは、全体表示ボタンを追加していますので、地図の表示領域の緯度経度の最大値と最小値も設定しています。全体表示では、fitBoundsメソッドを利用します。 fitBoundsメソッドは、緯度経度の最大値と最小値が表示されるようにズームレベルを変えてくれます。
基本的な地図表示では、setViewメソッドで、日本全体を表示しましたが、setViewメソッドでは、中心の緯度経度とズームレベルで指定するため、画面の大きさによっては、日本全体が表示されるとは限りません。

var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）

function init() {
	map = L.map('map_container', { zoomControl: false });
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>地理院標準地図</a>"
	}).addTo(map); // 地理院地図を表示

	L.control.scale({imperial:false, position: 'bottomright'}).addTo(map); // 目盛表示
	L.control.zoom({position: 'bottomright'}).addTo(map); // ズーム制御

	bound = [[31.0, 129.5], [45.5, 145.8]]; // 日本本土の範囲
	map.fitBounds(bound); // 日本本土の範囲を表示
}

　このページで表示しているボタンは、Leafletの地図上に表示されていますが、Leafletとは関係なく表示しています。そのため、Leafletのコントローラと重なって表示される場合がありますので、スタイルで重ならないような位置を設定する必要があります。 Leafletのコントローラは、positionオプションで、移動可能ですので、地図の右側はLeafletの制御するボタン、地図の左側は、HTMLで作成したボタンのようにしてみました。