日記/2020-12-15

Leaflet Map プラグイン

　Google Maps APIの仕様変更のせいで動かなくなって久しい「Google Maps API V3を用いたプラグイン」に代わる、LeafletというJavaScriptのライブラリを使った地図表示のためのFreeStyleWiki用プラグインを作ってみました。
　

インストール

• 以下のファイルをダウンロードして、plugin以下にインストールします。
  • leaflet.zip(330)
• さらに以下のモジュールをインストールします。
  • JSONのインストール
    • このプラグインでは、JSONからPerlのデータ構造への変換にJSONというモジュールを使っていますので、これをインストールします。本サイトが運用されているさくらインターネットのサーバーの場合、こちらのページに書かれているとおりの手順で、一般ユーザー環境にモジュールをインストールするための準備を整えれば、後は簡単。
    • CPANシェルから、以下のようにやればOK。

cpan[1]> install JSON

モジュールのパスの追加

　上記でインストールしたモジュールがFreeStyleWikiのプラグインから使えるように、一般ユーザー環境でのCPANモジュールのパスを、FreeStyleWikiのwiki.cgiに追加します。
　wiki.cgiの20行目辺りの以下の行に、

use lib './lib';

　一般ユーザー環境でCPANモジュールをインストールしたパスを追加すればOK。

use lib qw(/home/xxxxxxxxx/perl5/lib/perl5/ ./lib);

llmap プラグイン

{{llmap 35.658780957303776, 139.745411447452,500,500,16,gsi}}

• 「35.658780957303776」「139.745411447452」は、それぞれ緯度、経度。必須のパラメータです。
• 「500」「500」は、マップ領域のサイズ（それぞれ「横の画素数」「縦の画素数」）。省略するとそれぞれ「400」「300」になります。
• 「16」はマップ領域のズームの設定。「0」が最小（地球全体）で「18」が最大。省略すると「16」になります。値が小さすぎると、地図のタイプによっては何も表示されなくなることがあります。
• 「gsi」は表示する地図のタイプ。「gsi」（国土地理院標準地図）、「gsiphoto」（国土地理院写真）、「osm」（オープンストリートマップ）のいずれかが設定できます。省略すると「gsi」になります。

lmap プラグイン

{{lmap 東京都港区芝公園４丁目２−８,500,500,16,gsiphoto}}

• 「東京都港区芝公園４丁目２−８」は住所。必須のパラメータです。
• 「500」「500」は、マップ領域のサイズ（それぞれ「横の画素数」「縦の画素数」）。省略するとそれぞれ「400」「300」になります。
• 「16」はマップ領域のズームの設定。「0」が最小（地球全体）で「18」が最大。省略すると「16」になります。値が小さすぎると、地図のタイプによっては何も表示されなくなることがあります。
• 「gsiphoto」は表示する地図のタイプ。「gsi」（国土地理院標準地図）、「gsiphoto」（国土地理院写真）、「osm」（オープンストリートマップ）のいずれかが設定できます。省略すると「gsi」になります。

　lmap プラグインでは、ジオコーディングに国土地理院のAPIを使っています。ちょっと時間がかかる処理なので、ジオコーディングの結果を保存しておき、ページ内容の変更があるまではAPIを呼び出さず保存してある結果を使うことにしました。

　このAPIはhttpsなのですが、何が悪いんだかよくわからないのですが（すいません）SSL証明書のエラーでアクセスできないことがあります。こういう場合は（あんまりよくないようですが）、lmap.pmの63行目のコメントアウトを外して、証明書のホスト名による検証を抑制してください。

　また、与える住所はなるべく詳しく記した方が無難です。参考情報にもリンクを示したこちらのページで、国土地理院のジオコーディングAPIがテスト実行できますが、2020/12/15現在、「札幌駅」でジオコーディングすると、レスポンスのJSONの最初の要素は、なぜか「茨城県鉾田市札」のものになっています。lmap プラグインでは、何も考えず最初の要素の座標で地図を表示するようにしてあるので、住所として「札幌駅」を与えると茨城のマップが表示されることになってしまいます。
　これを防ぐためには、面倒でも「札幌駅」ではなく「北海道札幌市北区北６条西４丁目」を与えるようにするしかありません。
　

参考情報

• Leaflet
• 国土地理院 地理院タイル一覧
• OpenStreetMap
• 谷謙二研究室（埼玉大学教育学部人文地理学）Leafletの使い方
• 国土地理院APIでお手軽ジオコーディング＆逆ジオコーディング

追記

• 2020/12/17に地図タイルのURLをhttpsに変更し、さらにオープンストリートマップのタイルはjpから本家に変更しました。