-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
191 lines (128 loc) · 5.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html>
<head>
<!-- LEAFLET external library for webmapping -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<!-- JQUERY general javascript helper library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- JQUERY GEO to transform from WKT to GEOJSON -->
<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-b2.min.js"></script>
<style type="text/css">
textarea{
width: 100%;
height: 200px;
}
</style>
<!-- JAVASCRIPT application logic-->
<script>
var map; // This variable holds the Leaflet map object
var layer; // This layer will hold the features we get from the sparql endpoint
// Basic configuration
var endPoint = 'http://128.178.21.39:8890/sparql';
var defaultGraphUri = 'http://128.178.21.39:8080/vtm-testset';
var queryFiles = ['queries/all_geom.rq','queries/all_geom_filtered.rq','queries/places_of_work.rq','queries/places_of_work_short.rq','queries/bouding_box.rq'];
/* note : If you get "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.", see http://virtuoso.openlinksw.com/dataspace/doc/dav/wiki/Main/VirtTipsAndTricksCORsEnableSPARQLURLs to allow CORS on the Sparql endpoint */
/* note : {{xmin}}, {{ymin}}, {{xmax}} and {{ymax}} are replaced by the current boundaries before the sparql query is issued (see code below) to allow to filter the results to a certain extent */
// General setup (on DOM ready)
$( document ).ready(function() {
// Setup the Leaflet map with a default view and zom
map = L.map('map').setView([45.4375, 12.3358], 13);
// Add a background layer from external tiles
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png').addTo(map);
layer = L.layerGroup().addTo(map);
// Bind the moveend function with the reloadContent function
map.on("moveend", reloadContent);
// Prepare the query select
prepareQuerySelect();
});
function prepareQuerySelect(){
$.each(queryFiles, function(i,item){
console.log(item);
$('#query_select').append( $('<option>',{value : $.ajax({url:item,async:false}).responseText }).text(item));
});
$('#query_select').change(function(){
$('#query').val( $('#query_select').val() );
reloadContent();
});
$('#query_select').trigger('change');
}
// Execution and loading of the AJAX query to the Sparql endpoint
function reloadContent(){
// Replace map variables in the sparql query
var sparqlQ = $('#query').val()
sparqlQ = sparqlQ.replace(/{{xmin}}/g, map.getBounds().getWest() );
sparqlQ = sparqlQ.replace(/{{xmax}}/g, map.getBounds().getEast() );
sparqlQ = sparqlQ.replace(/{{ymin}}/g, map.getBounds().getSouth() );
sparqlQ = sparqlQ.replace(/{{ymax}}/g, map.getBounds().getNorth() );
// Make an AJAX query to the Sparql endpoint
$.ajax( {
url: endPoint,
data: {'query': sparqlQ, 'default-graph-uri': defaultGraphUri},
dataType: 'json'
}).done( function(data){
// If the query succeeds
$('#result_raw').text(JSON.stringify(data, null, 4));
// Transform the result from Virtuoso's Json to GeoJSON (not needed with Strabon which can do it natively)
var geojson = {type: 'FeatureCollection', features: []};
$.each(data.results.bindings, function(i,bindings){
feature = {
type: "Feature",
geometry: $.geo.WKT.parse(bindings.geom.value),
properties: {}
};
// We add each sparql variable to the geojson properties object
$.each( data.head.vars, function(j, property){
if(property=='geom') return; // except the geom
feature.properties[property] = bindings[property].value;
});
geojson.features.push( feature );
});
$('#result_geojson').text(JSON.stringify(geojson, null, 4));
// Display the GeoJSON
layer.clearLayers();
L.geoJson(geojson, {
// With a different style depending on the category
/*
style: function (feature) {
if(feature.properties.category=='building'){
return {color: "#888"};
}
else{
return {color: "#0F8"};
}
},
*/
// With a popup showing the subject
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.subject);
}
}).addTo(layer);
}).fail( function(jqXHR, textStatus, errorThrown){
// If the query fails, we display the error
layer.clearLayers();
$('#result_raw').text("Failure: \n\n"+errorThrown+"\n"+jqXHR.responseText);
$('#result_geojson').text("");
});
}
</script>
</head>
<body>
<!-- This div actually displays the map -->
<div id="map" style="width: 600px; height: 400px"></div>
Query <select id="query_select"></select><br/>
<textarea id="query"># no query</textarea>
<table style="width: 100%">
<tr>
<td style="width: 50%">
Result raw<br/>
<textarea id="result_raw">no result</textarea>
</td>
<td style="width: 50%">
Result geojson<br/>
<textarea id="result_geojson">no result</textarea>
</td>
</tr>
</table>
</body>
</html>