How to add the API's from vendors such as Thunderforest

When you run the jar file and the website displays on localhost:8989
In the Layer section it shows additional Layers some of which are Thunderforest. When the map loads it states invalid API. I have the API but where or how do you tell Graphhopper?

Here’s some update:

I have found the location inside the jar file. I tried changing the entry and resaved the jar file. But now when I try to start the server from the .jar file, it fails and dosen’t even begin to load.

Can someone explain the best way to edit the .jar file, from extracting, edit the file then zip it back up as a usable .jar file.

I’m using Centos 8stream

I’ve modified the options.js file outside of the .jar file. When I try to update it with this command it states no directory:
jar uf graphhopper-web-5.3.jar -C com/graphhopper/maps/js/config/ options.js

any suggestions

Thanks, slowly learning.

You can set the Thunderforest API key directly here:

or in the options file here:

After you made your changes you need to build the web app using npm run bundleProduction and start the server again. This takes all the JavaScript sources and writes them to the main.js file. The same command is run automatically if you build a new jar using mvn clean package -DskipTests. So I recommend changing the key in one of the two files and then running this latter Maven command (you need Maven and a JDK for this, see the documentation).

That being said, I just also managed to set the key by modifying the jar file. I used vim to navigate and manipulate main.js. So if you try to modify the jar file make sure to change the api key in main.js, not in one of the two source files I mentioned above.

What location/path is the main.js located as I’m doing the vim approach.

I just downloaded the .jar file directly and did not clone or build graphhopper from gitHub.

Thanks

Okay, I’m giving up as I have changed the main.js, options.js. and on and on and on.

Still doesn’t work:
I’ve tried vim, jar uf and xf and everything, if I completely exit out reboot and go back and look at all those files it has the Thunderforest APIKEY so I’m lost and confused.

Thanks again for trying to help me, just hasn’t worked.

The path is com/graphhopper/maps/js/main.js. You should be able to press /, then type main.js, hit enter twice, then do the same with search term thunderforest to change the api key :slight_smile:

The exact spot where I changed the key looked like this:

},{"./graphhopper/GHInput.js":16,"./graphhopper/GHRoute.js":18,"./map.js":26,"./tools/format.js":30}],13:[function(require,module,exports){
exports.options={with_tiles:!0,environment:“development”,routing:{host:"",api_key:""},geocoding:{host:"",api_key:""},thunderforest:{api_key:“f3ecfa5c078c43-the rest of the key is hidden”},omniscale:{api_key:""},mapilion:{api_key:""}};

Yes? This looks right. Did it not work? If it does not work try to open the dev tools in your browser (F12), choose the thunderforest layer and check the network tab if a) the api-key is included in the requested urls and b) the requests succeed.

Nothing is working, keys show up everywhere, I even went as far as deleting the graph-cache directory ensuring I completely turn off system, rebooted and still the same issues.

It’s only with graphhopper as I have many other PHP, PYTHON and HTML files that work perfectly.

I have one simple jar file: graphhopper-web-5.3.jar

The keys show up everywhere?? You mean you see the correct api keys in the dev tools network tab requests? That means modifying the jar must have worked. So if you still see the wrong tiles it must be a browser caching issue. Try using private mode or zoom to another region.

I even went as far as deleting the graph-cache directory ensuring I completely turn off system, rebooted and still the same issues.

The graph-cache directory is entirely unrelated to the map tiles. Turning off or rebooting your system would not necessarily clear your browser’s cache. Note that GraphHopper has literally nothing to do with the map tiles except this little bit of JavaScript that sets the url (including the api key) where the tiles are downloaded from.

I’m happy to report I got it working finally :slight_smile:

I went ahead and deleted everything related to graphhopper.

Re-downloaded the .jar file.

Opened the jar file with linux ArchiveManager, copied just the main.js file , then edited it with VI, then saved it, then re-opened the .jar file with ArchiveManager and copied the main.js file back in.

Started graphhopper and all is good.

Thanks for your help and patience.

What a 2 day adventure this has been!

Glad to hear you got it working even though it took so long. Btw you can edit the file from within vim, no need to copy and put main.js back in.

But anyway as a standard approach I still recommend downloading the sources and building the jar from scratch if modifications are desired.