その1からの続きです。
Leafletには、スクロールを使用不可にするなど、いろいろな設定があります。
何を設定すると、どうなるかまとめました。
L.mapオブジェクトへの設定
マウスドラッグによるパン操作
マウスまたはタッチのドラッグで、マップを移動するかしないか。
dragging:false
キーボードの矢印キーで地図を移動することができます。
タッチによるズーム操作
クリックまたはタッチで、マップをズームするかしないか。
touchZoom:false
スクロールによるズーム操作
マウスのホイール操作で 、マップをズームするかしないか。
scrollWheelZoom:false,
ダブルクリックによるズーム操作
ダブルクリックで、マップをズームするかしないか。
doubleClickZoom:false
Shift+ドラッグによるボックスズーム操作
シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。
boxZoom:false
タップによるズーム操作
タップでマップのズーム操作をするかしないか。
tap:false
キーボードによる操作
キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。
keyboard:false
ズームコントロールの表示
ズームコントロールの表示、非表示。
zoomControl:false
ポップアップを閉じるタイミング
マップをクリックしたときに、ポップアップを閉じるか閉じないか。
closePopupOnClick: false
closePopupOnClick: true
ここまでの設定は、「L.mapオブジェクト」に対して設定します。
表示させたい地図を設定
「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));
旅馬内における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に続きます。
コメントをどうぞ!