Leafletのオプションまとめ【Leaflet導入記その2】

LeafletMap

2020.01.312022.10.02

その1からの続きです。

Leafletには、スクロールを使用不可にするなど、いろいろな設定があります。

何を設定すると、どうなるかまとめました。

L.mapオブジェクトへの設定
表示させたい地図を設定
1. 国土地理院の地図（標準デザイン）
2. 国土地理院の地図（淡色デザイン）
地図にスケールを表示させる
1. スケール表示
2. スケールを非表示
地図の中心を指定した地点に移動させる
旅馬内におけるLeaflet地図の基本形を定めました

L.mapオブジェクトへの設定

マウスドラッグによるパン操作

マウスまたはタッチのドラッグで、マップを移動するかしないか。

dragging:false

マウスドラッグによるパン操作を不可にしています。

キーボードの矢印キーで地図を移動することができます。

タッチによるズーム操作

クリックまたはタッチで、マップをズームするかしないか。

touchZoom:false

タッチによるズーム操作を不可にしています。

スクロールによるズーム操作

マウスのホイール操作で、マップをズームするかしないか。

scrollWheelZoom:false,

スクロールによるズーム操作を不可にしています。

ダブルクリックによるズーム操作

ダブルクリックで、マップをズームするかしないか。

doubleClickZoom:false

ダブルクリックによるズーム操作を不可にしています。

Shift＋ドラッグによるボックスズーム操作

シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。

boxZoom:false

Shift＋ドラッグによるボックスズーム操作を不可にしています。

タップによるズーム操作

タップでマップのズーム操作をするかしないか。

tap:false

タップによるズーム操作を不可にしています。

キーボードによる操作

キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。

keyboard:false

キーボードによる操作を不可にしています。

ズームコントロールの表示

ズームコントロールの表示、非表示。

zoomControl:false

ズームコントロールを非表示にしています。

ポップアップを閉じるタイミング

マップをクリックしたときに、ポップアップを閉じるか閉じないか。

closePopupOnClick: false

マップをクリックしても、ポップアップが閉じないように設定してます。

closePopupOnClick: true

マップをクリックすると、ポップアップが閉じます。

ここまでの設定は、「L.mapオブジェクト」に対して設定します。

設定前

var waq3map = L.map('mapid1',{
	center:[34.682622,135.186738],
	zoom:13,});

設定後

var waq3map = L.map('mapid1',{
	center:[34.682622,135.186738],
	zoom:13,
	dragging:true,
	touchZoom:true,
	scrollWheelZoom:true,
	doubleClickZoom:true,
	boxZoom:true,
	tap:true,
	keyboard:true,
	zoomControl:true,
	closePopupOnClick: false,
	});

表示させたい地図を設定

「L.tileLayer」オブジェクトの設定を変えることで、表示させたい地図が変わります。

また、「minZoom」及び「maxZoom」を設定することで、ズームの最大値・最小値を制限することができます。

旅馬での地図のズームレベルは、広域＝5、詳細＝18に制限しています。

国土地理院の地図（標準デザイン）

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	minZoom:5,
	maxZoom:18,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	}).addTo(waq3map);

地理院タイル（標準）

国土地理院の地図（淡色デザイン）

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	minZoom:5,
	maxZoom:18,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	}).addTo(waq3map);

地理院タイル（淡色）

地図にスケールを表示させる

L.control.scaleオブジェクトを追加することで、地図の左下にスケールを表示させることができます。

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

スケール表示

スケールを表示

スケールを非表示

地図の中心を指定した地点に移動させる

地図にマーカーを立てることができるのですが、複数のマーカーを立て、ポップアップ（吹き出し）を表示させると、地図の中心位置の表示がおかしくなります。

そこで、強制的に地図の中心を指定した地点へ移動させるコードを追加しました。

以下の例では、北緯35度、東経135度の「日本のへそ」及び、北緯34.642489度、東経135.112908度の「JR須磨駅」にマーカーを設置し、ポップアップを表示させています。

地図の中心は、北緯34.682622度、東経135.186738度にあるポートタワーです。

waq3map.panTo(new L.LatLng(34.682622,135.186738));

panToを設定しているので、地図の中心がポートタワーにあります

panToを設定していないので、地図の中心が変なところにあります。

旅馬内におけるLeaflet地図の基本形を定めました

これらの設定を加え、旅馬に貼り付ける地図の基本形としたのが以下の地図です。

旅馬に貼り付ける地図の基本形です

地図のHTMLはこちら。

これ以降の地図は、基本的にこのHTMLをベースにカスタマイズしてまいります。

<div id="waq3map-wrapper">
<div id="mapid17" class="waq3map"></div>
<p class="waq3map-caption">
旅馬に貼り付ける地図の基本形です
</p>
<script>
var waq3map = L.map('mapid17',{
	center:[34.682622,135.186738],
	zoom:13,
	dragging:true,
	touchZoom:true,
	scrollWheelZoom:true,
	doubleClickZoom:true,
	boxZoom:true,
	tap:true,
	keyboard:true,
	zoomControl:true,
	closePopupOnClick: false,
	});
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	minZoom:5,
	maxZoom:18,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	}).addTo(waq3map);
waq3map.zoomControl.setPosition('bottomright');
L.control.scale().addTo(waq3map);
waq3map.panTo(new L.LatLng(34.682622,135.186738));
</script>
</div>

その3に続きます。