CocoonのボタンでLeaflet地図を動かそう

スポンサーリンク

旅馬のオマケコーナーである、「バイクに乗って行きたい所」。文字通り、和休がいつかバイクに乗って訪れたい所を、地図に埋め込んだページです。

マーカーまみれになっちまった

CSVファイルによるマーカー(アイコン)の設置や、KMLファイルによるルートの設置ができるようになったので、ホイホイと追加していったのです。

そしたら日本列島がマーカーまみれになってしまい、マーカーがどこに立っているか分かりにくくなってきました。

ふと、ワンクリックで地図を移動できたらどうだろう、と思い、色々試してみたところ、Cocoonで用意されているボタンにJavaScriptを組み合わせることで実現できました。

では、作り方をご紹介しましょう。

スポンサーリンク

Leaflet地図にJavaScriptを追加

CocoonのボタンでLeaflet地図を動かそう

まず、Leaflet地図を配置します。

地図のコードはこちら。

<div id="waq3map-wrapper">
<div id="mapid1" class="waq3map"></div>
<p class="waq3map-caption">
CocoonのボタンでLeaflet地図を動かそう
</p>
<script>
var waq3map = L.map('mapid1',{
	center:[35,135],
	zoom:7,
	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');
var greenIcon= L.icon({
	iconUrl:'/wp-content/uploads/ico/telharu-Icon-green-75.png',
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
var waq3marker0=L.marker([35,135],{icon:greenIcon})
	.bindPopup('<strong>日本のへそ</strong>',{autoClose:false});
waq3map.addLayer(waq3marker0);
waq3marker0.openPopup();
L.control.scale().addTo(waq3map);
waq3map.panTo(new L.LatLng(35,135));
</script>
</div>

38行目の</script>の前に、次のコードを加えます。

Panto で移動

function pantohokkaido() {
  waq3map.panTo(new L.LatLng(43.344659,142.383139),7);
}

「Panto」で地図を移動させると、画面が切り替わったように動きます。

waq3map.panTo(new L.LatLng(ここに緯度を入力,ここに経度を入力),ここにズームレベルを入力(省略可));

Flyto で移動

function flytohokkaido() {
  waq3map.flyTo(new L.LatLng(43.344659,142.383139),7);
}

「Flyto」で地図を移動させると、視点が一度上空へ上昇し、目的地へ地図をスクロールしたあと、指定したズームレベルに下降するように動きます。

お好みで使い分けてください。

スポンサーリンク

Cocoonのボタンにonclick属性を追加

Cocoonブロックからボタンを選択する

Cocoonブロックから、ボタンを配置します。

HTMLとして編集を選択する

HTMLとして編集を選択すると、次のように変換されます。

<div class="wp-block-cocoon-blocks-button-1 button-block"><a href="" class="btn" target="_self">ボタン</a></div>

このコードのうち、

<a href="" class="btn" target="_self">ボタン</a>

の部分を

<button type="submit" onclick="pantohokkaido()" class="btn">Pantoで北海道に移動</button>

に置き換えてください。

エラーがでたらHTMLに変換を選択する

エラーが出ると思いますので、「HTMLに変換」を選択してください。ボタンブロックから、カスタムHTMLブロックに変換されます。

スポンサーリンク

実際の地図

CocoonのボタンでLeaflet地図を動かそう

「Panto~」を選ぶと、Pantoにより地図を移動し、「Flyto~」を選ぶと、Flytoにより地図を移動しますので、実際に見比べてみてください。

北海道ボタンをクリックすると、地図の中心を東経142.383139度、北緯43.344659度に移動します。

コメントをどうぞ!