Map as result view

by Jonas Kress

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css">
<script src="https://cdn.rawgit.com/wikimedia/wikidata-query-gui/master/dist/js/wdqs.min.js"></script>
<div id="result">

</div>

JavaScript

var query = '\
SELECT ?item ?itemLabel ?length ?pic ?location \
WHERE \
{ \
  ?item wdt:P31/wdt:P279* wd:Q4022 . \
  ?item wdt:P2043 ?length . \
  ?item wdt:P18 ?pic . \
  ?item wdt:P625 ?location \
  SERVICE wikibase:label { bd:serviceParam wikibase:language "en" . } \
} ORDER BY DESC(?length) ?itemLabel \
LIMIT 50 \
';

var api = new wikibase.queryService.api.Sparql();
api.query(query).done(function() {
  var result = new wikibase.queryService.ui.resultBrowser.CoordinateResultBrowser();
  result.setResult(api.getResultRawData());
  result.draw($('#result'));
});