|

WordPressの投稿にLeafletでOpenStreetMapを表示 2026年版

Leafletとは

Leafletは、地図タイルを操作／表示するためのオープンソースのJavaScriptライブラリーです。Leaflet単体では地図を表示することはできません。そのため、マッププロバイダーの地図データをマップタイルとして利用します。
ユーザー登録不要で利用できて、軽量でインタラクティブな地図機能のほとんどをカバーしているのが特徴です。

  • 自由: 「マップタイルレイヤー」を切り替えることで、国土地理院の地図やOpenStreetMap、独自のデザイン地図など、様々なマップを重ねて表示できます。
  • 軽い: 動作がスムーズで、特にモバイルブラウザでのパフォーマンスに優れています。
  • シンプル: 直感的なAPI設計になっており、数行のコードで地図を表示できます。
  • 拡張性: プラグインが非常に豊富で、ヒートマップやアニメーション、GPS連携など、後付けで機能を増やせます。
  • 無料：Leafletはだれでも2-clause BSD License（二条項BSDライセンス）に従えば無料で利用することができます。
    2-clause BSD License（二条項BSDライセンス）
    １　ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
    ２　バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。
    WordPressの投稿に地図を表示させる使い方であれば、ソースコードやバイナリコードの再配布を伴わないので、地図上にLeafletのライブラリを使用している表記（Leafletへのリンク）があれば大丈夫のようです。

マップタイル

利用できるマップタイルには無料のものから有料のものまで、さまざまな地図を使うことができますが、最もよく使われているのがOpenStreetMapで、Leafletのサイトでチュートリアルの例として使われているのもOpenStreetMapです。
日本国内に限定されますが、国土地理院のマップタイルも利用できます。

Leafletを使う準備

まずはクイックスタートガイドを参考にして試してみます。
・Leaflet Quick Start Guide
ガイドではhtmlファイルに記入してありますが、WordPressなのでhtmlのコードをカスタムHTMLのブロックに記入します。

スタイルシートのleaflet.cssとスクリプトのleaflet.jsの2つを読み込ませますが、必ずleaflet.cssが先になるようにします。

地図を表示するコンテナを設定

同じカスタムHTMLブロック内に、続けて地図を表示するコンテナの設定を記入します。

地図を表示したい場所に、特定のID（マップの名前）をつけたdiv要素を配置してコンテナを設定します。
地図のコンテナには、必ず高さを定義する必要があります。スタイルシートのheightで設定しましょう。設定しないと地図が表示されません。
また、マップの名前となるIDがコンテナとスタイルシートで一致していることも忘れずに。

地図の初期化

JavaScriptを使ってLeafletに指示を与えます。まず、地図を初期化します。
最初に表示される地図の中心座標とズームレベルにビューを設定します：

地図の座標は緯度と経度を数値で指定します。

タイルレイヤーを追加

地図に地図タイルレイヤーを作成し追加します。クイックスタートガイドに従いOpenStreetMapのタイルレイヤーを使用します。
タイルレイヤーを作成するには、タイル画像のURLテンプレート、クレジット表記、必要であれば地図タイルレイヤーの最大ズームレベルを設定します。

地図タイルにOpenStreetMap に基づくものを使用する際は、クレジット表記（著作権表示に従って出典を明記）する必要があります。
https://osmfoundation.org/wiki/Licence/Attribution_Guidelines

完成したコード

以下のコードをコピーしてカスタムHTMLブロックに貼り付ければ地図が表示されます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

<style>
#map { height: 180px; }
</style>

<div id="map"></div>

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script>

地図表示例

このコードで地図が表示されない！

タイルレイヤーを追加するスクリプトは、div要素とleaflet.jsの読み込み後に実行されるようにしないと地図が表示されません。
WordPressのテーマによってはスクリプトの読み込みタイミングでエラーになり、地図が表示されないことがあります。
以下のように、DOMContentLoadedイベントにスクリプトを指定して、ページが読み込まれ、HTML の解析が終わった時点で読込まれるようにすると、確実に地図を表示できます。

<script>
document.addEventListener('DOMContentLoaded', function(){
	var map = L.map('map').setView([51.505, -0.09], 13);

	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    maxZoom: 19,
	    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
});
</script>

類似投稿