Leaflet.Geosearch: get lon / lat from address

Question

Without any JS knowledge, I was forced to implement a map (OSM via Leaflet) on a web page. On this map should be a pointer to the actual address of the person. The address is stored as a string in the database. I see a map, I can add a marker to it, but after that I got lost.

I tested some plugins for geocoding, but I have to admit that they are not simple enough for my actual programming experience.

Another question was about the same problem, but I did not understand how to get lon / lat from the address using L. Geosearch-plugin for the leaflet.

Can someone provide me with an example of address search (via OSMN or something else, not google / bing or another api-key-needy provider), converting it to lon / lat and adding a marker on the map to it?

Answer 1

First you will need to include the geocoder .js files in the head of your HTML code, for my example, I used this: https://github.com/perliedman/leaflet-control-geocoder . Like this:

<script src="Control.Geocoder.js"></script>

Then you will need to initialize the geocoder in your .js:

geocoder = new L.Control.Geocoder.Nominatim();

Then you will need to specify the address you are looking for, you can save it in a variable. For instance:

var yourQuery = (Addres of person);    

(You can also get the address from your database and then save it in a variable)

"" /. / . / , . .

geocoder.geocode(yourQuery, function(results) {    
       latLng= new L.LatLng(results[0].center.lat, results[0].center.lng);
       marker = new L.Marker (latLng);
       map.addlayer(marker);
});

Answer 2

jfsfiddle,

• , .

: https://jsfiddle.net/Alechan/L6s4nfwg/

"" Javascript "Promise", , , . , , , - , "x" "y" Geosearch.

Geosearch , . , , . promises MDM (Mozilla) Google.

, . .

:

<!-- Head, imports of Leaflet CSS and JS, Geosearch JS, etc -->

<div id='map'></div>


<script>
// Initialize map to specified coordinates
  var map = L.map( 'map', {
    center: [ 51.5, -0.1], // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
    zoom: 12
});

  // Add tiles (streets, etc)
  L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
}).addTo( map );

var query_addr = "99 Southwark St, London SE1 0JF, UK";
// Get the provider, in this case the OpenStreetMap (OSM) provider.
const provider = new window.GeoSearch.OpenStreetMapProvider()
// Query for the address
var query_promise = provider.search({ query: query_addr});
// Wait until we have an answer on the Promise
query_promise.then( value => {
   for(i=0;i < value.length; i++){
     // Success!
     var x_coor = value[i].x;
     var y_coor = value[i].y;
     var label = value[i].label;
     // Create a marker for the found coordinates
     var marker = L.marker([y_coor,x_coor]).addTo(map) // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
     // Add a popup to said marker with the address found by geosearch (not the one from the user)
     marker.bindPopup("<b>Found location</b><br>"+label).openPopup();
   };
}, reason => {
  console.log(reason); // Error!
} );

</script>