前回ではクエリ文を作り、データを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アプリを作ってみた。

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

ソースコード