|

WordPressの投稿：Leafletで表示する地図を切り替える

この情報は古くなっており、正確性・信頼性が低下しています

WordPressの投稿に、Leafletを利用して地理院地図やOpenStreetMapなどを動的に表示するのそれほど難しいことではありませんでした。
ただ表示するだけでは用途が限られてしまうので、今回は複数の地図タイルを切り替えて表示する方法を試してみました。

Leafletを使う準備

これまでと同じようにLeafletの設定を行います。
WordPressなのでfunctions.phpに、LeafletのスタイルシートとJavaScriptの2つを読み込ませます。順番は必ずスタイルシートを先にします。

<br />
function leaflet_enqueue_styles() {<br />
	wp_enqueue_style( 'leaflet-style', '//unpkg.com/leaflet@1.3.1/dist/leaflet.css', NULL, NULL );<br />
}<br />
add_action( 'wp_enqueue_scripts', 'leaflet_enqueue_styles' );<br />
/* 先にスタイルシートを読み込んでからJavaScriptを読み込む */<br />
function leaflet_enqueue_script() {<br />
	wp_enqueue_script( 'leaflet-js', '//unpkg.com/leaflet@1.3.1/dist/leaflet.js', NULL, NULL );<br />
}<br />
add_action('wp_enqueue_scripts', 'leaflet_enqueue_script');<br />

投稿へ地図を描き出すコンテナの指定

投稿の本文へ地図を表示するためのコンテナ要素（div）にid属性（ここではmymap）を指定します。コンテナ要素には高さ（height）を必ず指定します。

&lt;div id=&quot;mymap&quot; style=&quot;height: 400px;&quot;&gt;&lt;/div&gt;

この部分は一枚の地図を表示する場合と共通です。

複数の地図の設定

ここも投稿の本文へJavaScriptを記入します。
切り替える地図の分だけ設定をします。

<br />
&lt;script&gt;<br />
var std_map = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {<br />
    attribution: &quot;&lt;a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'&gt;地理院タイル&lt;/a&gt;&quot;<br />
});<br />
var seamlessphoto_map = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {<br />
    attribution: &quot;&lt;a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'&gt;地理院タイル&lt;/a&gt;&quot;<br />
});<br />
var os_map = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {<br />
    attribution: &quot;Map data © &lt;a href='https://www.openstreetmap.org/copyright' target='_blank'&gt;OpenStreetMap&lt;/a&gt; contributors&quot;<br />
});<br />
var myMaps = {<br />
    &quot;地理院地図 標準&quot;: std_map,<br />
    &quot;地理院地図 写真&quot;: seamlessphoto_map,<br />
    &quot;OpenStreetMap&quot;: os_map,<br />
};<br />
var baseMap = new L.map('mymap', {<br />
center: [38.260440, 140.882427],<br />
zoom: 15,<br />
layers: [std_map]<br />
});<br />
L.control.layers(myMaps).addTo(baseMap);<br />
&lt;/script&gt;<br />

2行目～4行目：地理院地図の標準タイルを使用するオブジェクトを生成。
5行目～7行目：地理院地図の写真タイルを使用するオブジェクトを生成。
8行目～10行目：OpenStreetMapのタイルを使用するオブジェクトを生成。

11行目～15行目：地図レイヤーを格納するオブジェクト（myMaps）のプロパティを設定。
“表示名”: 地図レイヤーオブジェクト名

16行目～20行目：最初に表示される地図オブジェクト（baseMap）のプロパティを設定。
center:［緯度, 経度］
zoom: 拡大率（ズームレベル）
leyers: ［地図レイヤーオブジェクト名］

21行目：地図タイルを切り替えるためのレイヤーコントロールを設定。
L.control.layers(地図レイヤーを格納したオブジェクト名).addTo(地図オブジェクト名);

複数地図タイル表示例

右上のアイコンから地図タイルを変更できます。


地図タイル変更の表示を常に展開しておくには、

L.control.layers(myMaps).addTo(baseMap);

の部分を
L.control.layers(myMaps, null, {collapsed: false}).addTo(baseMap);

とします。

類似投稿