map test

app/listings/page.tsx

@@ -1,6 +1,97 @@
+"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 { Geometry } from "ol/geom";
+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 { Fill, Stroke, Style, Text } from "ol/style";
+import CircleStyle from "ol/style/Circle";
+import { useEffect } from "react";
+
 export default function Home() {
+    const mapIconStyle = new Style({
+        image: new CircleStyle({
+            radius: 7,
+            fill: new Fill({
+                color: 'rgba(123, 23, 128)',
+
+            }),
+            stroke: new Stroke({
+                color: 'rgba(256, 256, 256, 0.9)',
+                width: 2,
+            }),
+        }),
+    })
+    const mapPositionFeature = new Feature()
+    mapPositionFeature.setStyle(mapIconStyle)
+    const point = new Point(fromLonLat([0, 0]));
+    mapPositionFeature.setGeometry(point)
+
+    useEffect(() => {
+        let selected: Feature<Geometry> | undefined;
+
+        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,
+            }),
+        });
+
+
+        // TODO: demo on click (for show listing card)
+        // demo on hover (for change map pos style) https://openlayers.org/en/latest/examples/select-hover-features.html
+        map.on('pointermove', (e) => {
+            if (selected) {
+                selected.setStyle(mapIconStyle)
+                selected = undefined
+            }
+
+            map.forEachFeatureAtPixel(e.pixel, (f) => {
+
+                if (mapPositionFeature === f) {
+                    selected = f;
+                    selected.setStyle(new Style({
+                        image: new CircleStyle({
+                            radius: 14,
+                            fill: new Fill({
+                                color: 'rgba(23, 23, 128)',
+
+                            }),
+                            stroke: new Stroke({
+                                color: 'rgba(256, 256, 256, 0.9)',
+                                width: 2,
+                            }),
+                        }),
+                    }))
+                }
+            })
+        })
+
+
+        return () => map.dispose()
+    }, []);
+
     return (
-        <main className='flex flex-col gap-5'>
-        </main>
+        <PageLayout>
+            <div id="map" className="w-full h-96" />
+        </PageLayout>
     );
 }