Frontend: Getting started
For details on the API refer to REST APIs. Before being able to use the frontend the backend must be started first, see Backend: Getting started.
After configuring the frontend it can be used easily. The details are described in the following.
For setting up the frontend the config.js file acts as entry point.
It contains various global variables which must be configured properly. This includes the URL to the routing, name search and nearest search REST API, i.e. the backend. This could look like
var routeRequestServer = 'http://localhost:2845/route';
var nameSearchRequestServer = 'http://localhost:2846/namesearch';
var nearestSearchRequestServer = 'http://localhost:2847/nearestsearch';For displaying results on a map the frontend uses Leaflet with map-data provided by Mapbox. If desired a different map-data provider can be used (see Leaflet#TileLayer). For Mapbox an API access-token is needed. This may look like:
var mapboxToken = 'pk.eyJ1IjoiemFidXphIiwiYSI6ImNqZzZ1bDhrajlkbjAzMHBvcHhmY3l1cHEifQ.XsLjaSUMP9wVdeHc3SP32g';
var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';The default area where the map is zoomed into is defined by the following variables and can be adjusted if desired:
var mapMaxZoom = 20;
var mapDefaultLat = 49.23299;
var mapDefaultLong = 6.97633;
var mapDefaultZoom = 6;The variable matchLimit controls how many name matches are requested and shown in a dropdown-box when entering node names:
var matchLimit = 5;Usage is simple and straightforward. Open the index.html file in a browser. On the left the side it provides a panel for entering route requests. The map with the computed routes are displayed on the right.
If the backend is not ready or can not be reached at the configured URL a popup will indicate a communication error.
Otherwise it's as simple as entering the source and destination together with a departure date and time. Then select at least one transportation mode and hit the Plan route button. The results are shown on the map and automatically zoomed into. A response may look like:
The frontend also supports that source and destination are set by right clicking the map.