【Leaflet】 マップの初期設定をする

はじめに

 Leaflet の初期設定をしていないと、マーカーが地球一周で消えたり、南極や北極の外側の領域まで表示されたりすることがあります。そこで今回は、Leaflet の初期設定( maxBounds など)についてまとめたいと思います。

図1.初期設定していない状態のマップ

マップの基本設定

 マップの基本設定を行うには次のように記述します。

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 機能(2本指操作のみ認識を許可する機能)など、タップイベントを付加するときなどにこれらの設定を 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>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です