RouteManager

RouteManager

new RouteManager(map, optionsopt)

RouteManager allows you to visualize route between two places on the map which is represented as collection of line strings. Route is created from one GeoJSON source into two layers. One with id "zoomedInRouteLine" and one "zoomedOutRouteLine". Layer zoomedInRouteLine is visible when current zoom level is greater than SteerpathMap.inspectionZoomLevel. This layer will be filtered based on active buildings layerIndex value. When current zoom level is smaller than SteerpathMap.inspectionZoomLevel zoomedOutRouteLine layer becomes visible. This will represent the whole route in the map regardless of layer index or if the route goes into other building.
Example
let originLocation = {
	"lng": 24.812223985514862,
	"lat": 60.220986100252475,
	"layerIndex": 0
}
let destinationLocation = {
	"lng": 24.812478562281996,
	"lat": 60.221020271615004,
	"layerIndex": 2
}

function addRouting(){
	let routeManagerOptions = {
		"zoomedInRouteLineColor": "#1cb3a5",
		"zoomedOutRouteLineColor": "#df1d80",
		"altRouteLineColor": "#6b476a",
		"lineWidth": 3,
		"showRoutePreview": false,
		"handleUserInteractions": true,
		"animationSpeed": 0.001,
		"slowSpeedOnTurns": true,
		"numberOfAlternatives": 2
	}
	routeManager = new steerpath.RouteManager(mapboxMap, routeManagerOptions);
	//get the route data from server. SDK will store it and return the directions calculator
	steerpath.getRouteData(routeUrl, onReceiveRouteData)
}

//callback function when route data is fetched.
//Returns an instance of direction calculator.
function onReceiveRouteData(response) {
	if(response){
		directions = response
	}
}

function setRoute() {
	directions.setOrigin(originLocation.lat, originLocation.lng, originLocation.layerIndex);
	directions.addDestination(destinationLocation.lat, destinationLocation.lng, destinationLocation.layerIndex);
	let routes = directions.solveAlternatives();
	if(routes){
		routeManager.setRoute(routes[0])
		// routeManager.initRouteManager(routes);

	}
}
Properties:
Name Type Description
hasRoute boolean Boolean value to indicate whether there's a route or not.
altRoutes array List of alternative routes. Each in it's own feature collection.
instructions object List of instructions along the route. f.e "Walk 4m and turn left".
lineWidth number Width of the route lines
listOfPopUps array Route Pop up objects represented in a list.
numberOfAlternatives number Number to indicate how many alternative routes should be visible
pickedRoute object FeatureCollection of the selected route. It is determined in setRoute() method
popUpOptions object Optional options whether or not pop ups should have close button or should they close when map is clicked.
zoomedInRouteLineColor string Hex Color value of the zoomed in route line.
zoomedOutRouteLineColor string Hex Color value of the zoomed out route line.
route object GeoJSON Feature collection of the route's coordinates and properties
routeAnimationManager object Instance of routeAnimationManager which handles the animation along the route. Check out RouteAnimationManager for the complete description of the methods and properties.
Parameters
Name Type Attributes Default Description
map Map Represents the map on your page.
options object <optional>
this.options.zoomedInRouteLineColor string <optional>
"#1cb3a5" Set the color of the zoomed in route line.
this.options.zoomedOutRouteLineColor string <optional>
"#d7b127" Set the color of the zoomed out route line
options.altRouteLineColor string <optional>
"#476b68" Set the color of the alternative route lines.
options.showRoutePreview boolean <optional>
true Creates preview animation of the route when route is set in setRoute();
options.lineWidth number <optional>
5 Set route line width.
options.handleUserInteractions boolean <optional>
true Animation option which sets whether or not user interactions should stop the animation of routeAnimationManager.
options.animationSpeed number <optional>
0.01 Animation option which sets the speed of the animation.
options.slowSpeedOnTurns boolean <optional>
true Set whether or not to slow down speed during turns. By default turn speed is 0.3 of animation speed. You can set the turnAnimationSpeed from routeAnimationManager instace.
options.numberOfAlternatives number <optional>
0 Number of alternative routes to be visualized in the map. Default is set to zero.

Methods

(static) getInstructions()

Returns the list of instructions of the route. Each element in the list has two pro§perties: id and instruction. Id matches with the RouteManager.route properties id. Instruction object holds information to be shown to the user. For example "Walk 13m and turn right"
Example
routeManager.getInstructions()

(static) getRoute()

Returns the picked route as GeoJSON feature collection
Example
routeManager.getRoute()

(static) initRouteManager()

After giving directionsApi origin and destination and solveAll() has returned routes you can make the routes visible by calling initRouteManager() method. Based on the the setting of numberOfAlternatives value alternative routes will be drawn. Each route will have a popup from which it can be selected to be picked route. If numberOfAlternatives is set to 0 initRouteManager will call setRoute-method with default route
Example
routeManager.initRouteManager(routes)

(static) removeRoute()

Removes layers and sources of route and bluedot from the map. After removing them RouteManager's property hasRoute will turn into false and event steerpathRouteRemoved will be fired.
Example
routeManager.removeRoute()

(static) resetAnimation()

Will reset the time and distance related values and after reset the animation will start from the beginning once startAnimation() gets called.
Example
routeManager.routeAnimationManager.resetAnimation()

(static) setRoute()

Sets the route to be pickedRoute and remove's alternatives from the map also add bluedot to the origin of the route. Note that this will remove old route and bluedot from the map. If you want to remove routes yourself from the map use removeRoute() method. After route is added RouteManager's property hasRoute will turn to true and event steerpathRouteAdded will be fired.
Example
routeManager.setRoute(route);
Returns
RouteManager instance