How to add Search bar in leaflet maps and how to assign latitude and longitude of searched location to variables, so I can use them later

Question

How to assign latitude and longitude to latt and lngg ?

     <script>
     var lngg, latt;
     var map = L.map('map').setView([19.8684798, 75.3218784], 10);
            
             map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));    
 
             map.addControl( new L.Control.Search({
                     url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
                     jsonpParam: 'json_callback',
                     propertyName: 'display_name',
                     propertyLoc: ['lat','lon'],
                     marker: L.marker([0,0]),
                     autoCollapse: true,
                     autoType: false,
                     minLength: 2
                 })
             );
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
             }).addTo(map);


       </script>

I checked documentation but I'm unable to understand how to do this.

score 0 · Answer 1 · answered Nov 14 '20 at 20:31

0

Try to declare the 'search bar' as a variable and listen to the search events.

    var search = new L.Control.Search({
      url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
                     jsonpParam: 'json_callback',
                     propertyName: 'display_name',
                     propertyLoc: ['lat','lon'],
                     marker: L.marker([0,0]),
                     autoCollapse: true,
                     autoType: false,
                     minLength: 2
  });

search.on('search:locationfound',
      function(e) {
          //You can get your required lat/lon this way 
          console.log(e.latlng)
          
           })

map.addControl( search );

answered Nov 14 '20 at 20:31

PeaceLeka

1,138
1
9
11

That's Working ! Thank you so much. – Saurabh Dhakne Nov 15 '20 at 04:18
I used " map.on('click', onMapClick); " function, onMapClick() update the marker when we drag marker , but it update only after user click on map so if user haven't click on map the after dragging marker the marker location won't update, so how to use, so how to use on load ( i tried map.on('click', onMapClick) but it's not working ) – Saurabh Dhakne Nov 15 '20 at 04:24
@SaurabhDhakne that's 2 questions. Can you accept the answer as correct and your second question check this [SO question](https://stackoverflow.com/questions/18382945/how-do-i-get-the-latlng-after-the-dragend-event-in-leaflet). – PeaceLeka Nov 15 '20 at 07:19
Yes! the answer is absolutely Right. Thanx. – Saurabh Dhakne Nov 16 '20 at 09:29

How to add Search bar in leaflet maps and how to assign latitude and longitude of searched location to variables, so I can use them later

1 Answers1