Skip to content

Commit 2844682

Browse files
shelegdmitriyshelegdmitriy
authored
chore: enable preview script (#10)
1 parent d7fc4b5 commit 2844682

File tree

9 files changed

+129
-1
lines changed

9 files changed

+129
-1
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,16 @@ export function MyMap() {
4747
| **showPopup** | `boolean` | `true` | If true, shows a popup on feature click. |
4848
| **className** | `string` | `''` | Additional CSS class names for the map container. |
4949
| **style** | `React.CSSProperties` | *none* | Optional inline styles for the map container. |
50+
51+
52+
## Local Development
53+
54+
If you’d like to work with this repository directly, simply clone it and install its dependencies. Then, you can spin up the development server with the following commands:
55+
56+
```bash
57+
git clone https://github.com/asimov-protocol/asimov-map-widget.git
58+
cd asimov-map-widget
59+
nvm use // optional
60+
npm install
61+
npm run dev
62+
```

‎asimov.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/asimov.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ASIMOV Map Widget</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎src/App.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useEffect, useState } from 'react';
2+
import { MapView } from './lib/components/Map';
3+
4+
function App() {
5+
const [sparqlData, setSparqlData] = useState(null);
6+
7+
const endpointUrl = '/api'; // This is the proxy URL for the QLever SPARQL endpoint
8+
const sparqlQuery = `#All level-4 regions in France
9+
PREFIX osmkey: <https://www.openstreetmap.org/wiki/Key:>
10+
PREFIX osmrel: <https://www.openstreetmap.org/relation/>
11+
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
12+
PREFIX osm: <https://www.openstreetmap.org/>
13+
PREFIX ogc: <http://www.opengis.net/rdf#>
14+
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
15+
PREFIX geo: <http://www.opengis.net/ont/geosparql#>
16+
SELECT ?region ?name ?geometry WHERE {
17+
osmrel:2202162 ogc:sfContains ?region .
18+
?region osmkey:boundary "administrative" .
19+
?region osmkey:admin_level "4"^^xsd:int .
20+
?region rdf:type osm:relation .
21+
?region osmkey:name ?name .
22+
?region geo:hasGeometry/geo:asWKT ?geometry .
23+
}`;
24+
25+
useEffect(() => {
26+
const fetchData = async () => {
27+
try {
28+
const response = await fetch(endpointUrl, {
29+
method: 'POST',
30+
headers: {
31+
'Content-Type': 'application/sparql-query',
32+
'Accept': 'application/sparql-results+json'
33+
},
34+
body: sparqlQuery
35+
});
36+
const data = await response.json();
37+
setSparqlData(data?.results.bindings);
38+
} catch (error) {
39+
console.error('Error fetching data:', error);
40+
}
41+
};
42+
43+
fetchData();
44+
}, [sparqlQuery]);
45+
46+
return (
47+
<>
48+
{!sparqlData ?
49+
(<div className='text-2xl text-white'>Loading...</div>)
50+
: (
51+
<MapView
52+
data={sparqlData}
53+
className='h-screen'
54+
/>
55+
)}
56+
</>
57+
)
58+
}
59+
60+
export default App

‎src/index.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
html,
2+
body,
3+
#root {
4+
margin: 0;
5+
padding: 0;
6+
height: 100%;
7+
}
8+
9+
:root {
10+
height: 100vh;
11+
background-color: #05122e;
12+
}
13+
14+
15+
#root {
16+
height: 100%;
17+
}

‎src/lib/components/Map/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useRef } from 'react'
22
import 'ol/ol.css'
3-
import '../../style.css'
3+
import './style.css'
44
import OlMap from 'ol/Map'
55
import View from 'ol/View'
66
import { fromLonLat } from 'ol/proj'

‎src/lib/style.css‎ renamed to ‎src/lib/components/Map/style.css‎

File renamed without changes.

‎src/main.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
)

‎vite.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default defineConfig({
1111
tailwindcss(),
1212
dts({
1313
tsconfigPath: './tsconfig.app.json',
14+
exclude: ['src/App.tsx', 'src/main.tsx', 'src/index.css'],
1415
}),
1516
],
1617
build: {
@@ -35,4 +36,13 @@ export default defineConfig({
3536
globals: true,
3637
environment: 'jsdom',
3738
},
39+
server: {
40+
proxy: {
41+
'/api': {
42+
target: 'https://qlever.cs.uni-freiburg.de/api/osm-planet',
43+
changeOrigin: true,
44+
secure: false,
45+
}
46+
}
47+
}
3848
});

0 commit comments

Comments
 (0)