【Leaflet】 マップの初期設定をする
Contents
はじめに
Leaflet の初期設定をしていないと、マーカーが地球一周で消えたり、南極や北極の外側の領域まで表示されたりすることがあります。そこで今回は、Leaflet の初期設定（ maxBounds など）についてまとめたいと思います。
マップの基本設定
マップの基本設定を行うには次のように記述します。
var map = L.map('mapcontainer',{
preferCanvas:true, //Canvasレンダラーを選択
worldCopyJump: true, //一周してもマーカー保持
minZoom:2, //最小ズームレベルを設定
maxBounds: [[90, -Infinity], [-90, Infinity]] //北極と南極で範囲制限
});以下、それぞれのオプションについて説明します。
preferCanvas
Leaflet が使用しているレンダラーには、SVG レンダラーと Canvas レンダラーの二種類があります。preferCanvas: true として Canvas レンダラーを選択すると、使えるオプションが減る代わりに動作が少し軽くなるようです。
worldCopyJump
Leaflet では、経度が 180°を超えると別の地図に移行するようになっています。 worldCopyJump: true とすると、移行先の地図も前の地図のコピーとなるので、マーカーが消えないようになります。
Zoom
minZoom で最小ズームレベル、maxZoom で最大ズームレベル、Zoom で固定ズームレベルを設定できます。デフォルトでは 0 ~ 18 のズームレベルに対応しています。
maxBounds
表示されるエリアの範囲を指定できます。例えば maxBounds: [[90, -Infinity], [-90, Infinity]] とすると、経度方向で制限なし、緯度方向で ± 90°までとなるので、南極や北極の外側の領域が表示されなくなります。
dragging, tap …
Gesture Handling 機能（２本指操作のみ認識を許可する機能）など、タップイベントを付加するときなどにこれらの設定を false にします。例えば下記のように指定すると、地図が固定されて画像のように表示されます。
dragging: false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
tap: false,
keyboard: false,
zoomControl: false実装例
全体のソースコードと実装例は次のようになります。
<!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.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>
<script>
function init_map() {
var map = L.map('mapcontainer',{
preferCanvas:true, //Canvasレンダラーを選択
worldCopyJump: true, //一周してもマーカー保持
minZoom:2, //最小ズームレベルを設定
maxBounds: [[90, -Infinity], [-90, Infinity]] //北極と南極で範囲制限
});
map.setView([43.6599240747891, 142.14111328125003], 2); //初期の中心位置とズームレベルを設定
L.marker([43.6599240747891, 142.14111328125003]).addTo(map);
//マップタイルを読み込み、引用元を記載する
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>