Menu
In my project I am using leaflet to display points.
I am getting address from my database & want to show point for that particular address.
I haven't found anything which will give me latitude & longitude as per address provided.
Can anyone help me on this?
608
On Site Using a Mobile Device Android: Open Google Maps; it will zoom to your approximate location. Press and hold on the screen to drop a pin marker. Click on the dropped pin; latitude and longitude will be displayed below the map.
Latitude is your distance North or South from Earth's equator, measured in degrees. 0° is the latitude at the equator, +90° is the latitude at the North Pole, and -90° is the latitude at the South Pole.
If you want to use OpenStreetmaps for this, you can simply make a request (using jquery):
$.get(location.protocol + '//nominatim.openstreetmap.org/search?format=json&q='+address, function(data){ console.log(data); }); You'll get JSON objects containing (not only) lat and lon.
129
solution without additional plugins. only Leaflet and pure JavaScript. dragging the marker or entering an address gives you coordinates. if you have problems with the nominatim request just change https to http. demo here : http://yellowthailand.com/leafletgeo.html
<html> <head> <title>Leaflet Address Lookup and Coordinates</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <script src="https://unpkg.com/[email protected]/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"> <b>Coordinates</b> <form> <input type="text" name="lat" id="lat" size=12 value=""> <input type="text" name="lon" id="lon" size=12 value=""> </form> <b>Address Lookup</b> <div id="search"> <input type="text" name="addr" value="" id="addr" size="58" /> <button type="button" onclick="addr_search();">Search</button> <div id="results"></div> </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 += "<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> </body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
