第2回目は、地図上に避難所を表示させます。
避難所マップを作成する事を第一に考えていますので、プログラムの詳しい説明はしません。
まず、3つのファイルを作成します。
以下のプログラムを「hinanmap.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 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 |
<!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>データ元:<a href="https://www.umbili.com/tada" target="_blank">防災情報(9月14日15時のデータ)</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 baseMaps = { "地理院": std ,"オルト地図": ort }; var sisetsu = { "避難場所": kaikan }; var map = L.map('map',{ layers: [std , kaikan ] ,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" } } ] } |
そして、避難所のイメージを「kaikan.png」と言う名前のファイルで保存してください。
そして、その3つのファイル(hinanmap.html、maprei.geojson、kaikan.png)をサーバーにアップロードしてください。
サーバーのhinanmap.htmlにアクセスすると、「北海道胆振東部地震 避難場所の地図」と言う地図が表示されます。これと同じ地図です。
この避難所地図を変更する事により、皆さんの避難所地図を作成します。
まず、簡単にそれぞれのファイルの説明をします。
1つ目の「hinanmap.html」が地図を表示するプログラムファイルです。
ここで変更する必要があるのは、76行目(中心点)と77行目(表示範囲)です。
第一回目で説明した内容に基づいて、中心点を表示範囲を設定して下さい。
2つ目の「maprei.geojson」は、避難所の地図情報です。今回は、例として2箇所の避難所を作成しました。
1箇所目の避難所データは4行目から15行目、2箇所目の避難所データは、16行目から27行目に記載されているデータになります。
8行目や20行目の数字が、避難所の緯度経度情報です。第一回目の手順に沿って避難所の場所の緯度経度情報を入力してください。
11行目と12行目が1番目の避難所名と避難所住所、23行目と24行目が2番目の避難所名と避難所住所です。
それぞれ、皆さんの近くの避難所の緯度経度情報や避難所名と避難所住所に変更してみてください。
3つ目の「kaikan.png」は、避難所のイメージデータです。「hinanmap.html」の54行目に記載されています。
違ったイメージ画像(jpegやgifなど)を表示させる場合は、ココの記載を変更してください。
変更する箇所は、以下の1、2と3です。
1、hinanmap.htmlの76行目のcenter:[xxxx,xxxx]と77行目のzoom:[xx]
2、maprei.geojsonの8行目や20行目の“coordinates”: [xxx.xx,xx.xxx]と避難所情報(”col0″と”col1″)の内容です。
3、hinanmap.htmlの5行目や22行目のタイトル名等を変更してください。
変更後、サーバーにアップロード後hinanmap.htmlにアクセスしてみてください。皆さんの指定した避難所が2箇所表示されているはずです。
尚、文字化けには注意してください。
次に、避難所を追加してみます。
避難所を追加するには、「maprei.geojson」に避難所情報を追加していきます。以下は、追加する避難所の地図情報です。
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 141.314015,43.039472 ] }, "properties": { "col0":"旭山記念公園", "col1":"札幌市中央区界川4丁目", "col2":"2018年9月10日6:00" } }, |
このデータ(「{」で始まり「},」で終了)が、1箇所の避難所のデータになります。
このデータを皆さんの避難所データに変更して、「maprei.geojson」に追加すれば避難所が追加されます。
この作業を繰り返すことにより、避難所データが追加されていきます。
但し、追加するデータは、1箇所目と2箇所目の中間(「maprei.geojson」の15行目と16行目の間)にコピーしてください。
是非、避難所を数箇所追加してみてください。適宜バックアップをしながら作業することをお勧めします。
今回は、コレで終了。
しかし、一つ一つの避難所を手作業で追加していくのは大変です。
次回は、表形式(エクセルやカルク等)の避難所リストから一括でgeojsonファイル(避難所情報)を作成する方法について記載いたします。