1 files changed, 92 insertions, 0 deletions
diff --git a/api/WhatApi/Pages/Map.cshtml b/api/WhatApi/Pages/Map.cshtml
new file mode 100644
index 0000000..31adf86
--- /dev/null
+++ b/api/WhatApi/Pages/Map.cshtml
@@ -0,0 +1,92 @@
+@page
+@model WhatApi.Pages.Map
+
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link href="https://unpkg.com/maplibre-gl@@^5.7.2/dist/maplibre-gl.css"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body, #map {
+            height: 90%;
+        }
+    </style>
+    <title></title>
+</head>
+<body>
+<div id="map"></div>
+<script src="https://unpkg.com/maplibre-gl@@^5.7.2/dist/maplibre-gl.js"></script>
+<script>
+    const map = new maplibregl.Map({
+        container: "map",
+        style: "https://tiles.openfreemap.org/styles/bright",
+        center: [10.253494570441944, 59.937419399772125],
+        zoom: 7
+    });
+
+    const markers = new Map();
+
+    let t = null;
+
+    map.on("moveend", () => {
+        clearTimeout(t);
+        t = setTimeout(updateData, 150);
+    });
+
+    map.on("load", () => {
+        map.loadImage("/pin.png").then(image => map.addImage("custom-marker", image.data));
+        map.addSource("places", {
+            type: "geojson",
+            data: {type: "FeatureCollection", features: []},
+            // cluster: true,
+            // clusterRadius: 40,
+            // clusterMaxZoom: 14
+        });
+
+        map.addLayer({
+            id: "places-layer",
+            type: "symbol",
+            source: "places",
+            layout: {
+                "icon-image": "custom-marker"
+            }
+        });
+
+        updateData();
+    });
+
+    let aborter = new AbortController();
+
+    async function updateData() {
+        const b = map.getBounds();
+        const south = b.getSouth(), west = b.getWest(), north = b.getNorth(), east = b.getEast();
+
+        if (aborter) {
+            aborter.abort();
+        }
+
+        aborter = new AbortController();
+
+        const res = await fetch(`/places?w=${west}&s=${south}&e=${east}&n=${north}`, {
+            signal: aborter.signal
+        });
+
+        if (!res.ok) {
+            return;
+        }
+
+        const data = await res.json().finally(() => aborter = null);
+        map.getSource("places").setData(data);
+    }
+</script>
+</body>
+</html>
+\ No newline at end of file