Leaflet Map ～ WordPressでタイル地図を表示する

2023年7月26日

当サイトは自作地図や自作地図アプリケーション画面で地図を載せる場合が多いですが、そろそろ汎用的なタイル地図をメインに切り替えようかと考えています。また、自作地図もタイル地図で提供したいと考えています。

このような経緯があり、タイル地図の表示について考えてみました。OpenStreetMapや国土地理院地図には、それぞれタイル地図を表示するための仕組みが用意されています。しかしながら、自分で作ったマーカーや図形などを地図上に表示したい場合は、違う方法を考えなければなりません。

そこで一般的には、LeafletというJavaScriptライブラリを使ってタイル地図を表示します。Leafletには、マーカーや図形などを表示する多くの機能が備わっています。しかし、HTMLやJavascriptのコードを作成するのは大変です。そこで、WordPressのプラグイン「Leaflet Map」を使えば、比較的簡単にタイル地図の表示ができます。

それでは、Leaflet Mapを使ってみましょう。

1.Leaflet Mapをインストール

WordPress管理画面で「プラグイン」タブを選択し、「新規追加」ボタンをクリックします。そして「Leaflet Map」で検索します。すると、上記画像のプラグインが表示されますから、インストールして有効化します。

ちなみに、Leaflet Mapを使った地図を記事内に組み込むには、ショートコードを使用します。具体的には、記事内にショートコード用のブロックを作って、その中にショートコードを記述します。(例は後述)

2.Leaflet Mapの設定

Leaflet Mapをインストールすると、WordPress管理画面のタブに「Leaflet Map」が加わります。まずは、「Setting」を選択します。

※デフォルト値は、あくまでもデフォルトに過ぎないものであり、地図作成の際に変更することができます。

デフォルトの緯度・経度

表示する地図のデフォルトの緯度・経度を指定します。このデフォルトの緯度・経度は、ショートコードを作成する時のデフォルト位置として重要です(後述)。地図作成を行うときにデフォルトとして適当な位置を指定してください。

デフォルトのズーム

タイル地図では、ズーム値ごとに地図が用意されています。そのズームの値は0～20くらいまでありますが、地図によって対応するズームは異なります。私が提供予定のJSMAP2地図は、ズーム13だけの予定です。

こちらのズームも、ショートコードを作る時のデフォルト値として重要です。また、小さい値にしておいた方が、目的の地図位置に移動しやすいです。

デフォルトの幅・高さ

表示させる地図のデフォルトの幅、高さを指定します。幅を100%、高さを任意の値にすると良いでしょう。

デフォルトのズーム範囲

前述のズーム値の範囲を指定します。主に利用するタイル地図のズーム範囲に合わせると良いでしょう。

タイル地図のURL指定

デフォルトのタイル地図のURLを指定します。初期状態ではOpenStreetMapのタイル地図URLが指定されていますが、そのままをおすすめします。それは、OpenStreetMap以外のタイル地図を利用すると、サポートされていないズーム倍率が多いため、下記で述べる「Shortcode Helper」で地図が空白だらけになって使いづらいからです。

それでも、Leaflet Mapに十分に慣れたら、一番多く使うタイル地図URLを指定することも良いでしょう。

クレジットの表示

タイル地図を利用する際には、CopyRightの記述やサービス名の表示、出典表示などの条件が付くことが多いです。そのクレジットを記述します。これはショートコード内でも設定できるのですが、ダブルコーテーションの扱いがショートコードでは不便なので、こちらで設定する方が良いです。

一番よく使うパターンのクレジットを用意しておきましょう。

3.ショートコードの作成

前述のとおり、タイル地図の記事内表示はショートコードを指定して行います。しかしながら、ショートコードの作成は、少し面倒です。そのため、地図の緯度・経度、マーカーの緯度・経度をビジュアルで作成できる「Shortcode Helper」が用意されています。

WordPress管理画面の「Leaflet Map」タブ内「Shortcode helper」を選択してください。

このようなショートコードを作成する画面が表示されます。ここで表示される地図は、前述の各種デフォルト指定が反映されています。それでは、表示したい地図範囲とマーカーの位置を指定します。

表示したい位置に地図を移動して、ズーム値も合わせます。そして、マーカーを表示したい位置へ移動させます。これらの操作で、地図の下部にショートコードが表示されます。これをコピペすれば良いです。

しかしながら、上記で得られるショートコードは、あくまでも最低限の表示でしかありません。表示するタイル地図では、いろいろな表現をしたいでしょう。そのためのサンプルが、画面の下に用意されています。

用意されるサンプルを使えば、だいたいの表示したいタイル地図の内容を実現できると思います。例えば、デフォルトで指定したタイル地図はOpenStreetMapでしたが、「tileurl」を指定することで違うタイル地図を表示できます。

ショートコードが完成したら、WordPressの記事内に用意したショートコードブロックに書き込みます。一番最初の藻岩山の地図は、上画像のショートコードで作られています。

4.様々なタイル地図を活用しよう

(C)Ecoris Inc 田んぼの利用状況地図

主なタイル地図と言えばOpenStreetMapや国土地理院の地図ですが、タイル地図のルールに準拠したタイル地図も多くリリースされています。それは、個人レベルでも作成できます。私も以下の記事で紹介しています。

Google Mapも良いのですが、やはり個性のある地図表現も大事だと思います。ぜひ、タイル地図を活用して、分かりやすいサイトの実現に努めましょう。