避難所地図を作成するシリーズの第一回。
まず、ホームページ上で地図を表示して見ます。地図さえ表示できれば、避難所を表示するのは力作業です。
以下のプログラムをコピーして、サーバー上に「hinantizu.html」と言う名前で保存してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>GSI Tiles on Leaflet</title> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} </style> </head> <body> <div id="map"></div> <script> var map = L.map('map'); L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }).addTo(map); map.setView([35.3622222, 138.7313889], 10); var marker = L.marker([35.3622222, 138.7313889]).addTo(map); </script> </body> </html> |
以上です。
おそらく、このような富士山を中心とした地図が表示されているのではないでしょうか?
簡単に内容を説明します。
6行目の「<script src=”https://unpkg…」と18行目の「L.tileLayer(‘https://cyberjapandata…」の部分で、地図のプログラムを呼び込んでいます。
もし、地図が表示されない場合は、この呼び込みがうまくいっていない可能性があります。
この呼び込みには、サーバー(ホームページ)がセキュアー対応(https::)している必要があります。
21行目の「map.setView([35.3622222, 138.7313889], 10);」で、地図の中心点と地図の表示範囲を設定しています。
今回は、富士山の緯度・経度情報を入力し、表示範囲を「10」に設定しました。
23行目の「var marker = L.marker….」の部分で、マーカー(PIN)の設定を行なっています。
今回は、富士山山頂にマーカーを設定しました。
避難場所地図を作成するためには、地域の地図を最初に表示する必要があります。富士山山頂の地図が表示されても困りますよね。
今回は、例として大阪城を中心とした地図を表示させてみたいと思います。
行なう事は、3つ。(1)地図の中心点を設定する、(2)地図の表示範囲を設定する、(3)地図のマーカーを設定する の3つです。
(1)地図の中心点設定する
21行目のsetView([35.3622222, 138.7313889]の数字を大阪城の緯度経度データに変更します。
緯度経度情報を入手するために、ジオコーディングする必要があります。ジオコーディングを行なってくれるページは複数あります。以下例です。
1.https://www.geocoding.jp/
2.http://himuka.miyazaki-c.ed.jp/provider-work/webhint/map/map.html
ジオコーディングのページに住所や建物名を入力してください。今回は、「大阪城」と入力しました
そこに表示された10進数の数字が「34.687315,135.52620」が緯度経度データです。
「hinantizu.html」の21行目の富士山のデータ[35.3622222, 138.7313889]を大阪城のデータ「34.687315, 135.52620」に変更してください。
変更後、再度地図を表示してみてください。大阪城を中心にした地図になりましたか?
(2)地図の表示範囲を設定する。
範囲は同じ21行目の「10」と言う数字。数字を小さくすると表示範囲が広くなります。
「8」に変更後に表示してみてください。「14」に変更後に表示してみてください。色々確認して適当な数字を選択してください。
(3)地図のマーカー(PIN)を設定する。
マーカー設定は、23行目に緯度経度データを入力します。
23行目の数字を先ほどの大阪城の数字に変更してください。
コレで、大阪城を中心とした地図が表示されたのではないでしょうか?
簡単ですよね。
次回からは、マーカーに避難所データを入力する方法を記載する予定です。