概要
paiza.ioでelixirやってみた。
練習問題やってみた。
練習問題
dbpediaのsparqlを叩いて、緯度経度で仕切った範囲の地物を地図上に表示せよ。
サンプルコード
:inets.start
:ssl.start
IO.puts """
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.js"></script>
<style>
.wikidata {
white-space: nowrap;
width: auto;
height: auto;
background: orange;
border: 1px solid black;
}
.wikidata.q {
background: black;
color: orange;
}
</style>
</head>
<body>
<h1>dbpedia</h1>
<textarea id="src" rows="5" cols="50">
"""
query = URI.encode_query(%{query: """
SELECT DISTINCT ?link ?title ?lat ?long
WHERE {
?link rdfs:label ?title;
geo:lat ?lat;
geo:long ?long .
FILTER (?lat > 37.9 && ?lat < 38.1 && ?long > 139.9 && ?long < 140.1 && lang(?title) = 'ja')
}
LIMIT 5
"""})
#|> IO.inspect
{:ok, {{_, _, _}, _, body}} = :httpc.request(:post, {
'https://ja.dbpedia.org/sparql',
[{'Accept', 'application/sparql-results+json'}],
'application/x-www-form-urlencoded',
query
}, [], [])
#|> IO.inspect
body = IO.iodata_to_binary(body)
IO.puts(body)
IO.puts """
</textarea>
<div id="map" style="width: 300px; height: 300px;"></div>
<script>
var src = document.getElementById('src');
var map = L.map('map').setView([38.0, 140.0], 10);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var responseText = src.value;
var res = JSON.parse(responseText);
res = res.results.bindings;
for (var i = 0; i < res.length; i++)
{
var lat = res[i].lat.value;
var lon = res[i].long.value;
var html = "<span class='wikidata'>" + res[i].title.value + "</span>";
L.marker([lat, lon], {
icon: L.divIcon({
html: html
})
}).addTo(map);
}
</script>
</body>
</html>
"""
実行結果
成果物
以上。