How can I display directional arrows along a calculated route in HERE Mobile SDK 4.x?

Symptoms
--------

Customers may encounter one or more of the following:

A route is successfully calculated and displayed, but the direction of travel is not visually obvious.
The application needs directional indicators along a route geometry.
Developers want to render arrows instead of, or in addition to, a standard route polyline.
A navigation or route preview screen requires visual guidance showing the travel direction.
Developers are unsure how to use MapArrow with route geometry in HERE Mobile SDK 4.x.

Answer
------

In HERE Mobile SDK 4.x, route direction can be visualised by creating MapArrow objects from the route geometry and adding them to the map scene. After calculating a route, iterate through each route section and span, convert the span geometry to a GeoPolyline, create a MapArrow, and add it to the map using mapView.mapScene.addMapArrow().

Root Cause
----------

Route calculation returns route geometry but does not automatically display directional arrows. Directional rendering must be explicitly implemented by the application using MapArrow and route span geometry.

Solution
--------

### Step 1: Calculate a Route

Calculate a route using the Routing Engine and retrieve the resulting Route object. Once the route is available, pass it to a custom rendering function.

// Calculates an EV car route based on random start / destination coordinates near viewport center.

func addRoute() { startGeoCoordinates = createRandomGeoCoordinatesInViewport() destinationGeoCoordinates = createRandomGeoCoordinatesInViewport() routingEngine.calculateRoute(with: [Waypoint(coordinates: startGeoCoordinates!), Waypoint(coordinates: destinationGeoCoordinates!)], evCarOptions: getEVCarOptions()) { (routingError, routes) in if let error = routingError { self.showDialog(title: "Error while calculating a route:", message: "(error)") return } // When routingError is nil, routes is guaranteed to contain at least one route. let route = routes!.first self.showRouteOnMap_arrows(route: route!) } }

### Step 2: Create Map Arrows from Route Geometry

Iterate through the route sections and spans. For each span:

1. Create a GeoPolyline.
2. Create a MapArrow.
3. Configure arrow width and colour.
4. Add the arrow to the map scene.

private func showRouteOnMap_arrows(route: Route) { clearMap() for section in route.sections { for span in section.spans { let geoPolyline = try! GeoPolyline(vertices: span.polyline) let routeMapArrow = MapArrow(geometry: geoPolyline, widthInPixels: 10, color: UIColor(red: 0.73, green: 0.17, blue: 0.59, alpha: 0.63)) mapView.mapScene.addMapArrow(routeMapArrow) } } }

Impact
------

Implementing route arrows can improve:

Route readability.
Visual indication of travel direction.
User experience during route preview and navigation scenarios.
Route distinction when multiple routes are shown simultaneously.

Expected vs Unexpected Behavior
-------------------------------

### Expected Behavior

Route calculation returns route geometry.
MapArrow objects render directional arrows along the supplied geometry.
Arrows become visible after being added to the map scene.

### Unexpected Behavior

Expecting directional arrows to appear automatically after route calculation.
Creating MapArrow objects but not adding them to the map scene.
* Attempting to render arrows using invalid or empty route geometry.

Recommended Actions
-------------------

1. Calculate the route using the Routing Engine.
2. Extract geometry from route sections and spans.
3. Create MapArrow objects using the route geometry.
4. Add each MapArrow to the map scene.
5. Adjust colour, transparency, and width to match application requirements.

Keywords / Tags
---------------

HERE Mobile SDK, Mobile SDK 4.x, MapArrow, route arrows, route direction, route rendering, route visualisation, Routing Engine, GeoPolyline, map scene, iOS SDK, Swift, navigation UI, route geometry, custom map rendering