大学生必見!確定申告でアルバイト代の税金を取り戻す方法

[み]鯖江市がいろんなデータを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

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です。

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 : '惜陰小学校
種類 : 避難所
住所 : 日の出町6-37
電話番号 : 0778-51-2866'}); ・ ・ ・ data.push({position: new google.maps.LatLng(35.954865,136.276616), content : '慈光保育園
種類 : 災害時要援護者利用施設
住所 : 西袋町64-25
電話番号 : 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

大きな流れとしては、

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

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

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

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

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

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

コメントを残す

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

モバイルバージョンを終了