Skip to content

Commit 1b6cf68

Browse files
AklakanAklakan
committed
Updated demo
1 parent c10d3f3 commit 1b6cf68

File tree

1 file changed

+113
-31
lines changed

1 file changed

+113
-31
lines changed

‎docs/demos/leaflet-graphql/index.html

Lines changed: 113 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,63 @@
1818
<!-- Leaflet CSS -->
1919
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
2020
<style>
21+
body {
22+
display: flex;
23+
margin: 0;
24+
padding: 0;
25+
height: 100vh;
26+
font-family: Arial, sans-serif;
27+
}
28+
29+
#sidebar {
30+
/* width: 500px; */
31+
width: 40%;
32+
padding: 15px;
33+
background: #f8f8f8;
34+
border-right: 1px solid #ddd;
35+
overflow: auto;
36+
resize: horizontal;
37+
}
38+
2139
#map {
22-
height: 90vh;
40+
flex: 1;
41+
height: 100vh;
42+
}
43+
44+
textarea {
2345
width: 100%;
46+
height: 500px;
47+
margin-bottom: 10px;
48+
font-family: monospace;
49+
font-size: 14px;
50+
padding: 5px;
51+
border: 1px solid #ccc;
52+
border-radius: 4px;
53+
}
54+
55+
button {
56+
padding: 10px 15px;
57+
background: #007bff;
58+
color: white;
59+
border: none;
60+
border-radius: 4px;
61+
cursor: pointer;
62+
}
63+
64+
button:hover {
65+
background: #0056b3;
2466
}
2567
</style>
2668
</head>
2769

2870
<body>
29-
<h1>GraphQL Map Display</h1>
71+
<div id="sidebar">
72+
<h3>Edit GraphQL Query</h3>
73+
<textarea id="graphqlQuery"></textarea>
74+
<button id="updateMap">Update Map</button>
75+
</div>
3076
<div id="map"></div>
77+
3178
<!-- Leaflet JS -->
3279
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
3380
<!-- Your custom script -->
@@ -39,7 +86,7 @@ <h1>GraphQL Map Display</h1>
3986

4087
// GraphQL query
4188

