今回は、避難所地図に給水場所を追加してみます。
避難所地図に給水場所を追加する事自体は難しくありませんが、給水場所の情報をすばやく入手することの方が難しいかもしれません。
避難所地図に給水場所を追加するためには、ベース地図(xxx.html)と避難場所情報(xxx.geojson)、給水所情報(yyy.geojson)と避難所と給水所のイメージファイルが必要です。
サンプルとして、避難所・給水所地図を作成しました。
前回作成した、避難場所情報(maprei.geojson)と同じ形式のファイル(mizu.geojson)を追加します。
以下のファイルをコピーすると同じ地図が表示されます。
ベース地図(hinanmizu.html)---54行目から82行目が前回のファイルに追加された部分です。
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8' /> <title>北海道地震 避難場所地図</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" /> <style> html, body{ margin: 0px; padding: 0px; } html, body, #map { width: 100%; height: 100%; } </style> </head> <body> <h2>北海道胆振東部地震 避難場所の地図</h2> <h3>データ元:防災情報(1月1日12時)のデータ</a></h3> <div id="map"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type='text/javascript'> //Tile Map Serviceの指定 var std = L.tileLayer( "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: "地理院タイル(電子国土基本図)", maxZoom: 18, }); var ort = L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg", { attribution: "地理院タイル(電子国土基本図(オルソ画像))", maxZoom: 18 }); //避難所データの表示 var kaikan = new L.LayerGroup(); $.getJSON("./maprei.geojson", function(data) { var geojson = L.geoJson(data, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [27, 27], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: "./kaikan.png" }); return L.marker(latlng, {icon: smallIcon}); }, onEachFeature: function (feature, layer) { layer.bindPopup("避難場所:"+ feature.properties.col0 + ",<br>住所:"+feature.properties.col1); } }).addTo(kaikan); }); //給水所の表示 var mizu = new L.LayerGroup(); $.getJSON("./mizu.geojson", function(data) { var geojson = L.geoJson(data, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [27, 27], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: "./mizu.png" }); return L.marker(latlng, {icon: smallIcon}); }, onEachFeature: function (feature, layer) { layer.bindPopup("給水場所:"+ feature.properties.col0 + ",<br>住所:"+feature.properties.col1 + ",<br>時間:"+feature.properties.col2 ); } }); geojson.addTo(mizu); }); var baseMaps = { "地理院": std ,"オルト地図": ort }; var sisetsu = { "避難場所": kaikan ,"給水所":mizu }; var map = L.map('map',{ layers: [std , kaikan,mizu ] ,center: [43.062612 , 141.461281] ,zoom: 11}); var mapLink = '<a href="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>'; //}); // レイヤコントロール var controls = L.control.layers(baseMaps,sisetsu).addTo(map); </script> </body> </html> |
避難場所情報(maprei.geojson)
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 28 29 |
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 141.36852,43.09752 ] }, "properties": { "col0":"東区体育館", "col1":"札幌市東区北27条東14丁目3-1", "col2":"2018年9月10日6:00" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 141.45148,42.99084 ] }, "properties": { "col0":"清田区体育館", "col1":"札幌市清田区平岡1条5丁目4-1", "col2":"2018年9月8日11:00" } } ] } |
給水所情報(mizu.geojson)
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 28 29 |
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 141.314015,43.039472 ] }, "properties": { "col0":"旭山記念公園", "col1":"札幌市中央区界川4丁目", "col2":"9月10日10時から11時" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 141.464787,43.017534 ] }, "properties": { "col0":"厚別公園", "col1":"北海道札幌市厚別区上野幌3条1丁目2", "col2":"9月10日13時から15時" } } ] } |
そして、避難所のイメージファイル(kaikan.png)と給水場所のイメージファイル(mizu.png)を作成して保存してください。
これで、避難場所と給水場所の地図が作成できました。
今まで作成した2~3の項目に基づいて、皆さんの避難場所と給水場所の位置情報に変更してください。
変更する場所は
1.ベース地図(hinanmizu.html)の地図98行目と99行目の中心地点(center:[xxx,xxx])と表示範囲(zoom:xx)
2.避難場所情報(maprei.geojson)と給水所情報(mizu.geojson)のデータ
3.給水所と避難場所のイメージファイル
この「避難場所情報(maprei.geojson)と給水所情報(mizu.geojson)のデータ」が表示されるデータになります。
前回の避難地図の作成(エクセル表などから避難所情報を作成)を参考に作成してください。
思った以上に簡単なのではないでしょうか?
次回は、避難地図を作成するに当たり注意すべき事や疑問などについて記述します。