-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (137 loc) · 5.23 KB
/
index.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Convert UTM coordinates to latitude & longitude</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="L.LatLng.UTM.js"></script>
</head>
<style>
body, p, input, li {
font-family: Verdana;
font-size: 1em;
line-height: 1.5em;
}
button {
font-family: Verdana;
font-size: 1em;
line-height: 1.5em;
}
div#container {
display: flex; height: 100%;
}
div#left {
width: 26%;
}
div#right {
flex-grow: 1;
}
div#map {
width: 100%;
height: 100%;
margin-left: 10px;
}
</style>
<body>
<div id="container">
<div id="left">
<p>
The boxes below allow you to enter either UTM (Universal Transverse Mercator) or geographic (latitude
and longitude) coordinates. After entering them and clicking the button:
<ul>
<li>the marker on the map will be updated</li>
<li>both the UTM and geographic coordinates will be updated</li>
</ul>
The boxes will change to green when the coordinates have been updated and are validated.
</p>
<p>
<b>UTM</b>
<br /> Easting: <input type="number" id="easting" />
<br /> Northing: <input type="number" id="northing" />
<br /> Zone: <input type="number" id="zone" />
</p><p> <button onclick="updateMarkerFromUTM();">Update location from UTM coordinates</button></p>
</p>
<p>
<b>Geographic</b>
<br /> Latitude: <input type="number" id="latitude" value="-34.9287" />
<br /> Longitude: <input type="number" id="longitude" value="138.6000" />
<!-- <br /> Latitude: <input type="number" id="latitude" />
<br /> Longitude: <input type="number" id="longitude" /> -->
</p><p> <button onclick="updateMarkerFromGeographic();">Update location from geographic coordinates</button></p>
</p>
<p>
If entering UTM coordinates, please check that the zone is correct:
<ul>
<li> The western half of SA is zone 53</li>
<li> The eastern half of SA is zone 54</li>
</ul>
A yellow line on the map shows the boundary between zone 53 and 54.
</p>
</div>
<div id="map"></div>
</div>
<script>
var map = L.map('map').setView([-34.5, 138.5], 8);
var latlngs = [
[0, 138],
[-88, 138],
];
var polyline = L.polyline(latlngs, {color: 'yellow', weight: 1}).addTo(map);
const tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 19,
attribution: 'Tiles © <a href="https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9">Esri</a> — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community'
}).addTo(map);
var markers = L.layerGroup();
markers.addTo(map);
function updateMarkerFromUTM () {
easting = Number(document.getElementById("easting").value);
northing = Number(document.getElementById("northing").value);
zone = Number(document.getElementById("zone").value);
item = L.utm({x: easting, y: northing, zone: zone, southHemi: true});
coord = item.latLng();
updateMarkerAt(coord.lat, coord.lng);
}
function updateMarkerFromGeographic () {
lat = Number(document.getElementById("latitude").value);
lng = Number(document.getElementById("longitude").value);
updateMarkerAt(lat, lng);
}
function updateMarkerAt (lat, lng) {
markers.clearLayers();
document.getElementById("latitude").value = Math.round(lat * 10000) / 10000;
document.getElementById("longitude").value = Math.round(lng * 10000) / 10000;
console.log("updating marker at lat " + lat + " lng " + lng);
marker = L.marker([lat, lng], {draggable: true});
utm = marker.getLatLng().utm();
document.getElementById("easting").value = Math.round(utm.x);
document.getElementById("northing").value = Math.round(utm.y);
document.getElementById("zone").value = utm.zone;
markers.addLayer(marker);
map.flyTo([lat, lng]);
resetColorsTo("lightgreen");
marker.on('dragend', function(event) {
m = event.target;
coord = m.getLatLng();
updateMarkerAt(coord.lat, coord.lng);
resetColorsTo("lightgreen");
});
};
document.getElementById("latitude").addEventListener("keyup", function(event) { resetColorsTo("white"); });
document.getElementById("longitude").addEventListener("keyup", function(event) { resetColorsTo("white"); });
document.getElementById("easting").addEventListener("keyup", function(event) { resetColorsTo("white"); });
document.getElementById("northing").addEventListener("keyup", function(event) { resetColorsTo("white"); });
document.getElementById("zone").addEventListener("keyup", function(event) { resetColorsTo("white"); });
function resetColorsTo(colour) {
document.getElementById("latitude").style.backgroundColor = colour;
document.getElementById("longitude").style.backgroundColor = colour;
document.getElementById("easting").style.backgroundColor = colour;
document.getElementById("northing").style.backgroundColor = colour;
document.getElementById("zone").style.backgroundColor = colour;
};
updateMarkerFromGeographic();
</script>
</body>
</html>