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>

参考文献

参考記事