42-
const querySimple = `
89+
const simpleQuery = `
4390
{
4491
locations(limit: 10)
4592
@pattern(of: "?s a coy:Country", from: "s", to: "s")
@@ -60,9 +107,9 @@ <h1>GraphQL Map Display</h1>
60107
}
61108
`;
62109

63-
const queryComplex = `
110+
const complexQuery = `
64111
{
65-
locations
112+
locations(limit: 1000)
66113
@pattern(of: "?s a coy:Country", from: "s", to: "s")
67114
@prefix(name: "", iri: "https://schema.coypu.org/global#")
68115
@prefix(name: "rdfs", iri: "http://www.w3.org/2000/01/rdf-schema#")
@@ -72,35 +119,55 @@ <h1>GraphQL Map Display</h1>
72119
@prefix(name: "afn", iri: "http://jena.apache.org/ARQ/function#")
73120
@prefix(name: "coy", iri: "https://schema.coypu.org/global#")
74121
{
75-
feature @pattern(of: """
76-
SELECT * {
77-
{
78-
?s ?p ?o .
79-
# FILTER(?p NOT IN (rdfs:label))
122+
label @one
123+
@pattern(of: """
124+
SELECT ?s ?o {
125+
?s rdfs:label ?o .
126+
FILTER(langMatches(lang(?o), 'en'))
80127
}
81-
# Auto-derive property cardinalities based on the dataset
82-
{ SERVICE <cache:> {
83-
{ SELECT ?p (MAX(?c) AS ?pc) {
84-
SELECT ?x ?p (COUNT(*) AS ?c) {
85-
?x ?p ?z
86-
} GROUP BY ?x ?p
87-
} GROUP BY ?p }
128+
""", from: "s", to: "o")
129+
130+
features
131+
@pattern(of: """
132+
SELECT * {
133+
{
134+
?s ?p ?o .
135+
FILTER(?p NOT IN (rdfs:label))
136+
}
137+
# Auto-derive property cardinalities from all data
138+
{ SERVICE <cache:> {
139+
{ SELECT ?p (MAX(?c) AS ?pc) {
140+
SELECT ?x ?p (COUNT(*) AS ?c) {
141+
?x ?p ?z
142+
} GROUP BY ?x ?p
143+
} GROUP BY ?p }
144+
}
88145
}
89146
}
90-
}
91-
""", from: "s", to: "o") @index(by: "afn:localname(?p)", oneIf: "?pc = 1")
92-
#label @pattern(of: "?s rdfs:label ?o", from: "s", to: "o") @one {
93-
# labelByLang @pattern(of: "BIND(?x AS ?y)", from: "x", to: "y") # @index(by: "lang(?y)", oneIf: "true") @one
94-
#}
95-
geometry @one @pattern(of: """
96-
?s geo:hasGeometry/geo:asWKT ?x .
97-
BIND(STRDT(STR(geof:asGeoJSON(geof:simplifyDp(?x, 0.2))), norse:json) AS ?o)
98-
""", from: "s", to: "o")
147+
""", from: "s", to: "o")
148+
@index(by: "afn:localname(?p)", oneIf: "?pc = 1")
149+
150+
geometry @one
151+
@pattern(of: """
152+
?s geo:hasGeometry/geo:asWKT ?x .
153+
BIND(STRDT(STR(geof:asGeoJSON(
154+
geof:simplifyDp(?x, 0.2)
155+
)), norse:json) AS ?o)
156+
""", from: "s", to: "o")
99157
}
100158
}
101159
`;
102160

103-
const query = queryComplex;
161+
/**
162+
There is currently a bug with variable analysis which breaks indexing labels by language...
163+
#label @pattern(of: "?s rdfs:label ?o", from: "s", to: "o") @one {
164+
# labelByLang @pattern(of: "BIND(?x AS ?y)", from: "x", to: "y") # @index(by: "lang(?y)", oneIf: "true") @one
165+
#}
166+
*/
167+
168+
const initialQuery = complexQuery;
169+
170+
104171

105172
// Initialize the Leaflet map
106173
const map = L.map('map').setView([0, 0], 2);
@@ -111,7 +178,7 @@ <h1>GraphQL Map Display</h1>
111178
}).addTo(map);
112179

113180
// Fetch data from the GraphQL API
114-
async function fetchData() {
181+
async function fetchData(query) {
115182
const response = await fetch(GRAPHQL_URL, {
116183
method: 'POST',
117184
headers: {
@@ -137,8 +204,15 @@ <h1>GraphQL Map Display</h1>
137204
}
138205

139206
// Add data to the map
140-
async function addDataToMap() {
141-
const locations = await fetchData();
207+
async function addDataToMap(query) {
208+
const locations = await fetchData(query);
209+
210+
// Clear existing map layers
211+
map.eachLayer((layer) => {
212+
if (layer instanceof L.GeoJSON) {
213+
map.removeLayer(layer);
214+
}
215+
});
142216

143217
locations.forEach(location => {
144218
L.geoJSON(location.geometry, {
@@ -150,8 +224,16 @@ <h1>GraphQL Map Display</h1>
150224
});
151225
}
152226

227+
document.getElementById('graphqlQuery').value = complexQuery;
228+
229+
// Event listener for the "Update Map" button
230+
document.getElementById('updateMap').addEventListener('click', () => {
231+
const query = document.getElementById('graphqlQuery').value;
232+
addDataToMap(query);
233+
});
234+
153235
// Load the map data
154-
addDataToMap();
236+
addDataToMap(initialQuery);
155237

156238
</script>
157239
</body>

0 commit comments

Comments
 (0)