Leafletとは
Leafletは、地図タイルを操作／表示するためのオープンソースのJavaScriptライブラリーです。Leaflet単体では地図を表示することはできません。そのため、マッププロバイダーの地図データをマップタイルとして利用します。
ユーザー登録不要で利用できて、軽量でインタラクティブな地図機能のほとんどをカバーしているのが特徴です。
- 自由: 「マップタイルレイヤー」を切り替えることで、国土地理院の地図やOpenStreetMap、独自のデザイン地図など、様々なマップを重ねて表示できます。
- 軽い: 動作がスムーズで、特にモバイルブラウザでのパフォーマンスに優れています。
- シンプル: 直感的なAPI設計になっており、数行のコードで地図を表示できます。
- 拡張性: プラグインが非常に豊富で、ヒートマップやアニメーション、GPS連携など、後付けで機能を増やせます。
- 無料：Leafletはだれでも2-clause BSD License（二条項BSDライセンス）に従えば無料で利用することができます。
2-clause BSD License（二条項BSDライセンス）
１ ソースコードの再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項を保持すること。
２ バイナリ形式の再配布は、上記の著作権表示、ここに列挙された条件、および下記の免責条項は、ドキュメントまたは他の資料で配布すること。
WordPressの投稿に地図を表示させる使い方であれば、ソースコードやバイナリコードの再配布を伴わないので、地図上にLeafletのライブラリを使用している表記（Leafletへのリンク）があれば大丈夫のようです。
マップタイル
利用できるマップタイルには無料のものから有料のものまで、さまざまな地図を使うことができますが、最もよく使われているのがOpenStreetMapで、Leafletのサイトでチュートリアルの例として使われているのもOpenStreetMapです。
地理院地図のマップタイル
日本国内に限定されますが、国土地理院のマップタイルも利用できます。基本測量成果となっているタイルを利用する際には、測量法に基づく申請が必要な場合があるとのことですが、WordPressから地理院タイルをリアルタイムに読み込んで表示するのであれば、出典を記載すれば申請は不要のようです。
ご利用について
基本測量成果となっているタイルを利用する際には、測量法に基づく申請が必要な場合があります。
詳しくは、国土地理院の地図の利用手続をご参照ください。
地理院タイルをウェブサイトやソフトウェア、アプリケーション上でリアルタイムに読み込んで利用する場合、地理院タイルは出典の明示のみで申請不要でご利用いただけます。
出典は、「国土地理院」または「地理院タイル」等と記載していただき、地理院タイル一覧ページ（https://maps.gsi.go.jp/development/ichiran.html）へのリンクを付けてください。地理院地図 ヘルプ > 地理院タイル一覧
https://maps.gsi.go.jp/development/ichiran.html
国土地理院のタイルには標準地図以外にも多くの種類があり、空中写真なども表示できます。ただし一部のタイルの表示には、地理院タイルの出典に加えてそれぞれのタイル独自の出所を明示する必要があります。
Leafletを使う準備
まずはクイックスタートガイドを参考にして試してみます。
・Leaflet Quick Start Guide
ガイドではhtmlファイルに記入してありますが、WordPressなのでhtmlのコードをカスタムHTMLのブロックに記入します。
スタイルシートのleaflet.cssとスクリプトのleaflet.jsの2つを読み込ませますが、必ずleaflet.cssが先になるようにします。
地図を表示するコンテナを設定
同じカスタムHTMLブロック内に、続けて地図を表示するコンテナの設定を記入します。
地図を表示したい場所に、特定のID（マップの名前）をつけたdiv要素を配置してコンテナを設定します。
地図のコンテナには、必ず高さを定義する必要があります。スタイルシートのheightで設定しましょう。設定しないと地図が表示されません。
また、マップの名前となるIDがコンテナとスタイルシートで一致していることも忘れずに。
地図の初期化
JavaScriptを使ってLeafletに指示を与えます。まず、地図を初期化します。
最初に表示される地図の中心座標とズームレベルにビューを設定します：
地図の座標は緯度と経度を数値で指定します。
タイルレイヤーを追加
地図に地図タイルレイヤーを作成し追加します。国土地理院の標準地図タイルレイヤーを使用します。
タイルレイヤーを作成するには、タイル画像のURLテンプレート、クレジット表記、必要であれば地図タイルレイヤーの最大・最小ズームレベルを設定します。
国土地理院の標準地図は、ズームレベル5～18までをカバーしています。このうち5～8の小縮尺地図（500万分1）タイルは追加の出所明示が必要になります。
小縮尺地図（500万分1）タイルを表示しないのであれば、最大ズームレベルを18に最小ズームレベルを9に設定しておけば、追加の出所明示は不要になります。
完成したコード
<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: 400px; } // 地図の高さを400ピクセルにする
</style>
<div id="map"></div>
<script>
var map = L.map('map').setView([38.2602, 140.8817], 15); // 地図の中心座標を仙台駅にする
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { // 標準地図タイルレイヤーを指定する
minZoom: 9, // 最小ズームレベルを9にする
maxZoom: 18, // 最大ズームレベルを18にする
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>' // 地理院タイルの出典を記載
}).addTo(map);
</script>