leaflet.utm
Version:
Converts LatLng to UTM WGS84 in Leaflet
118 lines (104 loc) • 4.24 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet UTM Demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet-src.js"></script>
<style type="text/css">
html { font-family: Helvetica, Verdana, Arial, sans-serif; }
#map { width: 70%; height: 400px; margin: 20px; }
form { margin: 20px; }
.btn { margin: 20px; }
#center { margin: 20px; }
.crosshairs:before, .crosshairs:after {
content: '';
position: absolute;
width: 32px;
height: 32px;
z-index: 999;
pointer-events: none;
}
.crosshairs:before {
bottom: 50%;
left: 50%;
transform: translate(-50%, 0);
border-bottom: 1px #000 solid;
}
.crosshairs:after {
right: 50%;
top: 50%;
transform: translate(0, -50%);
border-right: 1px #000 solid;
}
</style>
</head>
<body>
<br>
<form id="frm1" action="">
Latitude: <input type="text" name="lat" value="0" size="10">
Longitude: <input type="text" name="lng" value="0" size="10">
<span class="btn"><input type="button" onclick="toUTMBtn()" value="Convert"></span>
UTM: <span id="result1"></span>
</form>
<form id="frm2" action="">
x: <input type="text" name="x" value="" size="9">
y: <input type="text" name="y" value="" size="9">
zone: <input type="text" name="zone" value="" size="2" maxlength="2">
band: <input type="text" name="band" value="" size="2" maxlength="2">
(southHemi: <input type="text" name="southHemi" value="" size="2" maxlength="5" title="used only if band is empty">)
<span class="btn"><input type="button" onclick="toLatLngBtn()" value="Convert"></span>
<span id="result2"></span>
</form>
<div id="map" class="crosshairs"></div>
<div id="center">
<script src="../L.LatLng.UTM.js"></script>
<script type="text/javascript">
var el1 = document.forms.frm1.elements;
var el2 = document.forms.frm2.elements;
function toUTMBtn() {
document.getElementById('result1').innerHTML = '---';
var ll = L.latLng(el1.lat.value, el1.lng.value);
var utm = ll.utm();
marker.setLatLng(ll).bindPopup(utm + '<br>' + ll).openPopup()
el2.x.value = utm.x.toFixed(1);
el2.y.value = utm.y.toFixed(1);
el2.zone.value = utm.zone;
el2.band.value = utm.band;
el2.southHemi.value = utm.southHemi;
document.getElementById('result1').innerHTML = '' + utm;
}
function toLatLngBtn() {
document.getElementById('result2').innerHTML = '---';
var sh = el2.southHemi.value.toLowerCase();
var southHemi = ['true', 'y', 'yes', '1'].indexOf(sh) > -1 ? true : false;
var utm = L.utm(el2.x.value, el2.y.value, el2.zone.value, el2.band.value, southHemi);
var ll = utm.latLng();
if (ll) {
marker.setLatLng(ll).bindPopup(utm + '<br>' + ll).openPopup()
el1.lat.value = ll.lat.toFixed(6);
el1.lng.value = ll.lng.toFixed(6);
document.getElementById('result2').innerHTML = '' + ll;
}
}
var options = {
attribution:
'<a href="https://openstreetmap.org/copyright"</a> © ' +
'OpenStreetmap Contributors',
subdomains: 'abc',
minZoom: 0,
maxZoom: 19
};
var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', options);
var map = L.map('map', {layers: [osm], center: [0, 0], zoom: 2});
var marker = new L.Marker([0, 0]).addTo(map);
toUTMBtn();
map.on('move', function(e) {
var c = map.getCenter();
document.getElementById('center').innerHTML = c + '<br>UTM: ' + c.utm();
});
map.fire('move');
</script>
</body>
</html>