Address/ landmark search

[alepuccetti]

Like the eye icon that allows you to go to specific coordinates, it would be great to have another button that allows you to search for addresses and landmark. Like in openstreet map.

[nreese]

Is there an open API for converting landmarks into lat/lons

[alepuccetti]

After some digging, I found this API: http://nominatim.openstreetmap.org/search?q="london"&format=json, which returns results in json (other formats are available, see http://wiki.openstreetmap.org/wiki/Nominatim).

Example:

[
  {
    "place_id": "179118272",
    "licence": "Data © OpenStreetMap contributors, ODbL 1.0. http://www.openstreetmap.org/copyright",
    "osm_type": "relation",
    "osm_id": "65606",
    "boundingbox": [
      "51.2867602",
      "51.6918741",
      "-0.5103751",
      "0.3340155"
    ],
    "lat": "51.5073219",
    "lon": "-0.1276474",
    "display_name": "London, Greater London, England, United Kingdom",
    "class": "place",
    "type": "city",
    "importance": 0.31637239413505,
    "icon": "http://nominatim.openstreetmap.org/images/mapicons/poi_place_city.p.20.png"
  }
  ...
]

We could use the first value (best effort) or we could run the query after a second of the last character is typed and show a list of value and then the user can select the one he wants to go to.

[alepuccetti]

@nreese I start working on this feature in this branch. I am not a JS expert so any feedbacks you can provide will be very much appreciated.

I added a new 🔍 button to implement search. For now, I would like to do the API call and go to the coordinates of the first result. Then, it would be interesting to show in a drop-down slider the top n result (so that the user can have multiple choices) by firing the API query after 1 second of the last typed character and set the view to the user selected entry.

[alepuccetti]

Also, the API returns a bounding box of the address/landmark and it would be cool to extrapolate the zoom level from that.

[alepuccetti]

I found this work about implementing search in in leaflet, but I cannot find a way to integrate it into the map. https://github.com/perliedman/leaflet-control-geocoder/tree/master

Maybe for someone more expert than me in JS it is an easy task.