WordPress上にLeafletで地図を載せる(その①)

Webサイトに地図を埋め込むのにGoogleMapのAPIがよく利用されていますけど、昨年にアカウントが必要になったり無料で利用できる範囲が縮小されたりして、いまいち使用したくありません。

GoogleMap以外の方法で地図を表示するには、OpenLayersや、LeafletといったJavaScriptのライブラリがあります。

数年前にOpenLayerを使って地図を作った事があるのですけど、バージョンが変わって使えなくなってたり、古いバージョンとの互換性が今ひとつで苦労した経験があるのであまり使う気がしません。
(乗算でレイヤを重ねられたのは良かったのですけど・・・)

そんなわけで、ここではLeafletを使ってWordpressに地図を載せたいと思います。
実は、WordpressにはLeaflet Mapというプラグインがあるので、地図を表示させるだけなら、こちらを使った方が便利です。
単にタイル配信された地図を表示させるだけで無く、座標を指定して図形を表示させたり、さらにGeoJSONから図形を表示させることまで出来ます。
そのため、背景図を1種類のみで使用するなら、このプラグインを使用されるのが一番良いかと思います。

ただし、私の場合、複数の地図(例えば地理院地図標準タイルと空中写真と明治期の迅速測図)を切り替えて表示できるようにしたいことが多いので、このプラグインだけではやりたいことが実現できません。
そのため、Leaflet Mapプラグインを使用せずに、Wordpressの投稿にLeafletによる地図を表示する方法を模索して、なんとか上手く表示されたので、その方法を記事にしてみました。」

まず、WordPressの記事に地図を表示する方法について考える前に、独立したWebページでLeafletの地図を表示させるHTMLを下記に載せてみます。

このHTMLの肝は下記の3カ所に集約することが出来るかと思います。

  1. leaflet.cssとleaflet.jsの読み込み(4・5行目)
  2. 地図を表示させるコンテナのid定義(6行目)
  3. 実際に地図を表示する(10~52行目)

①と②はLeafletで地図を表示させる投稿(例えば特定のタグやカテゴリの記事のみ)を対象にして、他の投稿ではCSSやJavaScriptを読み込まないようにして変な衝突や読み込み速度の低下を最小限にしたいところ。
そして、③は投稿画面でどのようにJavaScriptを打ち込むかが問題になります。

この辺りは次回の記事で記載してみたいと思います。