「server_web_blog」カテゴリーアーカイブ

WordPressのblogにLeafletプラグインを使って国土地理院の地図を貼り付ける方法を試した

コメントを残す

WordPressのblogにLeafletプラグインを使って国土地理院の地図を貼り付ける方法を試した。

基本的なLeafletプラグインの記述については、昨日のblogエントリを参照のこと。
→ WordPressのblogにLeafletプラグインを使ってOpenStreetMapの地図を貼り付ける方法を試した

例えば、次のように1行だけblogに記述すれば地図が埋め込まれて表示される。標準地図の地図タイルデータだ。
[leaflet-map height=480 address=”名古屋駅” zoom=14 zoomcontrol=1 attribution=”地理院タイル” tileurl=”https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png”]


(Google Mapsに比べると、ちょっと表示されるのに時間が掛かったりする。)

ちょうど今月号(2019年4月号)のインターフェース誌が国土地理院の地図などの特集をしている。

Interface(インターフェース) 2019年 04 月号
続きを読む →

WordPressのblogにLeafletプラグインを使ってOpenStreetMapの地図を貼り付ける方法を試した

コメントを残す

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に比べると、ちょっと表示されるのに時間が掛かったりする。)
続きを読む →