かねてより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 |
| tileurl | URL | 既定以外の地図タイルのURL |
| attribution | HTML | 地図タイルの権利表示 |
詳しくは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形式）でしたが、ベクトルデータではうまく表示できず。プラグインが必要そう？しばらく挑戦してみます。