- 公開されたオープンデータを利用するアプリを作成し、利活用するイメージ図です。
実際にオープンデータを利用したアプリの作り方をご紹介します。
- Case.
- GoogleMap上に鯖江市内でWifiを使用できる場所をマッピング
サンプルコード：index.html
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/>wifisabae <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/wifisabae.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body></body> </html>
サンプルコード：style.css
@CHARSET "UTF-8";
#list {
width: 300px;
height: 500px;
display: inline-block;
outline: 1px gray solid;
text-align: left;
}
#liblist {
width: 100%;
marin-top: 4px;
border-top: 1px solid black;
height: 500px;
overflow-y: scroll;
}
#map {
display: inline-block;
width: 500px;
height: 500px;
}
サンプルコード：wifi_mapping.js
var map;
onload = function() {
map = new google.maps.Map($("map"), {
center: new google.maps.LatLng(
36.208823, 138.251953),
zoom: 5,
});
$('liblist').markers = [];
update();
makeHelp();
};
var update = function(pref) {
clear('liblist');
selected(null);
var opendataurl
= "http://www3.city.sabae.fukui.jp/xml/wifi/wifi.xml";
xml2json(opendataurl, "ret");
};
var bksel;
var selected = function(div) {
if (bksel != null)
bksel.className = "";
if (div != null)
div.className = "selected";
bksel = div;
};
var parseInt2 = function(n) {
var n = parseInt(n);
if (isNaN(n))
return "-";
return n;
};
var ret = function(data) {
var bounds = new google.maps.LatLngBounds();
var list = $('liblist');
for (var i = 0; i < list.markers.length; i++)
list.markers[i].setMap(null);
list.markers = [];
data = data.dataroot.wifi;
for (var i = 0; i < data.length; i++) {
var d = data[i];
var div = create('div');
div.textContent = d.name;
list.appendChild(div);
div.data = d;
var ll = new google.maps.LatLng(
d.latitude, d.longitude);
d.pos = ll;
bounds.extend(ll);
var marker = makeMarker(map, ll, d);
list.markers[i] = marker;
marker.data = d;
div.marker = marker;
google.maps.event.addListener(
marker, "mouseover", function(e) {
var divs = $('liblist').childNodes;
for (var i = 0; i < divs.length; i++) {
if (divs[i].data.no == this.data.no) {
selected(divs[i]);
$('liblist').scrollTop
= divs[i].offsetTop
- $('liblist').offsetTop;
break;
}
}
});
google.maps.event.addListener(
marker, "click", function(e) {
openInfo(this);
});
div.onclick = function(e) {
selected(e.srcElement);
var d = this.data;
map.setCenter(new google.maps.LatLng(
d.latitude, d.longitude));
map.setZoom(17);
openInfo(e.srcElement.marker);
};
}
map.fitBounds(bounds);
};
makeMarker = function(map, pos, data) {
var avail = data.name.indexOf('月予定') == -1;
var opb = [ "W", "0000bb" ];
var opr = [ "W", "aaaaff" ];
var opy = [ "W", "bbbb00" ];
var opw = [ "W", "bbbbbb" ];
var opo = [ "W", "00bbbb" ];
var woman = parseInt2(data.woman);
var man = parseInt2(data.man);
var handicapped = parseInt2(data.handicapped);
var babybed = parseInt2(data.babybed);
var ostomate = parseInt2(data.ostomate);
var op = avail ? opb : opr;
var area = parseInt(data.area);
new google.maps.Circle({
map: map,
center: pos,
fillColor: op[1],
fillOpacity: .2,
strokeWeight: 0,
radius: area
});
return new google.maps.Marker({
position: pos,
map: map,
draggable: false,
icon: 'http://chart.apis.google.com/chart?'
+ 'chst=d_map_pin_letter&chld='
+ op[0]
+ '|'
+ op[1]
+ '|FFFFFF'
});
};
var xml2json = function(url, callback) {
var host = "sabae.cc";
var base = "http://"
+ host
+ "/proxy/ITqT5WkhCf2yn1s9?cnv=xml2json";
var url2 = base
+ "&cache=no&callback="
+ callback + "&url="
+ encodeURI(url);
jsonp(url2);
};
var jsonp = function(url) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.setAttribute("src", url);
script.setAttribute("type", "text/javascript");
script.setAttribute("id", 'jsonp');
head.appendChild(script);
};
if ($ == null) {
var $ = function(id) {
return document.getElementById(id);
};
}
var create = function(tag, id) {
var res = document.createElement(tag);
if (id != null)
res.id = id;
return res;
};
var clear = function(id) {
var div = typeof id == "string" ? $(id) : id;
while (div.hasChildNodes()) {
div.removeChild(div.lastChild);
}
div.scrollTop = 0;
div.scrollLeft = 0;
};
