演習問題1-3: SPARQL検索結果を地図で可視化しよう!

問題1. SPARQLの検索結果をマーカーにして地図上に表示してください.
下記コードの78行目にマーカーを表示するコードを追加してください.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2015/11/12 BODIKセミナー 演習1-3</title>

  <!-- jQuery(AJAXのために使う) -->
  <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>

  <!-- Font Awesome for Leaflet (css) -->
    <link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="../leaflet.awesome-markers/dist/leaflet.awesome-markers.css">

  <!-- Leaflet(地図ライブラリ)ファイル -->
  <script type="text/javascript" src="../leaflet/leaflet.js"></script>
  <link rel="stylesheet" href="../leaflet/leaflet.css">

  <!-- Font Awesome for Leaflet (js) -->
  <script type="text/javascript" src="../leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>

  <style>
  body { padding: 0; margin: 0; }
  h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; }
  #map { width: 100%; height: 400px; padding: 0; margin: 0; }
  </style>
</head>

<body>
  
<h1>演習1-3:SPARQL検索結果を地図で可視化しよう!</h1>

<div id="map"></div>

<pre id="sandbox">
</pre>

<script type="text/javascript">
var map = L.map('map').setView([33.5833, 130.4000], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var probeMarker = L.AwesomeMarkers.icon({
  icon: 'tachometer',
  markerColor: 'darkred',
  prefix: 'fa',
  iconColor: 'white'
});

var dataset_iri = "http://www.bodic.org/datasets/U44c89acdc50078f5/G2a57ee9d4b0c2dbddeb0c4b017752880"
var bodic_voc_prefix = "http://www.bodic.org/common_vocabulary"

$.post(
  'https://www.bodic.org/sparql',
  {
    query: [
      'prefix rdfs:<http://www.w3.org/2000/01/rdf-schema#>',
      'prefix bodic:<'+bodic_voc_prefix+'#>',
      'select ?s ?lon ?lat ?sensor_type {',
      '  graph <'+dataset_iri+'> {',
      '    ?lat_hiri a bodic:RawProperty ; rdfs:label "緯度"@ja .',
      '    ?lon_hiri a bodic:RawProperty ; rdfs:label "経度"@ja .',
      '    ?stype_hiri a bodic:RawProperty ; rdfs:label "測定項目名称"@ja .',
      '    ?s ?lon_hiri ?lon ; ?lat_hiri ?lat ; ?stype_hiri ?sensor_type',
      '  } .',
      '  FILTER(?sensor_type != "")',
      '}'].join(" ")
  },
  function(data, status, jqXHR) {
    $("#sandbox").text("HTTP/1.1 " + jqXHR.status + " " + jqXHR.statusText + "\n" + jqXHR.getAllResponseHeaders() + "\n" + jqXHR.responseText)
    var bindings = data.results.bindings;
    for(var i=0; i<bindings.length; i++){
      var b = bindings[i]
      var lon = parseFloat(b.lon.value)
      var lat = parseFloat(b.lat.value)
      var sensor_type = b.sensor_type.value
      // ここにマーカーを表示するコードを記述する.
    }
  }
).fail(function(jqXHR){
  $("#sandbox").text("HTTP/1.1 " + jqXHR.status + " " + jqXHR.statusText + "\n" + jqXHR.getAllResponseHeaders() + "\n" + jqXHR.responseText)
})

</script>
</body>
</html>
// 78行に以下のコードを追加する.
L.marker([lat, lon], { icon: probeMarker }).addTo(map)
          .bindPopup(sensor_type)