先日宮城と岩手で行ったQGISハンズオンで、leaflet.jsベースのウェブマップを簡単に出力できる qgis2web プラグインを紹介しました。その際、背景図をOpenStreetMap以外に変更できないか?という質問がありました。帰りがけだったため、ざざっと「ここのURLを書き換えるだけでOKです」と説明したのみでしたので、再度その内容をここに書いておきます。
index.htmlをテキストエディタで開いて35-40行目付近(地図に載せたレイヤの数により前後します)にあるこの2行を書き換えれば地理院地図の背景図に変換できます。
<変更前:OSM>
1 2 |
var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', |
<変更後:地理院タイル(標準)>
1 2 |
var basemap0 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html" target="_blank" rel="noopener noreferrer">国土地理院</a>', |
なお地理院地図で提供されているタイル地図であれば上記の
‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png’
に相当する箇所のURLを変えるだけで背景を変更できます。URLのリストは以下のリンク先を参照ください。