diff options
| author | ivar <i@oiee.no> | 2025-10-20 00:26:34 +0200 |
|---|---|---|
| committer | ivar <i@oiee.no> | 2025-10-20 00:26:34 +0200 |
| commit | a1f0518d0cd123a791adde64f4f11bd8e44276c7 (patch) | |
| tree | 675a7dff8262eea877ec800ff1efe9b92f5d7e7d /api/WhatApi/Pages/Map.cshtml | |
| download | what-a1f0518d0cd123a791adde64f4f11bd8e44276c7.tar.xz what-a1f0518d0cd123a791adde64f4f11bd8e44276c7.zip | |
Initial commit
Diffstat (limited to 'api/WhatApi/Pages/Map.cshtml')
| -rw-r--r-- | api/WhatApi/Pages/Map.cshtml | 92 |
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 |