Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Leaflet Address Lookup and Coordinates</title>
- <meta charset="utf-8">
- <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
- <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
- <style type="text/css">
- html, body { width:100%;padding:0;margin:0; }
- .container { width:95%;max-width:980px;padding:1% 2%;margin:0 auto }
- #lat, #lon { text-align:right }
- #map { width:100%;height:50%;padding:0;margin:0; }
- .address { cursor:pointer }
- .address:hover { color:#AA0000;text-decoration:underline }
- </style>
- </head>
- <body>
- <div class="container">
- <p><a class="navbar-brand bila success" href="index.php"><img src="images/logo/gatourbano.png" alt="" height="50" /></a></p>
- <b>Address Lookup</b>
- <div id="search">
- <form method="get">
- <input type="text" name="addr" value="" id="addr" size="58" />
- <button type="button" onClick="addr_search();">Search</button>
- </form>
- <div id="results"></div>
- <form>
- <input type="text" name="lat" id="lat" size=12 value="">
- <input type="text" name="lon" id="lon" size=12 value=""> <input type="text" name="lon" id="endereco" value="">
- </form>
- </div>
- <br />
- <div id="map"></div>
- </div>
- <script type="text/javascript">
- // New York
- var startlat = 40.75637123;
- var startlon = -73.98545321;
- var options = {
- center: [startlat, startlon],
- zoom: 9
- }
- document.getElementById('lat').value = startlat;
- document.getElementById('lon').value = startlon;
- var map = L.map('map', options);
- var nzoom = 12;
- L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'}).addTo(map);
- var myMarker = L.marker([startlat, startlon], {title: "Coordinates", alt: "Coordinates", draggable: true}).addTo(map).on('dragend', function() {
- var lat = myMarker.getLatLng().lat.toFixed(8);
- var lon = myMarker.getLatLng().lng.toFixed(8);
- var czoom = map.getZoom();
- if(czoom < 18) { nzoom = czoom + 2; }
- if(nzoom > 18) { nzoom = 18; }
- if(czoom != 18) { map.setView([lat,lon], nzoom); } else { map.setView([lat,lon]); }
- document.getElementById('lat').value = lat;
- document.getElementById('lon').value = lon;
- myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
- });
- function chooseAddr(lat1, lng1)
- {
- myMarker.closePopup();
- map.setView([lat1, lng1],18);
- myMarker.setLatLng([lat1, lng1]);
- lat = lat1.toFixed(8);
- lon = lng1.toFixed(8);
- document.getElementById('lat').value = lat;
- document.getElementById('lon').value = lon;
- myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
- }
- function myFunction(arr)
- {
- var out = "<br />";
- var i;
- if(arr.length > 0)
- {
- for(i = 0; i < arr.length; i++)
- {
- out += "<br><div class='address' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
- }
- document.getElementById('results').innerHTML = out;
- }
- else
- {
- document.getElementById('results').innerHTML = "Sorry, no results...";
- }
- }
- function addr_search()
- {
- var inp = document.getElementById("addr");
- var xmlhttp = new XMLHttpRequest();
- var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + inp.value;
- xmlhttp.onreadystatechange = function()
- {
- if (this.readyState == 4 && this.status == 200)
- {
- var myArr = JSON.parse(this.responseText);
- myFunction(myArr);
- }
- };
- xmlhttp.open("GET", url, true);
- xmlhttp.send();
- }
- </script>
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment