Webサイトに地図を埋め込むのにGoogleMapのAPIがよく利用されていますけど、昨年にアカウントが必要になったり無料で利用できる範囲が縮小されたりして、いまいち使用したくありません。
GoogleMap以外の方法で地図を表示するには、OpenLayersや、LeafletといったJavaScriptのライブラリがあります。
数年前にOpenLayerを使って地図を作った事があるのですけど、バージョンが変わって使えなくなってたり、古いバージョンとの互換性が今ひとつで苦労した経験があるのであまり使う気がしません。
(乗算でレイヤを重ねられたのは良かったのですけど・・・)
そんなわけで、ここではLeafletを使ってWordpressに地図を載せたいと思います。
実は、WordpressにはLeaflet Mapというプラグインがあるので、地図を表示させるだけなら、こちらを使った方が便利です。
単にタイル配信された地図を表示させるだけで無く、座標を指定して図形を表示させたり、さらにGeoJSONから図形を表示させることまで出来ます。
そのため、背景図を１種類のみで使用するなら、このプラグインを使用されるのが一番良いかと思います。
ただし、私の場合、複数の地図(例えば地理院地図標準タイルと空中写真と明治期の迅速測図)を切り替えて表示できるようにしたいことが多いので、このプラグインだけではやりたいことが実現できません。
そのため、Leaflet Mapプラグインを使用せずに、Wordpressの投稿にLeafletによる地図を表示する方法を模索して、なんとか上手く表示されたので、その方法を記事にしてみました。」
まず、WordPressの記事に地図を表示する方法について考える前に、独立したWebページでLeafletの地図を表示させるHTMLを下記に載せてみます。
<!DOCTYPE html><html>
<head><title>Leafletで地図を表示する</title>
<meta charset="UTF-8" name="robots" content="noindex">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<style>html, body, #leafletmap {height: 90%; width: 100%;}</style>
</meta>
</head>
<body>
<div id="leafletmap">
<script>
//切り替え可能とするタイルレイヤを生成（タイルURL，ズーム範囲，著作権表示などをオプションで設定）
var std = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
minZoom: 5, maxZoom: 18,
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
var pal = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
minZoom: 5, maxZoom: 18,
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
minZoom: 5, maxZoom: 14,
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
var ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
minZoom: 5, maxZoom: 18,
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
var rapid = L.tileLayer('http://habs.dc.affrc.go.jp/rapid16/{z}/{x}/{y}.png', {
tms: true, opacity: 1.0,
minZoom: 8, maxZoom: 16,
attribution: "<a href='https://habs.dc.affrc.go.jp/rapid16/' target='_blank'>迅速測図(農業環境技術研究所)</a>"
})
//
//地図を生成（初期表示の中心座標，ズームレベル，レイヤなどをオプションで設定）
var map = L.map('leafletmap', {center: [35.831,139.603], zoom: 15,layers: [rapid]});
//
//レイヤコントロールに切り替え可能とするレイヤを追加
L.control.layers({
'地理院タイル（標準地図）': std,
'地理院タイル（淡色地図）': pal,
'地理院タイル（写真）': ort,
'明治期迅速測図': rapid
},
{
//
}, {collapsed: true}).addTo(map);
//
//スケールコントロールを追加（オプションはフィート単位を非表示）
L.control.scale({imperial: false}).addTo(map);
</script>
</div>
</body>
</html>
このHTMLの肝は下記の３カ所に集約することが出来るかと思います。
- leaflet.cssとleaflet.jsの読み込み(4・5行目)
- 地図を表示させるコンテナのid定義(6行目)
- 実際に地図を表示する(10～52行目)
①と②はLeafletで地図を表示させる投稿(例えば特定のタグやカテゴリの記事のみ)を対象にして、他の投稿ではCSSやJavaScriptを読み込まないようにして変な衝突や読み込み速度の低下を最小限にしたいところ。
そして、③は投稿画面でどのようにJavaScriptを打ち込むかが問題になります。
この辺りは次回の記事で記載してみたいと思います。