NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

I use osrm , routing leaflet machine .The autosuggest with nominatim works with click .I want to change it to become autocomplete without click .How I can do it please .

asked 06 Mar '22, 01:01

aminali1991's gravatar image

aminali1991
21457
accept rate: 0%


In your code when you initialize the Geocoder to be used for the leaflet-routing-machine, you should add a query parameter of limit=1, e.g.:

geocoder: L.Control.Geocoder.nominatim({serviceUrl:LRM.geocodeServiceUrl, geocodingQueryParams: {'limit':'1'}}),

By that, you won't get a list of suggestions, but instead the first result is used immediately. So if you type "London" and hit enter, it will choose "London, UK".

Edit: but this won't be a autocomplete in the sense of extending/completing "Londo" to "London, Uk", as nominatim is not capable of doing autocomplete. So if you want a real autocomplete, you would have to switch to e.g. Photon or Pelias.

E.g with Photon you would use:

geocoder: L.Control.Geocoder.photon(),

But please note: autocomplete sends a lot of requests against the Photon API (which in this case is sponsored by Komoot, see https://photon.komoot.io/ ), so please use with care.

permanent link

answered 06 Mar '22, 09:45

Spiekerooger's gravatar image

Spiekerooger
3.1k22356
accept rate: 16%

edited 06 Mar '22, 14:32

Thank you for your response. Any idea to change geocoder nominatim with pelias or photon and integrated with leaflet routing machine . I have trace route between two points , so I want to do same thing search autocomplete without click and trace route like my old example with niminatim . Thank you in advance.

(06 Mar '22, 12:19) aminali1991

For autocomplete have a look at the example (and the code for map-2 at that example) at http://www.liedman.net/leaflet-routing-machine/tutorials/geocoders/ Section: autocomplete, which uses OpenRouteService geocoding API (you'll need an API key for that one).

But I'm still not 100% sure if you want autocomplete or just predefined values for start and end point in your route. If it is the latter, it would be easier to set them via lat/lon and use nominatim for reverse geocoding.

(06 Mar '22, 13:16) Spiekerooger

For the moment I am using an example similar to the one in the document, it works well, I just wanted to change when typing the suggestions will appear without a click on enter . You tell me to use Photon or Pelias. I don't know how to use it with leaflet routing machine like nominatim .The autocomplete with geocoder is functional but with click enter and I can't change it without click like in privacy for api .

(06 Mar '22, 14:20) aminali1991

Ok, so you just want autocomplete while typing. I updated the answer above showing how to use the Photon geocoder in leaflet-routing-machine (the suggestions appear without hitting enter or clicking, but you'll still have to choose one of the suggestions from autocomplete with a click). If that example helps, please use the accept answer link above.

(06 Mar '22, 14:34) Spiekerooger

Thank you for your response and guide .The autocomplete without click , this what I need , but I want to save the same work like with nominatim . search address start , address end then trace route on leaflet map .The language used by photon is java ?

(06 Mar '22, 14:51) aminali1991

I'm still not sure if I understand your problem correctly (would be nice if you could include a link to your project where it is easier to see where you are right now and what you want to achieve). So you have setup leaflet-routing-machine with nominatim and osrm but now - for autocomplete - want to use Photon.

Then this would be a full basic code example:

L.Routing.control({ routeWhileDragging: true, geocoder: L.Control.Geocoder.photon() }).addTo(map);

(06 Mar '22, 15:21) Spiekerooger

Yes exactly ,just modify autocomplete by photon .I use this instruction L.Routing.control({ routeWhileDragging: true, geocoder: L.Control.Geocoder.photon() }).addTo(map); Igot error "Failed to load resource: net::ERR_NAME_NOT_RESOLVED" https://photon.komoot.de/api/?q=p

(06 Mar '22, 15:31) aminali1991

You are using an outdated version of leaflet-routing-machine/leaflet-geocoder.

The API address of Photon has changed (to https://photon.komoot.io/?q=p ), this is corrected in the newest versions of leaflet-routing-machine/leaflet-geocoder.

(06 Mar '22, 15:35) Spiekerooger

Thanks very much , it works , just I want to limit search by countrie for example in france only

(06 Mar '22, 15:42) aminali1991

You could then either use location bias (with zoom and a lon lat and location_bias_scale added as queryParams to photon() or with a bbox added as queryParams to photon(), e.g. for Paris area (roughly):

geocoder: L.Control.Geocoder.photon({geocodingQueryParams: {'bbox': '2.076416,48.734455,2.658691,49.05947'}})

With that, you would e.g. find a Rue Berlin in Paris while typing Berlin, but not Berlin in Germany.

(adjust the bbox values accordingly to your needs, see https://github.com/komoot/photon for description of those params).

(06 Mar '22, 16:00) Spiekerooger

Thank you very much for your helpful .I will try it.

(06 Mar '22, 17:04) aminali1991

Hi , I try different params in documentation photon , but the suggestions are not true . I write for example Berlin , differents address appear out of paris

geocoder: L.Control.Geocoder.photon({ geocodingQueryParams: { city: 'paris', lang: 'fr' }}),

(07 Mar '22, 10:44) aminali1991

I don't see a "city" query param documented in https://github.com/komoot/photon , so I see no reason why your example should work as you want in using a unknown city parameter. Why don't you use a bbox if e.g. you want to limit results for the city of Paris? That at least will come close (that is having some suburbs included depending on your minLon,minLat,maxLon,maxLat values).

(07 Mar '22, 10:52) Spiekerooger

Thank you for your response .I'm sorry it's the first time I've used it, that's why I ask a lot of questions

(07 Mar '22, 11:19) aminali1991

I use this bbox values like in documentation bbox=9.5,51.5,11.5,53.5 , normally we get results of berlin . I write France , we display result of france .

geocoder: L.Control.Geocoder.photon({ geocodingQueryParams: { bbox: '9.5,51.5,11.5,53.5' }}),

for this param "?q=berlin", Ican't change it ?

(07 Mar '22, 11:58) aminali1991

I'm sorry to say this but if you have no experience in web development (javascript, using APIs, reading documentations etc.) and no gis experience (e.g. spinning up the right bbox for France) I dearly hope you are not trying to achieve this for a business project (or a research project for university in either CS or geography). If you do need this for a business/institutional project, you may think about using Pelias instead of Photon (as Pelias would have a boundary.country Parameter that could be used with a value of FRA for France, but you would need an API key by geocode.earth and spend at least 100$/month).

If you do this just for fun and want to stick with Photon, than please use (as an example) e.g. a southwest and a northeast point (with values mLon & mLat for southwest and maxLon & maxLat for northeast) that will spin up a rectangle across (mainland) France.

Now I just spun up a rough estimate for mainland France (including the island of Corse):

geocoder: L.Control.Geocoder.photon({geocodingQueryParams: {'bbox': '-4.262695,41.376809,9.228516,51.672555'}})

(continued in next comment ...)

(07 Mar '22, 15:11) Spiekerooger

(last comment continued)

Now if you search Berlin (?q=Berlin), you'll still get some results outside of France (that are e.g. in Switzerland or Germany close to the border of France) but most will be in France and none in Berlin, Germany (as the city of Berlin is outside of that rectangle). And searching for "New York" will get you e.g. an fastfood restaurant in Metz, France but no city or state in the U.S.

(07 Mar '22, 15:11) Spiekerooger

Thank you .I speak of experiences to use this api because even the documentation is not too much, but just to simulate things because with the "nominatim" api the search is very precise (except the click to see the suggestions) and with the api photon even the suggestions are not good: for example with "nominatim" always there is the name of the country at the end of the searched word (like google map), here name,the only word "paris" is displayed identically several times but clicking on such a "paris" brings you to a different place, it's good here but just to differentiate that's all, more readability.For example with "nominatim" : Paris, Île-de-France, France métropolitaine, France I applied what is on the document but the result remains far away, that is why I am asking for your help, not for fun.

(07 Mar '22, 15:33) aminali1991

That's why I wouldn't recommend an autocomplete API at all as Nominatim results are much better in my experience that any of those autocomplete solutions. But you are eager on using autocomplete so I'm trying to show you the (not perfect) solutions there are. But then as I said before: a link to your project or more information on what you need would be helpful. E.g. you want autocomplete results of only city names in France, then I would use:

geocoder: L.Control.Geocoder.photon({geocodingQueryParams: {'bbox': '-4.262695,41.376809,9.228516,51.672555','osm_tag':'place:city','osm_tag':'place:town','osm_tag':'place:village'}})

But this example may be of no help as I'm still left in the dark about which data you want to get out of those start and end point search boxes.

(07 Mar '22, 15:46) Spiekerooger

thank you for your patience and help . For example here https://www.liedman.net/leaflet-control-geocoder/

with option "photon" clicked , when enter "Lille" the result appear with name country at end , and more than word (Lille, Lille, Hauts-de-France, France...) In my case when enter "Lille" appear: Lille (in first line), Lille(in second line), Lille(third line) ... the same word without more indication The resuly here is goog : https://photon.komoot.io/ When compare result with this link , in my case , only text in bold appear

How I can do search like in documentation link

(07 Mar '22, 16:17) aminali1991

I does look as if you are not using the default options for Photon in Leaflet-Control-Geocoder. That's why it would be so great to see your code example, e.g. trough jsfiddle or a similar tool.

Anyway, try this:

geocoder: L.Control.Geocoder.photon({geocodingQueryParams: {'bbox': '-4.262695,41.376809,9.228516,51.672555','osm_tag':['place:city','place:town','place:village']},nameProperties:['name', 'street', 'suburb', 'hamlet', 'town', 'city', 'state', 'country']})

(07 Mar '22, 17:10) Spiekerooger
(07 Mar '22, 21:53) aminali1991

You had an old version of leaflet-control-geocoder (v1.5.5 instead of 2.4.0) in there.

Here is a basic example: https://jsfiddle.net/y0osacwh/1/ (and you should include each external source via ssl, e.g. tiles as well. I changed that as well).

(07 Mar '22, 22:37) Spiekerooger

Thank you for your guide and help .I try it . It's working

(09 Mar '22, 09:30) aminali1991
showing 5 of 24 show 19 more comments
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×689
×305
×85
×74
×19

question asked: 06 Mar '22, 01:01

question was seen: 2,205 times

last updated: 09 Mar '22, 09:30

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum