WordPressにLeafletで地図を表示

かねてよりWordPressで組まれた本ブログに様々な情報を書き込んだ地図を表示したいと思っていました。例えばピンやコメントを配置したり、ある道程を表示したりといったことです。

もちろん既存の地図配信サービスでも可能なこともありますし、より手軽に利用できることもあります。

多少の面倒くささがあっても、より自由に操作したかったので、今回はJavaScriptライブラリ「Leaflet.js」を調べてみました。

Leaflet – a JavaScript library for interactive maps

https://leafletjs.com/

コーディング自体は機械的に行えばよいのですが、当ブログのように多数のページで地図を表示するには、面倒ですので、ショートタグで入力できるプラグイン「Leaflet Map (v 2.17.1)」を導入しました。

インストールするとでてくるメニュー「Shortcode Helper」を参考にすれば、だいたい様子はつかめるかと思います。

ショートコード内容
[leaflet-map]地図を表示
[leaflet-marker]]マーカーを配置
終了コード[[/leaflet-marker]までの要素がポップアップに表示
[leaflet-line]辺(ライン)を描画
頂点を追加して折れ線も可
[leaflet-polygon]多角形(ポリゴン)を描画
[leaflet-circle]円を描画

因みにWordPress上でショートコードを実行せず、そのまま表示するには大括弧を二つ重ねて記載(”[[“、”]]”)すればよいみたいです。

主な引数は次のとおり。

引数書式内容
lat, lng数値緯度、経度
width, height数値マップの幅、高さ
latlngs配列 (数値)緯度・経度をカンマ,で連結
さらに複数指定する場合はセミコロン;で連結
zoom数値 (0~20)ズームレベル
数字が大きいほど縮尺が大きくなる。
addressテキスト地名
addressesテキスト地名の配列、セミコロン;で連結
colorテキスト枠線の色
fillColorテキスト塗りつぶしの色
weight数値枠線の太さ、単位は恐らくpt
radius数値円の半径、単位は恐らくm
tileurlURL既定以外の地図タイルのURL
attributionHTML地図タイルの権利表示

詳しくはGitHubへ。

GitHub

https://github.com/bozdoz/wp-plugin-leaflet-map

addressの挙動を調べてみました。

まず一意に確定できない地名は、カンマで関連する地名をつなげて、特定させてあげれば誤動作を防げそうです。例「福島駅, 大阪市」

lat及びlngとaddressで違う地点を指定した場合は、addressの指定が優先されるようです。次図ではlat及びlngで神戸・三宮を指定していますが、addressでは大阪駅を指定しています。

[leaflet-map lat=34.69321 lng=135.19450 address="大阪駅" zoom=16]

colorはJavaScriptらしく、16進数表記でもカラーネームでも対応できそうです。

[leaflet-map][leaflet-polygon addresses="京都河原町駅; 大阪梅田駅; 神戸三宮駅" color="#ffff00" fillColor="firebrick" weight="5"]

OpenStreetMap以外の地図タイル、国土地理院の色別標高図を表示してみました。権利表示をお忘れなく。

[leaflet-map tileurl='https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png' attribution='<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet; <a href="http://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>, 海域部は海上保安庁海洋情報部の資料を使用して作成']

国土地理院が提供している地図タイルへのアドレスは下記で確認できます。

地理院地図|地理院タイル一覧

https://maps.gsi.go.jp/development/ichiran.html

以上の地図タイルはラスタデータ(主にPNG形式)でしたが、ベクトルデータではうまく表示できず。プラグインが必要そう?しばらく挑戦してみます。

投稿日:
カテゴリー: ICT タグ:

作成者: きたけん

神戸出身&在住。大学では環境を学び、今はまちづくりに携わる。思い立ったらすぐに飛び出してしまう。