|

WordPressの投稿にLeafletでOpenStreetMapを表示

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

Googleマップに代わるマップサービスをWordPressの投稿で表示するための方法をいくつか試してみました。
その中でも一番手軽に感じられたのはマップクライアントの「Leaflet」でした。

Leafletとは

マップクライアントの「Leaflet」は地図タイルを操作／表示するためのJavaScriptライブラリーで、マッププロバイダーの地図データをマップタイルとして利用します。無料のものから有料のものまで、さまざまな地図を使うことができますが、最もよく使われているのが「OpenStreetMap」です。
マップを表示する基本的な機能はありますが、さまざまなプラグインでさらに機能を拡張することもできます。

Leafletのライセンス

「Leaflet」はだれでも2-clause BSD License（二条項BSDライセンス）に従えば無料で利用することができます。

2-clause BSD License（二条項BSDライセンス）
１　ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
２　バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。

WordPressの投稿に地図を表示させる使い方であれば、ソースコードやバイナリコードの再配布を伴わないので、地図上にLeafletのライブラリを使用している表記（Leafletへのリンク）があれば大丈夫のようです。

Leafletを使う準備

まずはクイックスタートガイドを参考にして試してみます。
・Leaflet Quick Start Guide
ガイドではhtmlファイルに記入してありますが、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 />

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

ここからは投稿の本文へ記入します。
地図を表示するコンテナ要素にid属性（ここではmymap）を指定します。コンテナ要素の高さ（height）を指定しないと表示されませんので適切な値をstyleに記入しておきます。

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

投稿へ描き出す地図の設定

ここも投稿の本文へ記入します。
表示させる地図に「OpenStreetMap」のスタンダードタイルレイヤーを使う設定を行います。

<br />
&lt;script&gt;<br />
var map = L.map('mymap').setView([38.260440, 140.882427], 15);<br />
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {<br />
    attribution: 'Map data &amp;copy; &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt; contributors',<br />
}).addTo(map);<br />
&lt;/script&gt;<br />

2行目：マップオブジェクト（map）と地図を表示するコンテナ要素のid（mymap）を関連付けます。またsetViewで表示する地図の座標（緯度、経度）とズームレベルを指定します。
3行目：マップオブジェクトに追加するタイルレイヤー（https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png）を指定します。
4行目：attributionでOpenStreetMapのクレジット表記をします。
Leafletへのリンクは自動的に挿入されるようです。
※OpenStreetMap:JA:タイル利用規約
※OpenStreetMap:著作権とライセンス

OpenStreetMapのスタンダートタイルレイヤーを表示する例

OpenStreetMap日本のスタンダートタイルレイヤーを表示する例

OpenStreetMap Japanのタイルレイヤ―（https://tile.openstreetmap.jp/{z}/{x}/{y}.png）を指定しています。
色合いが違っているほかに、道路の幅の描き方や建物の表示名などにも違いがみられます。

情報量ではGoogleMapにどうしても劣ってしまいますが、LeafletとOpenStreetMapの組み合わせはWordPressでも簡単に利用することができそうです。

類似投稿