netico
/
code-library


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{$title}</title>
	<link rel="shortcut icon" href="{$favicon}">
	<link href="vendor/twitter/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

	<script>
		function nominatim(str) {
			if (str.length == 0) { 
				document.getElementById("coordinates").innerHTML = "";
				return;
			} else {
				var xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (this.readyState == 4 && this.status == 200) {
						document.getElementById("coordinates").innerHTML = this.responseText;
					}
				};
				xmlhttp.open("GET", "?address=" + btoa(str), true);
				xmlhttp.send();
			}
		}
		
		function blank() {
			document.getElementById("address").value = "Craven Road 7, London";
			document.getElementById("coordinates").innerHTML = "";
		}
	</script>

</head>
<body class="text-center">
	<main style="max-width: 350pt; margin: auto;">
		<form onsubmit="return false" class="m-5">
			<h1 class="h1">{$title}</h1>
			<span>Powered by <a href="https://www.openstreetmaps.org">OpenStreetMaps</a>.</span>
			<div class="form-floating mt-4">
				<input class="form-control" id="address" name="address" type="text" placeholder="Craven Road 7, London" required autofocus>
				<label for="address">Address</label>
			</div>
			<div class="form-floating mt-2">
				<div id="coordinates" type="text" ></div>
			</div>
			<div class="form-floating mt-2">
				<button class="btn btn-lg btn-primary m-2" onclick="nominatim(document.getElementById('address').value)" type="submit">
					Get coordinates
				</button>
				<button class="btn btn-lg btn-secondary m-2" onclick="blank()" type="submit">
					Clear
				</button>				
			</div>
		</form>
	</main>
</body>
</html>