1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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>
|
