diff options
Diffstat (limited to 'api/WhatApi/Templates/web_upload.liquid')
| -rw-r--r-- | api/WhatApi/Templates/web_upload.liquid | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/api/WhatApi/Templates/web_upload.liquid b/api/WhatApi/Templates/web_upload.liquid new file mode 100644 index 0000000..5688a01 --- /dev/null +++ b/api/WhatApi/Templates/web_upload.liquid @@ -0,0 +1,75 @@ +<!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 |