前回ではクエリ文を作り、データをjson形式で入手することに成功した。
そこで、今回はそのデータとHTML,CSS,JavaScriptを使ってwebアプリを作ってみる。

レンタルサイクルステーションの一覧があるので、まず地図上でその位置がわかるようにする。福野泰介の一日一創を参考にしながら進めていく。

---

最初にGoogle Maps JavaScript APIを使って、地図を表示する。

事前にAPIを読み込んで置いて、以下のコードでGoogle Mapを表示することができた。この時にmap-canvasのサイズを指定しておく。

window.onload = function () {
 var mapDiv = document.getElementById("map-canvas");
 var map = new google.maps.Map(mapDiv, {
 center: new google.maps.LatLng(緯度, 経度),
 zoom: 11,
 });
}

---

次にクエリ文を使ってレンタルサイクルステーションをこの地図上に表示していく。
最初にjsonファイルを取得して解析する。

window.onload = function () {
 var mapDiv = document.getElementById("map-canvas");
 var map = new google.maps.Map(mapDiv, {
 center: new google.maps.LatLng(35, 139),
 zoom: 11,
 });
 var query = `prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
 prefix jrrk: <http://purl.org/jrrk#>
 prefix schema: <http://schema.org/>
 prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
 prefix odp: <http://odp.jig.jp/odp/1.0#>
 prefix ic: <http://imi.go.jp/ns/core/rdf#>
 prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
select ?label ?lat ?lng {
?s ?p odp:RentalCycleStation;
rdfs:label ?label;
geo:lat ?lat;
geo:long ?lng;
}limit 1000
 `;
 var endpointSparql = "https://sparql.odp.jig.jp/api/v1/sparql";
 querySparql(endpointSparql, query, function (data) {
 console.log(data);
 });
 }
 var querySparql = function (baseurl, q, callback) {
 var url = baseurl + "?query=" + encodeURIComponent(q) + "&output=json" + "&callback=" + getCallbackMethod(callback);
 jsonp(url);
 };
 var getCallbackMethod = function (callback) {
 var scallback = "_cb_" + (Math.random() * 1000000 >> 0);
 window[scallback] = function (data) {
 window[scallback] = null;
 callback(data);
 };
 return scallback;
 };
 var jsonp = function (url) {
 var head = document.getElementsByTagName("head")[0];
 var script = document.createElement("script");
 script.setAttribute("src", url);
 script.setAttribute("type", "text/javascript");
 head.appendChild(script);
 };

---

最後にそれぞれの座標にマーカーを設置する。

querySparql(endpointSparql, query, function (data) {
 console.log(data);
 var items = data.results.bindings;
 var spotCounter = 0;
 for (var i = 0; i < items.length; i++) {
 var item = items[i];
 var lat = item.lat.value;
 var lng = item.lng.value;
 var label = item.label.value;
 var marker = new google.maps.Marker({
 position: new google.maps.LatLng(lat, lng),
 icon: {
 url: "icon.png",
 size: new google.maps.Size(100, 100),
 origin: new google.maps.Point(0, 0),
 anchor: new google.maps.Point(15, 15),
 },
 map: map
 });
 }
});
 

---

このサンプルプログラムを改良して、レンタルサイクルステーションの近くにある観光地がわかるwebアプリを作ってみた。

レンタルサイクルステーションリスト

ソースコード

カテゴリー

• odp (1)
• SPARQL (8)
• アプリリリース (3)
• オープンデータ (6)