Locations on Wikidata

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>Locations on Wikidata</title> <link rel="stylesheet" href="resources/js/openlayers/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="resources/js/openlayers/examples/style.css" type="text/css"> <script src="resources/js/jquery/jquery-1.11.0.min.js"></script> <script src="resources/js/openlayers/OpenLayers.js"></script> <script src="//en.wikipedia.org/w/index.php?title=MediaWiki:Wdsearch-autodesc.js&action=raw&ctype=text/javascript"></script> <script src="resources/js/wikidata.js"></script>  </head> <body> <h1 id="title">Wikidata locations</h1> <div id="tags">map</div> <div id="shortdesc"> <form id='the_form' style='display:inline' method='get'> Lat <input type='text' name='lat' id='lat' value='' /> / Lon <input type='text' name='lon' id='lon' value='' /> / Radius <input type='text' name='radius' id='radius' value='' /> (km) Language <input type='text' name='lang' id='lang' value='' size=5 /> <input type='submit' value='Update' /> <a href='#' id='permalink' style='display:none;font-weight:bold'>Permalink</a> Example : <a href='?lat=52.205&lon=0.119&radius=15'>Cambridge</a> | <a href='?lat=50.938056&lon=6.956944&radius=15'>Cologne</a> </form> </div> <div id="map" style="width: 100%; height: 1024px" class="smallmap"></div> <div id="docs"> </div> <div style='font-size:7pt'>Based on <a href='https://github.com/fredj/openlayers-heatmap'>code by fredj</a>.</div> <script> /* $('#the_form').submit ( function ( e ) { e.preventDefault() ; lat = $('#lat').val() ; lon = $('#lon').val() ; radius = $('#radius').val() ; showMap() ; return false ; } ) ; */ function getUrlVars () { var vars = {} ; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1) ; var hash = window.location.href.slice(window.location.href.indexOf('#') + 1) ; if ( hash == window.location.href ) hash = '' ; if ( hash.length > 0 ) hashes = hash ; else hashes = hashes.replace ( /#$/ , '' ) ; hashes = hashes.split('&'); $.each ( hashes , function ( i , j ) { var hash = j.split('='); hash[1] += '' ; vars[hash[0]] = decodeURI(hash[1]).replace(/_/g,' '); } ) ; return vars; } var params = getUrlVars() ; var prop = 625 ; var lat = params.lat||'' ; var lon = params.lon||'' ; var lang = params.lang||'en' ; var radius = params.radius||'15' ; // km var points = [] ; var map, layer, markers, popup; map = new OpenLayers.Map( 'map'); layer = new OpenLayers.Layer.OSM( "Simple OSM Map",['https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png']); map.addLayer(layer); var proj = new OpenLayers.Projection("EPSG:4326") ; var markerlist = [] ; var wd = new WikiData ; // Fake mw object var mw = { log : function ( s ) { console.log(s) } , util : { wikiUrlencode : function ( s ) { return encodeURIComponent ( s ) } } } ; wd_auto_desc.lang = lang ; function showMap () { $('#permalink').attr({href:'?lat='+lat+'&lon='+lon+'&radius='+radius}).show() ; if ( popup !== undefined ) map.removePopup ( popup ) ; popup = undefined ; if ( markers !== undefined ) { // markers.clearMarkers() ; $.each ( markerlist , function ( k , v ) { v.destroy() ; } ) ; map.removeLayer ( map.getLayersByName('Markers')[0] ) ; markers.destroy() ; } var sparql = 'SELECT ?item ?item_location WHERE { SERVICE wikibase:around { ?item wdt:P'+prop+' ?item_location . bd:serviceParam wikibase:center "Point('+lon+' '+lat+')"^^geo:wktLiteral . bd:serviceParam wikibase:radius "'+radius+'" }}' ; wd.loadSPARQL ( sparql , function ( d ) { $.each ( d.results.bindings , function ( k , v ) { var q = wd.itemFromBinding ( v.item ) ; var v2 = v.item_location.value.match ( /^Point$(\S+) (\S+)$$/ ) ; var p = { lon:v2[1]*1 , lat:v2[2]*1 , q:q } ; points.push ( p ) ; } ) ; markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); var pos = new OpenLayers.LonLat(lon, lat).transform(proj,map.getProjectionObject()) ; ; var marker = new OpenLayers.Marker(pos) ; marker.icon = new OpenLayers.Icon("./resources/js/openlayers/img/marker-blue.png"); marker.title = "Center position " + lat + "/" + lon ; markers.addMarker(marker); $.each ( points , function ( k , v ) { var pos = new OpenLayers.LonLat(v.lon, v.lat).transform(proj,map.getProjectionObject()) ; ; var marker = new OpenLayers.Marker(pos) ; marker.id = v.q ; marker.events.register("click", marker, function() { var q = v.q ; var title = q ; var desc = '' ; var running = 2 ; if ( popup !== undefined ) map.removePopup ( popup ) ; function show () { running-- ; if ( running > 0 ) return ; var h = "<div><b>" + title + "</b> (<a target='_blank' href='//tools.wmflabs.org/reasonator/?q="+q+"'>" + q + "</a>)</div>" ; h += "<div>" + desc + "</div>" ; popup = new OpenLayers.Popup.FramedCloud("Popup", pos, null, h , null, true ); popup.autoSize = true ; map.addPopup(popup); } wd_auto_desc.loadItem ( q , { reasonator_lang:lang , links:'reasonator' , linktarget:'_blank' , callback:function ( q , html , opt ) { desc = html ; show() } } ) ; wd_auto_desc.labelItem ( q , function ( label ) { title = label ; show() } ) ; }); markers.addMarker(marker); markerlist.push ( marker ) ; } ) ; map.zoomToExtent ( markers.getDataExtent() , true ) ; } ) ; } $('#lat').val ( lat ) ; $('#lon').val ( lon ) ; $('#radius').val ( radius ) ; $('#lang').val ( lang ) ; if ( lat != '' && lon != '' && radius != '' ) { showMap() ; } else { // All the world var zero = new OpenLayers.LonLat(0, 0).transform(proj,map.getProjectionObject()) ; map.setCenter( zero , 3); } </script> </body> </html>

CINXE.COM

Locations on Wikidata