Directions Renderer
- Android v4
- iOS v4
- Web v4
If you are looking for documentation on Android SDK v3, please see here.
- Java
- Kotlin
When getting the resulting Route from a Directions Service, you may want to display this Route on a map. To perform this task the MPDirectionsRenderer
can be used.
This example shows how to setup a query for a route and display the result on a Google Map using the MPDirectionsRenderer
:
void getRoute() {
MPDirectionsService directionsService = new MPDirectionsService(this);
MPDirectionsRenderer directionsRenderer = new MPDirectionsRenderer(mMapControl);
MPPoint origin = new MPPoint(57.057917, 9.950361, 0.0);
MPPoint destination = new MPPoint(57.058038, 9.950509, 0.0);
directionsService.setRouteResultListener((route, error) -> {
if (route != null) {
directionsRenderer.setRoute(route);
}
});
directionsService.query(origin, destination);
}
Controlling the Visible Segments on the Directions Renderer
As previously mentioned, the route object is seperated into objects of MPRouteLeg
. Each leg is again separated into objects of MPRouteStep
.
Unless the Route only contains one Leg, the Directions Renderer does not allow the full Route to be rendered all at once. Therefore, if a Leg contains multiple Steps, they will all be shown on the map at the same time, but once the Leg is changed, the previous Steps are not visible anymore.
A specific segment of the route can be rendered by setting the legIndex
on the MPDirectionsRenderer
.
void setLegIndex(int position) {
mpDirectionsRenderer.selectLegIndex(position);
}
The length of the legs
array from getLegs
on the MPRoute
object determines the possible values of routeLegIndex
(0 ..< length
).
Reacting to Label Tapping
Directions Labels refer to the labels shown at the end of the rendered route segment path, that may provide contextual information, or show instructions for a required user action at that point. The labels are created as simple Marker
instances that are rendered as markers on the map. A user is able to long press these, and an event will be forwarded to the listener OnLegSelectedListener
in MPDirectionsRenderer
. This can be used to change the Leg to the next Leg in line on the Route.
void getRoute() {
MPDirectionsService directionsService = new MPDirectionsService(this);
MPDirectionsRenderer directionsRenderer = new MPDirectionsRenderer(mMapControl);
MPPoint origin = new MPPoint(57.057917, 9.950361, 0.0);
MPPoint destination = new MPPoint(57.058038, 9.950509, 0.0);
directionsService.setRouteResultListener((route, error) -> {
if (route != null) {
directionsRenderer.setRoute(route);
}
});
directionsRenderer.setOnLegSelectedListener(i -> {
directionsRenderer.selectLegIndex(i);
});
directionsService.query(origin, destination);
}
MPDirectionsRenderer
also has convenience methods to change the active leg to previous and next Leg.
void nextLeg() {
mpDirectionsRenderer.nextLeg();
}
void previousLeg() {
mpDirectionsRenderer.previousLeg();
}
Show Content of Nearby Locations
It is possible to show contextual information on the end points of the rendered path of a route segment by configuring the directions renderer to look for nearby Locations or POIs.
This is done by creating an appropriate MPContextualInfoSettings
object and passing that to the Directions Renderer. If it is not set or is null, no contextual information will be shown.
The MPContextualInfoSetting
can be applied on MPDirectionsRenderer
by calling useContentOfNearbyLocations(MPContextualInfoSettings)
. Like this:
//Sets the contextual info to be of locations that has the type "entries" and searches within a max distance of 30 meters from the end point of the current route segment
mpDirectionsRenderer.useContentOfNearbyLocations(new MPContextualInfoSettings.Builder()
.setTypes(Collections.singletonList("entries"))
.setMaxDistance(30.0)
.build());
The defaults of the ContextualInfoSettings
builder are maxDistance
at 5 meters and the ContextualInfoScope
as icon and name. No Types or Categories are set as default. Not applying any Types or Categories will make it search through all Locations to use as contextual information.
When getting the resulting Route from a Directions Service, you may want to display this Route on a map. To perform this task the MPDirectionsRenderer
can be used.
This example shows how to setup a query for a route and display the result on a Google Map using the MPDirectionsRenderer
:
fun getRoute() {
val directionsService = MPDirectionsService(this)
val directionsRenderer = MPDirectionsRenderer(mMapControl)
val origin = MPPoint(57.057917, 9.950361, 0.0)
val destination = MPPoint(57.058038, 9.950509, 0.0)
directionsService.setRouteResultListener { route, error ->
route?.let { mpRoute ->
directionsRenderer.setRoute(mpRoute)
}
}
directionsService.query(origin, destination)
}
Controlling the Visible Segments on the Directions Renderer
As previously mentioned, the route object is seperated into objects of MPRouteLeg
. Each Leg is again separated into objects of MPRouteStep
.
Unless the Route only contains one Leg, the Directions Renderer does not allow the full Route to be rendered all at once. Therefore, if a Leg contains multiple Steps, they will all be shown on the map at the same time, but once the Leg is changed, the previous Steps are not visible anymore.
A specific segment of the route can be rendered by setting the legIndex
on the MPDirectionsRenderer
fun setRouteLegIndex(position: Int) {
mpDirectionsRenderer?.selectLegIndex(position)
}
The length of the legs
array from getLegs
on the MPRoute
object determines the possible values of routeLegIndex
(0 ..< length
).
Reacting to Label Tapping
Directions Labels refer to the labels shown at the end of the rendered route segment path, that may provide contextual information, or show instructions for a required user action at that point. The labels are created as simple Marker
instances that are rendered as markers on the map. A user is able to long press these, and an event will be forwarded to the listener OnLegSelectedListener
in MPDirectionsRenderer
. This can be used to change the Leg to the next Leg in line on the Route.
fun getRoute() {
val directionsService = MPDirectionsService(this)
val directionsRenderer = MPDirectionsRenderer(mMapControl)
val origin = MPPoint(57.057917, 9.950361, 0.0)
val destination = MPPoint(57.058038, 9.950509, 0.0)
directionsService.setRouteResultListener { route, error ->
route?.let { mpRoute ->
directionsRenderer.setRoute(mpRoute)
}
}
directionsRenderer.setOnLegSelectedListener {
mpDirectionsRenderer?.selectLegIndex(it)
}
directionsService.query(origin, destination)
}
MPDirectionsRenderer
also has convenience methods to change the active leg to previous and next Leg.
fun nextLeg() {
mpDirectionsRenderer?.nextLeg()
}
fun previousLeg() {
mpDirectionsRenderer?.previousLeg()
}
Show Content of Nearby Locations
It is possible to show contextual information on the end points of the rendered path of a route segment by configuring the directions renderer to look for nearby Locations or POIs.
This is done by creating an appropriate MPContextualInfoSettings
object and passing that to the Directions Renderer. If it is not set or is null, no contextual information will be shown.
The MPContextualInfoSetting
can be applied on MPDirectionsRenderer
by calling useContentOfNearbyLocations(MPContextualInfoSettings)
. Like this:
//Sets the contextual info to be of locations that has the type "entries" and searches within a max distance of 30 meters from the end point of the current route segment
mpDirectionsRenderer?.useContentOfNearbyLocations(MPContextualInfoSettings.Builder()
.setTypes(Collections.singletonList("entries"))
.setMaxDistance(30.0)
.build())
The defaults of the ContextualInfoSettings
builder are maxDistance
at 5 meters and the ContextualInfoScope
as icon and name. No Types or Categories are set as default. Not applying any Types or Categories will make it search through all Locations to use as contextual information.
When getting the result Route from a Directions Service, we may want to display this Route on a map. To perform this task the MPDirectionsRenderer
can be used.
To configure a mapConfig
see Getting Started
This example shows how to setup a query for a route and display the result on a Google Map using the MPDirectionsRenderer
:
Task {
try await MPMapsIndoors.shared.load(apiKey: #INSERT_API_KEY)
mapControl = MPMapsIndoors.createMapControl(mapConfig: #INSERT_YOUR_MAPCONFIG)
let origin = MPMapsIndoors.shared.locationWith(locationId: "a6be6af53db44c1e8cc7fe4f")
let destination = MPMapsIndoors.shared.locationWith(locationId: "0c44207987174561a53fb00a")
let directionsQuery = MPDirectionsQuery(origin: origin!, destination: destination!)
let directionsService = MPMapsIndoors.shared.directionsService
let route = try? await directionsService.routingWith(query: directionsQuery)
let renderer = mapControl?.newDirectionsRenderer()
renderer?.fitBounds = true
renderer?.route = route
renderer?.animate(duration: 5)
}
Controlling the Visible Segments on the Directions Renderer
As previously mentioned, the route object is seperated into objects of MPRouteLeg
and these Legs are again separated indo objects of MPRouteStep
.
Unless the Route only contains one Leg, the Directions Renderer does not allow the full Route to be rendered all at once. Therefore, if a Leg contains multiple Steps, they will all be shown on the map at the same time, but once the Leg is changed, the previous Steps are not visible anymore.
A specific segment of the route can be rendered by setting the routeLegIndex
and/or routeStepIndex
properties on the MPDirectionsRenderer
.
let renderer = mapControl?.newDirectionsRenderer()
renderer?.routeLegIndex = 5
The length of the legs
array determines the possible values of routeLegIndex
(0 ..< length
).
Reacting to Label Tapping
The Directions Labels refer to labels shown at the start and/or end of the rendered route segment (leg or step) path, that may provide contextual information or show instructions for the needed user action at that point. E.g. the end label can be retrieved with .nextRouteLegButton
. The labels are created as simple UIButton
instances that are rendered as markers on the map. As with most buttons, it is possible to add targets to these labels, so you can react to touch events.
override func viewDidAppear(_ animated: Bool) {
let renderer = MPDirectionsRenderer.init()
renderer.delegate = self
renderer.map = self.map
renderer.nextRouteLegButton?.addTarget(self, action: #selector(nextLeg), for: .touchUpInside)
renderer.previousRouteLegButton?.addTarget(self, action: #selector(previousLeg), for: .touchUpInside)
}
@objc func nextLeg() {
renderer.routeLegIndex += 1
}
@objc func previousLeg() {
renderer.routeLegIndex -= 1
}
In the above example, a target is added to nextRouteLegButton
and nextRouteLegButton
calling the method nextLeg
and previousLeg
respectively. These methods then changes the visible Route Leg.
Show Content of Nearby Locations
It is possible to show contextual information on the start or end points of the rendered path of a route segment by configuring the directions renderer to look for nearby Locations or POIs.
This is done by creating an appropriate MPDirectionsRendererContextualInfoSettings
object and passing it to the directions renderer. If the contextualInfoSettings
property is not set, no contextual information will be searched for and shown.
class MPDirectionsRendererContextualInfoSettings {
// The Types of Location that should be used when showing text and icon for a start or end marker.
// If no Types are supplied, all Types of Locations will be considered.
var types: [String]?
// The Categories of Location that should be used when showing text and icon for a start or end marker.
// If no Categories are supplied, all Categories of Locations will be considered.
var categories: [String]?
// The maximum distance in meters allowed for using text and icon from a Location. Leave blank for a default of 5 meters.
var maxDistance: Double
// Which content should be used. Default is IconAndName.
var contentScope: MPDirectionsRendererContextualInfoScope
}
Possible values for contentScope
are IconAndName
(default), IconOnly
, or NameOnly
as defined in MPDirectionsRendererContextualInfoScope
.
This is an example of how to show information about Locations of Type "Entry" within 20 meters from the route, with both an icon and the name:
let contextualSettings = DirectionsRendererContextualInfoSettings()
contextualSettings.types = ["Entry"]
contextualSettings.maxDistance = 20
myDirectionsRenderer.contextualInfoSettings = contextualSettings
When getting the result Route from a Directions Service, we may want to display this Route on a map. To perform this task the DirectionsRenderer
can be used.
This example shows how to setup a query for a route and display the result on a Google Map using the DirectionsRenderer`:
const externalDirectionsProvider = new mapsindoors.directions.GoogleMapsProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
const routeParameters = {
origin: { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }, // Oval Office, The White House
destination: { lat: 38.897579747054046, lng: -77.03658652944773, floor: 1 } // Blue Room, The White House
};
miDirectionsServiceInstance.getRoute(routeParameters).then(directionsResult => {
miDirectionsRendererInstance.setRoute(directionsResult);
});
See all available directions render options in the reference documentation.
As previously mentioned, the route object is separated into objects of Leg
and these Legs are again separated into objects of Step
.
Unless the Route only contains one Leg, the Directions Renderer does not allow the full Route to be rendered all at once. Therefore, if a Leg contains multiple Steps, they will all be shown on the map at the same time, but once the Leg is changed, the previous Steps are not visible anymore.
A specific part of the route can be rendered by setting the step index and/or Leg index using the DirectionsRenderer
.
miDirectionsRendererInstance.setStepIndex(stepIndex, legIndex)
See all available methods in the reference documentation
The length of the Legs
and Steps
arrays determines the possible values of legIndex
and stepIndex
.