地図が表示されない！
Leafletのクイックスタートガイドやチュートリアルには参考になるコードが載っています。
・Leaflet Quick Start Guide
・Leaflet Tutorials
このコードをそのままWordPressのカスタムHTMLブロックに書き込んでも、ほとんどは問題なく表示できるのですが、うまく表示できない場合があります。
地理院地図を表示させるコードも、カスタムHTMLブロックに記入してプレビューすると地図が表示されないことがありました。
公開すると地図は表示されるので、コード自体に大きな問題はないはずです。また、タイミングによってはプレビューが表示されたりするので、原因はLeafletのコードがWordPressで編集中に使われているテーマと影響して不具合を起こしているのではないかと思います。
試しに、Leafletのスクリプト部分を｛ ｝で囲んで、変数の有効範囲を限定して（JavaScriptのブロックスコープを使って）カスタムHTMLブロックに書き込むとプレビューが表示されるようになりました。
現在のLeaflet1.9.4で掲載されているコードは以前のJavaScriptの書き方になっています。WordPressで使うカスタムHTMLブロックに書き込むコードは、2015年に策定されたJavaScriptの第6版目の標準規格ES6（ECMAScript 2015）に合わせた書き方にする方が良いかもしれません。
モダンなJavaScript構文にする
今回のLeafletで地理院地図を表示するコードを、モダンなJavaScript構文に合わせて書き換えてみました。
変更点は以下のようになります。
- ブロックスコープ：{ }で囲んだ変数は内部でのみ有効で、外部からは参照できないので、WordPressで使う変数との衝突防止
- オブジェクト化：地図の設定、タイルの設定をオブジェクトMAP_CONFIGにして、タイルを地図に読み込む処理と分離
- 変数の宣言：varは非推奨、代わりにconstで宣言
- スプレッド構文：L.tileLayerのオプション引数に、スプレッド構文…MAP_CONFIGを使い設定値（minZoom や maxZoom）を渡す
- ショートハンド：プロパティ名も変数名も同じなので、attribution: attributionではなく、attributionと1回書けばOK
書き換えたコード
<!-- LeafletのCSSを読み込み -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<style>
/* 地図を表示するコンテナのスタイル */
#map {
height: 400px;
border: 1px solid #000;
}
</style>
<!-- 地図を表示する要素 -->
<div id="map"></div>
<!-- LeafletのJavaScriptを読み込み -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
// ブロックスコープ
{
// 設定のオブジェクト化
const MAP_CONFIG = {
center: [38.2602, 140.8817],
zoom: 15,
minZoom: 9,
maxZoom: 18,
tile: {
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
}
};
// varをconstに変更
const map = L.map('map').setView(MAP_CONFIG.center, MAP_CONFIG.zoom);
const { url, attribution } = MAP_CONFIG.tile;
L.tileLayer(url, {
// スプレッド構文で設定を流し込む
...MAP_CONFIG,
// オブジェクトのショートハンド
attribution
}).addTo(map);
}
</script>
