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 | |
| download | what-a1f0518d0cd123a791adde64f4f11bd8e44276c7.tar.xz what-a1f0518d0cd123a791adde64f4f11bd8e44276c7.zip | |
Initial commit
Diffstat (limited to 'api/WhatApi/Pages')
| -rw-r--r-- | api/WhatApi/Pages/Map.cshtml | 92 | ||||
| -rw-r--r-- | api/WhatApi/Pages/Map.cshtml.cs | 10 | ||||
| -rw-r--r-- | api/WhatApi/Pages/Upload.cshtml | 82 | ||||
| -rw-r--r-- | api/WhatApi/Pages/Upload.cshtml.cs | 10 |
4 files changed, 194 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 diff --git a/api/WhatApi/Pages/Map.cshtml.cs b/api/WhatApi/Pages/Map.cshtml.cs new file mode 100644 index 0000000..786180b --- /dev/null +++ b/api/WhatApi/Pages/Map.cshtml.cs @@ -0,0 +1,10 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace WhatApi.Pages; + +public class Map : PageModel +{ + public void OnGet() { + + } +}
\ No newline at end of file diff --git a/api/WhatApi/Pages/Upload.cshtml b/api/WhatApi/Pages/Upload.cshtml new file mode 100644 index 0000000..4c87b11 --- /dev/null +++ b/api/WhatApi/Pages/Upload.cshtml @@ -0,0 +1,82 @@ +@page +@model WhatApi.Pages.Upload + +@{ + Layout = null; +} + +<!DOCTYPE html> + +<html> +<head> + <link href="https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css" + rel="stylesheet"/> + <style> + body { + margin: 0; + padding: 0; + } + + html, body, #map { + height: 100%; + } + + .coordinates { + background: rgba(0, 0, 0, 0.5); + color: #fff; + position: absolute; + bottom: 40px; + left: 10px; + padding: 5px 10px; + margin: 0; + font-size: 11px; + line-height: 18px; + border-radius: 3px; + display: none; + } + </style> + <title></title> +</head> +<body> +<div style="display: flex; flex-direction: row; align-items: center; z-index: 10; position: absolute; background: white"> + <form action="/upload" + enctype="multipart/form-data" + method="post"> + <input type="hidden" + name="LatLong"> + <input type="file" + required="required" + accept="image/png, image/jpeg" + name="File"> + <input type="submit"> + </form> +</div> +<div id="map"></div> +<pre id="coordinates" + class="coordinates"></pre> +<script src='https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.js'></script> +<script> + const latlongInput = document.querySelector("[name=LatLong]"); + const coordinates = document.getElementById("coordinates"); + const map = new maplibregl.Map({ + container: "map", + style: "https://tiles.openfreemap.org/styles/bright", + center: [10.253494, 59.937419], + zoom: 7 + }); + + const center = map.getCenter(); + const marker = new maplibregl.Marker({draggable: true}).setLngLat([center.lng, center.lat]).addTo(map); + + function onDragEnd() { + const {lat: lat, lng: lng} = marker.getLngLat(); + coordinates.style.display = "block"; + latlongInput.value = lat + "," + lng; + coordinates.innerHTML = + `Longitude: ${lng}<br />Latitude: ${lat}`; + } + + marker.on("dragend", onDragEnd); +</script> +</body> +</html>
\ No newline at end of file diff --git a/api/WhatApi/Pages/Upload.cshtml.cs b/api/WhatApi/Pages/Upload.cshtml.cs new file mode 100644 index 0000000..2fe362e --- /dev/null +++ b/api/WhatApi/Pages/Upload.cshtml.cs @@ -0,0 +1,10 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace WhatApi.Pages; + +public class Upload : PageModel +{ + public void OnGet() { + + } +}
\ No newline at end of file |