[GIS] Leaflet popup LatLong geocoder

html-popupleafletnominatimpopupreverse-geocoding

I have a problem today with the Nominatim reverse geocoder for Leaflet.

I found a solution on github : https://github.com/perliedman/leaflet-control-geocoder , but I don't know how to use it.

I can use the mapzen solution for the normal geocoding but for the reverse it doesn't work…

In fact, I have a HTML page which contains a leaflet map at the right, and a toggle menu at the left. In this menu, I have a mathematic tool which make some treatments to find some Lat Long coordinates.
Those coordinates appears in a with the dd.dddddddd format.

And I want this LatLong result to be located on my map with a point and a toggle popup.

I've made a little Schema to illustrate my needs :

popup_lat_long_location

I've tried to put a "L.popup" solution but it doesn't work :

L.popup(); 

function onMapClick(e) {
    popup
        .setLatLng(['sch-lat','sch-long'])
        .setContent("The coordinates are" + ['sch-lvpk-lat','sch-lvpk-long'].toString())
        .openOn(map);
}

map.on('click', onMapClick);

The 'sch-lat','sch-long' are the html inputs in which we have lat long values.

And I also tried to make a Nominatim reverse geocoding by using leaflet-control-geocoder but I don't know how to use it…
I made this : 

L.control.showAll({bounds: L.latLngBounds(L.latLng(41.058, 9.257), L.latLng(51.009, -5.295))}).addTo(map);
L.control.geocoder('mapzen-vv6kj8z').addTo(map);
L.control.geocoder('Nominatim').addTo(map);
L.control.scale({options: {position: 'bottomleft',maxWidth: 100,metric: true,imperial: false,updateWhenIdle: false}}).addTo(map);
L.control.mousePosition().addTo(map);

But it doesn't work neither…

If you have another solution I accept it 😀

Best Answer

This may work:

<!DOCTYPE html>
<html>
<head><title>Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

</head>
<style>
#header    { width: 100%;height: 25px; float: left; font:14px Verdana;font-weight:bold}
</style>
<body>
<div id="header"> 
          Lat:  <input type="text" id="lat">
          Long:  <input type="text" id="lng">
          <button onclick="buttonClick()">Click</button>
</div>
<div id="map" style="width: 600px; height: 400px;"></div>
</div>

<script>

var map = L.map('map').setView([42.736424, -73.762713], 8);  

var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);

// used to populate the two textboxes
var theSampleLat = 42.682435;
var theSampleLng = -73.78967;

document.getElementById("lat").value = theSampleLat;
document.getElementById("lng").value = theSampleLng;

function buttonClick(){
    //Get values from textboxs
    var theLat = document.getElementById("lat").value;
    var theLng = document.getElementById("lng").value;

    //Make marker
    L.marker([theLat,theLng]).addTo(map)
    .bindPopup("Your point is at " + theLat+", "+theLng).openPopup();

    map.setView([theLat,theLng], 15);

};

</script>
</body>
</html>
Related Question