[み]鯖江市がいろんなデータをxmlで提供してるから「さばえ避難所マップ」をつくってみた

久しぶりにGoogleMapsAPIをさわりました。みはら(@masashi_385)です。本当に久しぶりで、いろいろ忘れてました。

さて、鯖江市がいろんなデータをxml形式で提供してることが話題になってますね。

中日新聞:鯖江市が行政データ「XML」形式で提供 全国初、加工可能に:福井(CHUNICHI Web)

鯖江市で提供しているデータ

けっこういろんなデータが提供されています。

  • 市内公園等のトイレ情報
  • 鯖江百景の位置情報等
  • 災害時の避難所の位置情報
  • 市内のAED情報
  • 避難所、一時避難所等
  • 鯖江市の施設
  • 市内のwifiの設置場所
  • さばえ検定100問
  • 人口、気温
  • さばかん情報
  • 公式ホームページのRSS
  • gsample
  • 市営駐車場情報
  • 議員名簿
  • 鯖江市文化財
  • 西山動物園の動物
  • ツツジバスのバス停
  • 提案型市民主役募集事業一覧
  • 古地図データ(鯖江地区)
  • さばえ街なかぶらりMAP(地図オープンデータ)
  • オープンデータ一覧
  • 道路工事情報
  • イベント情報
  • 消火栓等の情報

via:福井県鯖江市>データシティ鯖江(XML,RDFによるオープンデータ化の推進)

ほんとにいろいろありますね。さばえ検定とかかなり地方都市っぽいカンジでいいですね。ほとんどのものがxml・RDF両方の形式で提供されていますが、xmlだけのものもあります。

さばえ避難所マップをつくる

このたくさんのデータの中から、パッと思いついたのが「避難所マップ」でした。各自治体でハザードマップ・避難所マップはつくってはいると思うのですが、Googleマップ上で閲覧できるものって少ないんじゃないでしょうか?

ちなみに、山形市ではおそらく紙で配布したと思われるマップのPDFが提供されています。

山形市内の避難場所及び避難所 — 山形市役所

ということで、GoogleMapsAPIを使って、「さばえ避難所マップ」をつくりました。

さばえ避難所マップ

さばえ避難所マップの作り方

さばえ避難所マップは、避難所になるところにマーカーをつけて、クリックされたときに、そこの基本的な情報がでるっていうシンプルなものです。また、データを外部ファイルに記述することもできますが、全部1つのファイルにまとめています。つまり、けっこう重いですw

誰かの参考までにコードを紹介します。10コくらいしかマーカーをつけないのであれば、この方法でなんの問題もないと思います。加工・修正は面倒ですが…

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>さばえ避難所マップ</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<script>
//ここにJavaScriptを記述
</script>
</body>
</html>

こんなカンジです。まぁ、肝心なのはJavaScriptですからね。

JavaScript

肝心のJavaScriptです。

function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
        new google.maps.InfoWindow({
            content: msg
        }).open(marker.getMap(), marker);
    });
}
// 位置情報と表示データの組み合わせ
var data = new Array();
data.push({position: new google.maps.LatLng(35.942551,136.186417), content : '<strong>惜陰小学校</strong><br>種類 : 避難所<br>住所 : 日の出町6-37<br>電話番号 : 0778-51-2866'});



data.push({position: new google.maps.LatLng(35.954865,136.276616), content : '<strong>慈光保育園</strong><br>種類 : 災害時要援護者利用施設<br>住所 : 西袋町64-25<br>電話番号 : 0778-65-2044'});

//マップを表示
var myMap = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 16,
    center: new google.maps.LatLng( 35.956749,136.183968 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
//マーカーを表示
for (i = 0; i <data.length; i++) {
    var myMarker = new google.maps.Marker({
        position: data[i].position,
        map: myMap
    });
    attachMessage(myMarker, data[i].content);
};

大きな流れとしては、

  1. データを読み込む
  2. 地図を表示する
  3. マーカーを表示する

こんなカンジです。データの件数によっては、とても汚いコードになります。このさばえ避難所マップもとっても汚いコードになってますw

鯖江市のデータを使用するときの注意点

提供されたデータを使用する条件が、鯖江市から提示されています。

※「データシティさばえ」のデータを使用していることをアプリケーション内に表示し、このページ(http://www.city.sabae.fukui.jp/pageview.html?id=11552)や、各データを公開しているページへリンクを張っていただければ、データは無料で自由にご利用いただけます。

ということで、さばえ避難所マップでも「powered by データシティさばえ」と表示しています。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup