8

Without any knowledge of JS, I was forced to implement a map (OSM via Leaflet) on a webpage. On this map, there should be a marker for the actual address of a person. The address is saved as a string in the database. I can see a map, can add marker to it, but after that, I'm lost.

I've tested some Leaflet-geocoding-plugins, but i must confess, that they're not simple enough for my actual programmming experience.

Another question was about the same problem, but i didn't understand, how to get the lon/lat from an address with the L.Geosearch-plugin for Leaflet.

Can anyone provide me a example of looking up an address (via OSMN or something else, not google/bing or other api-key-needy provider), converting it to lon/lat and add a marker to it on a map?

2
  • 1
    You can get lat/lon for an address from nominatim open.mapquestapi.com/nominatim. How to put it into your leaflet map, i don' know sorry.
    – Gwny
    Jun 19, 2015 at 9:26
  • 1
    I'll not post an answer because I use openlayers, but you can have an idea in this example. Jun 20, 2015 at 14:57

2 Answers 2

9

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

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

Then you will have to initialize the Geocoder in your .js:

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

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

var yourQuery = (Addres of person);    

(You can also get the address out of your database, then save it in the variable)

Then you can use the following code to 'geocode' your address into latitude / longitude. This function will return the latitude / longitude of the address. You can save the latitude / longitude in an variable so you can use it later for your marker. Then you only have to add the marker to the map.

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);
});
1
  • Worked great if you just want to add it to a map on your page I'll add that I used the following setup to get it on my page ``` var map = L .map('map') .setView([ latLng.lat, latLng.lng ], 13); L .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }) .addTo(map);
    – Brooklee
    Jun 3, 2022 at 16:19
8

I made a jfsfiddle that

  1. Has an address set
  2. Looks for the coordinates of that address using geosearch
  3. Creates a marker at the coordinates of that address found by geosearch.

It can be found here: https://jsfiddle.net/Alechan/L6s4nfwg/

The "tricky" part is dealing with the Javascript "Promise" instance returned by geosearch and that the address may be ambigous and more than one coordinate may be returned in that case. Also, be careful because the first position in the Leaflet coordinates corresponds to the latitude and the second to the longitude, which is in reverse of the Geosearch "x" and "y" results.

Geosearch returns a promise because it's an asynchronous call. The alternative would have to be a synchronous call and the browser would have to be freezed until an answer was retrieved. More info about promises from MDM (Mozilla) and Google.

In my example, I create a marker for every result found for the indicated address. However, in this case the address is unambiguous and returns only one result.

Breakdown of code:

<!-- 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>
4
  • Upvote, because it works, but curious - where does L get declared?
    – Mawg
    Apr 3, 2019 at 18:46
  • 1
    @Mawg, L corresponds to Leaflet, so probably in leaflet.js, I'm not sure where exactly though.
    – Alechan
    Apr 4, 2019 at 1:52
  • 1
    I didn't find it described there, but this is the definitive site for examples of the AngularJs Leaflet directive. I guess I don't need to know where it is declared, just to be aware of it :-)
    – Mawg
    Apr 4, 2019 at 7:36
  • 1
    @Mawg, leaflet.js defines a function and then passes gobal variables window and document to it. It defines the document's L in the instructions "t.L = ...". You can unminify the code using unminify.com and play around in your browser (Firefox, Chrome, etc) by renaming all the apperances of "t.L" to "t.G" or whatever and check if then Leaflet is loaded into G instead of L.
    – Alechan
    Apr 4, 2019 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.