1 files changed, 82 insertions, 0 deletions
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