Today I can make an exciting news.
Now after a chat with him and lots of work (he did), he finally reached the goal to run GraphHopper in the Browser, either via a normal bidirectional Dijkstra or a fast algorithm called Contraction Hierarchies – see below for a demo!
But what would be a use case?
Another use case could be a hybrid solution with GraphHopper in the back end and GraphHopperJS on the client. So this opens up new possibilities!
There were lots of problems.
Another, not yet really solved, problem is the file-access: how would you load the graph only partially into memory? In Java I can just use memory mapping if there is only a few RAM available. But is there memory mapping in the browser from JS? (Unanswered question on stackoverflow for over a week now). Currently Alexey stores the data as JSON in the html file, but this is too inefficient and wastes too much memory. Hopefully we can find a better solution – maybe IndexedDB could be part of this solution.
Why is this only the first step towards an offline Navigation?
For offline navigation you will need geocoding which turns address strings into coordinates and also offline maps:
- Offline maps is not that hard because you could use data from GraphHopper itself to print the map for the current nearby area, although this will be inefficient for larger areas it will be sufficient for most navigation applications. There are already some powerful libraries for in-browser rendering available – see here.
Warning: this will load the routing data for Greater London ~14MB and can take a while!
If you zoom a bit in and out to cache the tiles, you can disconnect from the Internet and calculate offline routes anywhere! This should also work for mobile phones, of course calculating will be ‘slightly’ slower as Alex reported from 10x slower and even worse: on my old phone every browser I tried even crashed. Another minor bug is when you click outside of the routing area the app will stop working.
- git clone TeaVM
- mvn clean package
- git clone modified GraphHopper
- mvn clean package -DskipTests=true
- unzip target/graphhopper-teavm-0.3-SNAPSHOT-teavm.zip
- mv graphhopper-teavm-0.3-SNAPSHOT graphhopper-teavm
- Create a gh-directory.js via the GraphhopperJsonGenerator class and specify “<your-osm-file> gh-directory.js” as command line arguments. TODO: Uncomment the query part as this requires to have moscow area.
- cp gh-directory.js graphhopper-teavm
- firefox index.html (don’t enable firebug as this slows down everything!)
- I’ll try to integrate the changes Alexey did into GraphHopper for the next release.
- Finally a fully navigation experience with geocoding and offline maps based on this work would be interesting.
A huge thanks to Alexey for making this possible – don’t forget to look into TeaVM !