Skip to content

How to get started with the demo application

Christian Bäuerlein edited this page Feb 16, 2017 · 2 revisions

ffwdme.js comes bundled with a demo page. You can use it either online or, if you have the ffwdme.js gulp task running, you can view it on your local computer. It may be a little bit confusing in the beginning, so here is a short explanation.


ffwdme.js is a framework to build turn by turn navigation systems. Of course, most of the time the apps built with ffwdme.js will be running on mobile devices. But for development, it would be a little tedious to debug everything on the go, so we have some helpers that simulate movement in the browser of your desktop computer.

I think the best way to understand ffwdme.js is to give it a try. You can do this by opening the online demo page.

Important: Remember to use a modern browser like Chrome and to allow the site to access your geolocation.

Once the site is ready, you should see a map with a green arrow in the middle, which represents your location.

To see how ffwdme.js works, we will start the simulator on the Routing tab in the upper right:

First, click 1 to preload a fixture pair: A previously recorded geotrack that we can replay (GeoProvider) and a route that we want to drive.

Clicking 2 will start to replay a previously recorded geotrack, in this case in Germany, and will simulate the movement in your browser. The green arrow (representing your location) will start to move and rotate.

By clicking 3 you advise ffwdme.js to calculate a route from the start coordinates to the destination. It will do this using an external routing service. The route will be drawn on the map, the arrow will now move along the route.

Now you can see different information that ffwdme.js extracted from the calculated route and provides it to the user:

Congrats! You got it running!


Once it worked, I think there are several ways to proceed:

If any of this does not work for some reasons, please let me know by creating an new issue!

I hope this helps. Again, just let me know if I can be of any help.

Clone this wiki locally