0

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 :D

  • You have tool that generates a Lat/Long and you want to locate that point. You don't need a geocoder to zoom to a point and create a popup. A reverse geocoder would accept Lat/Longs and return a Street Address. Which problem do you really need help on? – Bill Chappell Jan 30 '17 at 15:21
  • My problem is that I have a leaflet map on a side and a menu with mathematic treatments on an other side. In the menu, I have 2 HTML inputs which contain Lat/Long values resulting by the mathematic treatment. I want to use those Lat/Long values to make a popup on my map. It seems to be easy, but my problem is the fact that those Lat/Long values are generated by treatments which would be made by other people (Kilometer Point conversion to Lat/Long). So, those HTML inputs are generated automatically and it change at every PK to Lat/Long conversion. – bp03 Jan 30 '17 at 21:33
1

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>
  • yes this works and how I would do this to. – Mapperz Jan 31 '17 at 15:42
  • Your app had Lat/Long textboxes, like mine. put a button that when clicked reads the values, and creates the marker/popup and zooms to it. My buttonClick function does basically that. You should eb able to copy/modify it to work in your app. – Bill Chappell Jan 31 '17 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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