map test

app/listings/page.tsx

@@ -1,6 +1,54 @@
+"use client"
+import PageLayout from "@/components/_app/page-layout";
+// TODO: Check if this is really needed
+
+import { Feature, View } from "ol";
+import Map from 'ol/Map';
+import Point from "ol/geom/Point";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import { fromLonLat } from "ol/proj";
+import OSM from "ol/source/OSM";
+import VectorSource from "ol/source/Vector";
+import { Style, Text } from "ol/style";
+import { useEffect } from "react";
+
 export default function Home() {
+    const mapIconStyle = new Style({
+        text: new Text({
+            text: "Hello"
+        })
+    })
+    const mapPositionFeature = new Feature()
+    mapPositionFeature.setStyle(mapIconStyle)
+    const point = new Point(fromLonLat([0, 0]));
+    mapPositionFeature.setGeometry(point)
+
+    useEffect(() => {
+        const map = new Map({
+            target: 'map',
+            layers: [
+                new TileLayer({
+                    source: new OSM(),
+                }),
+                new VectorLayer({
+                    source: new VectorSource({
+                        features: [mapPositionFeature],
+                    }),
+                })
+            ],
+            view: new View({
+                center: [0, 0],
+                zoom: 2,
+            }),
+        });
+
+		return () => map.dispose()
+    }, []);
+
     return (
-        <main className='flex flex-col gap-5'>
-        </main>
+        <PageLayout>
+            <div id="map" className="w-full h-96" />
+        </PageLayout>
     );
 }