Autocomplete in input fields

Developers
1

Hi!

I deployed GH Open Source to my own VPS. Everything up and running and webapp with map works: http://s7.thalon.me:8989/maps/

However, somehow the AutoComplete in the input fields doesn’t seem to work. The street names are recognized and implemented, but there is no automatic completion. Is that correct or a mistake? I wonder if I configured the API key correctly. How can I check this?

Plus, I am currently using an API key from graphhopper.com which would also be expensive after the trial period has expired (14 days). I’m a private user/developer with no commercial intention. So I was wondering if can replace this API with something cheaper or even free / open source. I’d like to build a wheelchair navigation system (mainly for myself).

Thank you!

2

It is a routing demo and uses services like geocoding and maps from elsewhere. Have a look into nominatim and photon for geocoding.

I’m a private user/developer with no commercial intention. So I was wondering if can replace this API with something cheaper or even free / open source

btw: the API offers the free package.

3

Thank you for you quick answer, @karussell!

Thank you also for the hint with the free package. I wasn’t aware of that. It seems to suit my needs perfectly, so that might be the best solution.

I’m aware that the main purpose and focus of Graphhopper is to do routing. However, I wasn’t aware that it’s only meant to be a demo. So far, I’ve seen it as full-fledged open source project. After all, what’s the use of a routing service without the other parts of the eco system, like map display.

Anyway, would it be possible with the setup of the API key for geocoding, so that autocomplete works as expected?

Momentarily, in my options.js I have:

exports.options = {
    environment: "development",
    routing: {host: '', api_key: ''},
    geocoding: {host: 'graphhopper.com', api_key: '<apikey>'},
    thunderforest: {api_key: ''},
    omniscale: {api_key: ''},
    mapilion: {api_key: ''}
};

where is the API key I got from graphhopper.com. Can you maybe see where I made a mistake? I’m also not sure what is supposed to go into the host field.

Thanks again in advance!

4

GraphHopper is a full-fledged open source project (like you said routing is the focus) and “GraphHopper Maps” uses external services like maps and geocoding and so internet access is required. It was originally meant as a demo of the routing stuff but has certainly evolved over the years but the code is a mess :frowning: and so we call it only a demo. For production you can use it but we only recommend to use the server-side.

After all, what’s the use of a routing service without the other parts of the eco system, like map display

Geocoding and maps are completely different problems. You can try to implement this too, but we decided to avoid it.

Can you maybe see where I made a mistake?

For host you should use:

var host = “https://graphhopper.com/api/1/”;

1 Like
5

Thank you for the hint regarding the host. However, unfortunatetly, it still doesn’t do autocomplete.

I edited web/src/main/resources/assets/js/config/options.js to enter the host:

geocoding: {host: 'https://graphhopper.com/api/1/', api_key: '<apikey>'},

then, I copied it over:

cp web/src/main/resources/assets/js/config/options.js web/target/classes/assets/js/config/

after that I ran bundle to rebuild main.js

cd web; npm run bundle

I deleted the webapp jar:

rm target/graphhopper-web-0.13-SNAPSHOT.jar

Afterwards, I restarted the app:

cd .. ; ./graphhopper.sh -a web -i europe_germany_rheinland-pfalz.pbf

Finally, I reloaded the page in the browser and tried to type somethingj n the first input field. Still no autocomplete. I inspected what’s happenning with the network monitor of the Chrome developer tools, but there no requests being sent when I type…

6

The trick is to tell the UI that you are in “production” mode:

BROWSERIFYSWAP_ENV=‘production’ npm run bundleProduction

Due to this the following autocomplete method is used in JS:

https://github.com/graphhopper/graphhopper/blob/master/web/src/main/resources/assets/js/main-template.js#L40

1 Like
7

thank you for your hint! However, I tried what you suggested but the input fields still don’t do autocomplete. Could you maybe check under the url http:/s7.thalon.me:8989/ ? That would be awesome!

8

There is no network request, so it is still not the correct AutoComplete class.

Did you rebundle the jar or do you serve the JS from disk? (See https://github.com/graphhopper/graphhopper/blob/master/docs/core/quickstart-from-source.md#javascript)

9

I have uncommented the lines in my config.yml to serve the files from web/src/ but I also always delete the whole contents of web/target/ before starting GH to make sure that everything is freshly rebuilt…

10

Maybe I wil try to edit main-template.js to enable autocomplete in development mode. Plus, I will take out uglify to make the built main.js readable.

11

Yay that worked :slight_smile:

1 Like