「Leaflet」は、Webサイトに地図を載せる場合に利用するツールです。
「Leaflet」はフリーソフトでありながら、細かなオプションが用意されているのが特徴です。
リスト1 は、背景となる地図（ベース地図）を表示するコードです。
WordPressにLeafletを埋め込む場合は、事前準備として、function.phpに、Leafletを読み込むコードを記述します。
Leaflet入門
参考文献
参考記事
コード例
事例１：Leaflet入門（背景地図の表示）
function.php
まず、事前準備として、次のコードをfunction.phpに記述します。
function leaflet_enqueue_styles() {
wp_enqueue_style( 'leaflet-style', '//unpkg.com/leaflet@1.5.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.5.1/dist/leaflet-src.js', NULL, NULL );
}
add_action('wp_enqueue_scripts', 'leaflet_enqueue_script');テンプレートファイル
次にテンプレートファイルに次のコードを記述します。
<body>
<div id="map_1" style="height: 400px;"></div>
</body>
<script>
//////背景地図
var osm = new L.tileLayer
('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
});
var map_1 = L.map('map_1', {
layers: [osm],
center: [35.717007,139.752772],
zoom: 18,
zoomControl: true
});
</script>