fusedio
diff --git a/Diff for: ‎.gitignore
-1 b/Diff for: ‎.gitignore
-1
diff --git a/Diff for: ‎js/index.tsx
+4-10 b/Diff for: ‎js/index.tsx
+4-10
diff --git a/Diff for: ‎js/map.tsx
+31 b/Diff for: ‎js/map.tsx
+31
@@ -12,7 +12,6 @@ node_modules
 .vagrant
 
 # JS output
-**/frontend/*.js*
 dist
 
 # self-signed certs
 
@@ -1,16 +1,10 @@
 import { createRoot } from 'react-dom/client';
-import HelloWorld from './hello.tsx';
+import App from './map';
 
-const App = () => {
+const Index = () => {
     return (
-        <body>
-            <main>
-                <section>
-                    <HelloWorld />
-                </section>
-            </main>
-        </body>
+        <App />
     );
 }
 
-createRoot(document.getElementById('app') as HTMLElement).render(<App />);
+createRoot(document.getElementById('app') as HTMLElement).render(<Index />);
@@ -0,0 +1,31 @@
+import React from "react";
+import { Map } from 'react-map-gl/maplibre';
+import DeckGL from '@deck.gl/react';
+import { ScatterplotLayer } from "@deck.gl/layers";
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+function App() {
+    return <DeckGL
+        initialViewState={{
+            longitude: 0.45,
+            latitude: 51.47,
+            zoom: 7
+        }}
+        controller
+    >
+        <ScatterplotLayer
+            data={[
+                { position: [-0.05, 51.47], size: 1000 },
+                { position: [0.05, 51.47], size: 500 },
+                { position: [0.45, 51.47], size: 2000 }
+            ]}
+            getPosition={d => d.position}
+            getRadius={d => d.size}
+        />
+        <Map
+            mapStyle="https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json"
+        />
+    </DeckGL>
+}
+
+export default App;