WordPressのblogにLeafletプラグインを使ってOpenStreetMapの地図を貼り付ける方法を試した。
今まではblogに地図を貼り付ける時にはGoogleMapsを使っていた。
→ 他のユーザーとマップやルートを共有する – パソコン – マップ ヘルプ
この方法で貼り付ける場合には、特にAPI Keyとかを取得しなくてもよいのだが、地図の表示のカスタマイズなど凝ったことができない。
代わりに利用できるOpenな地図データや地図APIとしては、OpenStreetMapなどがある。
Javascriptのコードを書いて地図を埋め込むこともできるのだが、簡単に地図を埋め込むにはWordPressのプラグインでLeafletプラグインを使うのが簡単だ。
例えば、次のように1行だけblogに記述すれば地図が埋め込まれて表示される。(プラグインをインストールしておくこと)
[leaflet-map height=480 address=”名古屋駅” zoom=17 zoomcontrol=1 attribution=”(C)OpenStreetMap contributors” tileurl=”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”]
(Google Mapsに比べると、ちょっと表示されるのに時間が掛かったりする。)
記述の解説をする。
leaflet-mapは、Leafletプラグインを指定している。
height=480は、埋め込む地図の画像の高さを480ピクセル分に指定している。
widthは、省略している。そうすると利用できる横幅の一杯に表示される。
zoom=17は、地図の拡大の度合いを指定している。
zoomcontrol=1は、埋め込んだ地図上にズームの制御用の「+/-」の表示をする設定をしている。
attribution=”文字列”は、地図のクレジットなどを埋め込んだ地図の右下の表示する。
tileurl=”URL文字列”は、オンラインの地図のタイルと呼ばれるデータへアクセスするためのURLを書く。
他にも機能があるのだが、公式githubページを参照のこと。(ページの後半にある)
OpenStreetMapを使う場合には、tileurlは”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”となる。
OpenStreetMapの利用には条件があり、クレジット表記をしなくてはならない。
→ OpenStreetMap 著作権とライセンス
なので、attributionで”(C)OpenStreetMap contributors”という表示を入れている。
できれば、
(C)<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors
と入れたいのだがうまくいかない。
地図上に地図マーカーを表示させることができる。
[leaflet-map height=480 address=”名古屋駅” zoom=17 zoomcontrol=1 attribution=”(C)OpenStreetMap contributors” tileurl=”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”]
[leaflet-marker visible=”true” address=”大名古屋ビルヂング”]大名古屋ビルヂングです[/leaflet-marker]
というようにleaflet-markerというのを使う。
addressを使わずに、緯度と経度を使って地図を表示させることもできる。マーカーも同様に緯度経度で指定できる。
[leaflet-map height=480 lat=35.159457 lng=136.905434 zoom=17 zoomcontrol=1 attribution=”(C)OpenStreetMap contributors” tileurl=”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”]
[leaflet-marker lat=35.15818270 lng=136.90473520 visible=”true”]測位位置1[/leaflet-marker]
と、addressの代わりに、lat=数値 lng=数値 として指定している。
地図上に線や円を描画することができる。
[leaflet-line latlngs=”35.164918,136.908455;35.164900,136.907415;35.165672,136.907382;35.165742,136.908380;35.164918,136.908455″ color=red]
この場合leaflet-lineを使って四角形を描いている。
円を描きたい場合はleaflet-circleを使う。
他にもleaflet-geojsonで、jsonデータを使って図形描画する方法がある。
これはまだ自分も試していない。
地図データ(地図タイル)をOpenStreetMap以外に切り替えることも可能だ。
日本国内だと国土地理院の地理院タイルとかが有名なデータだ。
ちょうど今月号(2019年4月号)のインターフェース誌が地図の特集をしている。
Interface(インターフェース) 2019年 04 月号
地図タイルを国土地理院の地理院タイルに切り替えるには、tileurlを”https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png”と記述すればよいようだ。
詳しい方法は次のblogエントリで書く。