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>
|