2.避難所地図の作成(地図上に避難所を表示)

第2回目は、地図上に避難所を表示させます。

避難所マップを作成する事を第一に考えていますので、プログラムの詳しい説明はしません。

まず、3つのファイルを作成します。

以下のプログラムを「hinanmap.html」と言う名前で保存してください。

次に、次のファイルを「maprei.geojson」と言う名前で保存して下さい。

そして、避難所のイメージを「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箇所の避難所のデータになります。

このデータを皆さんの避難所データに変更して、「maprei.geojson」に追加すれば避難所が追加されます。

この作業を繰り返すことにより、避難所データが追加されていきます。

但し、追加するデータは、1箇所目と2箇所目の中間(「maprei.geojson」の15行目と16行目の間)にコピーしてください。

是非、避難所を数箇所追加してみてください。適宜バックアップをしながら作業することをお勧めします。

今回は、コレで終了。

しかし、一つ一つの避難所を手作業で追加していくのは大変です。

次回は、表形式(エクセルやカルク等)の避難所リストから一括でgeojsonファイル(避難所情報)を作成する方法について記載いたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です