以前に書いた「WordPress上にLeafletで地図を載せる(その④)～GeoJSONの情報を重ねる」の記事ではGeoJSONの内容(文字列)を直打ちしていましたが、情報量が多くなると色々と問題が出てきます。
当時はJavaScriptやらAjaxやらjQueryやらに慣れていなかったのですけど、気象庁のWebサイトからJsonをとってきて地図上に載せるページを作ったりしたこともあり、外部のGeoJSONの内容を表示できるようになりました。その方法を、備忘録を兼ねて記事にしてみました。
実際の動作画面は下記のようになります。
GeoJSONの中身は、私が生まれ育った街を東西に走る国道19号の前身にあたる「下街道」という道です。この道をQGISや地理院地図(に任意タイルで今昔マップを表示して)トレースすることで作成可能です。前回の記事では、GeoJSONの中身をテキストエディタでコピペしましたが、今回はネット上に保存したGeoJSONをjQueryを使って読み込んでいます。
そして、プログラムは下記になります。
header.php or header-insert.phpへの追記がなされていれば、このコードを打ち込めば地図が表示されるかと思います(クラシックエディタなどタグを直打ちできないとダメかと思われますが…)。
<div id="leafletmap">
<script>
//GeoJSONのURL
const sURL = "https://www.kobiwa.jp/gisdat/210518/ShitaKaido.geojson";
//
//切り替え可能とするタイルレイヤを生成（タイルURL，ズーム範囲，著作権表示などをオプションで設定）
let pal = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
minZoom: 5, maxZoom: 18,
attribution: "地理院タイル"
});
let ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
minZoom: 5, maxZoom: 18,
attribution: "地理院タイル"
});
let kjm = L.tileLayer('http://ktgis.net/kjmapw/kjtilemap/chukyo/2man/{z}/{x}/{y}.png', {
tms: true, opacity: 1.0,
minZoom: 5, maxZoom: 18, maxNativeZoom:8, maxNativeZoom:16,
attribution: "今昔マップ(中京圏:1888-1898年)"
});
//
//地図を生成（初期表示の中心座標，ズームレベル，レイヤなどをオプションで設定）
let map = L.map('leafletmap', {center:[35.175,136.902], zoom:12,layers: [kjm]});
//
//レイヤコントロールに切り替え可能とするレイヤを追加
let lc = L.control.layers({
'地理院タイル（淡色地図）': pal,
'地理院タイル（写真）': ort,
'今昔マップ': kjm
},
{
}, {collapsed: true}).addTo(map);
//
//GeoJsonとレイヤを準備を追加
let lyLine = null;
jQuery.getJSON(sURL)
.done(function(gjLine, status, xhr){
lyLine = L.geoJSON(gjLine, {style:{"color":"#ff0000", "weight":5, "opacity":0.7}});
map.addLayer(lyLine);
lc.addOverlay(lyLine, "下街道");
});
//
//スケールコントロールを追加（オプションはフィート単位を非表示）
L.control.scale({imperial: false}).addTo(map);
//
//
</script>
</div>
さて、実際に読み込んでいるのは35～40行目です。
まず、一番はまったが35行目です。
jQueryの「GetJSON」を呼び出すときは「$.getJSON」の形で書くように解説されている例が多いかと思います。私も当初はそのように書いていたのですが、「Cannot read property ‘$.getJSON’ of undefined」というエラーが出てしまいました。色々と検索してみると、メソッド名が衝突している事が原因のようで「jQuery.getJSON」とjQueryのgetJSONを使うように明記したところ無事に動きました。
36～40行目がJSON(GeoJSON)が読み込まれたときに実行される処理です。なお、この部分の処理はメインのスレッドとは非同期で実行されます。つまり、ここの処理が実行されているときには、既に41(実際には43行目)の処理は実行済みになっているであろうということです。
37行目で読み取ったGeoJSONからレイヤを生成し、38行目でそのレイヤを地図に追加し、39行目でレイヤコントロール(右上)に追加しています。
※この記事の背景図には国土地理院の地理院地図、および今昔マップ(中京圏:1888-1898年)を使用しました。