WordPressの投稿にLeafletでOpenStreetMapを表示

2018年7月18日

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つを読み込ませます。順番は必ずスタイルシートを先にしなければなりません。

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

　

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

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

<div id="mymap" style="height: 400px;"></div>

　

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

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

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

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でも簡単に利用することができそうです。