How to create hybrith route like (Pedestrian and Car)? - flutter

Question

I have a route that includes vehicle and pedestrian mode together. When HERE is creating this, I want to show the pedestrian parts with dashed lines or different color for users to understand.
I parsed routes sections for sectionTransportMode like that
_routeCalculator.calculatePedestrianRoute(waypoints, (HERE.RoutingError? routingError, List<HERE.Route>? routeList) async {
if (routingError == null) {
HERE.Route _calculatedRoute = routeList!.first;
_calculatedRoute.sections.forEach((element) {
print('TransportMode: ' + element.sectionTransportMode.toString());
});
_showRouteOnMap(_calculatedRoute);
_startNavigationOnRoute(isSimulated, _calculatedRoute);
} else {
final error = routingError.toString();
_showDialog('Error', 'Error while calculating a pedestrian route: $error');
}
});
But how can i do that after this code snippet.

Answer 1

A MapPolyline consists of three elements:
A list of two or more geographic coordinates that define where to place the polyline on the map.
A GeoPolyline that contains this list of coordinates.
Style parameters such as DashPattern or LineCap to define how to visualize the polyline.
https://developer.here.com/documentation/android-sdk-navigate/4.8.3.0/dev_guide/topics/map-items.html#add-map-polylines
When calling the showRouteOnMap, you can create the MapPolyline with dashed lines as shown below in the example.
Here is an example:
private void showRouteOnMap(Route route) {
// Show route as polyline.
GeoPolyline routeGeoPolyline;
try {
routeGeoPolyline = new GeoPolyline(route.getPolyline());
} catch (InstantiationErrorException e) {
// It should never happen that a route polyline contains less than two vertices.
return;
}
float widthInPixels = 20;
//Blue Color
//Color lineColor = Color.valueOf(0, 0f, 0f, 139f);
MapPolyline routeMapPolyline = new MapPolyline(routeGeoPolyline,
widthInPixels,
Color.valueOf(0, 0.56f, 0.54f, 0.63f)); // RGBA
//Setting polyline to DashPattern
routeMapPolyline.setDashPattern(new DashPattern(10));
// routeMapPolyline.setDashFillColor(lineColor);
mapView.getMapScene().addMapPolyline(routeMapPolyline);
mapPolylines.add(routeMapPolyline);
// Draw a circle to indicate starting point and destination.
addCircleMapMarker(startGeoCoordinates, R.drawable.green_dot);
addCircleMapMarker(destinationGeoCoordinates, R.drawable.green_dot);
// Log maneuver instructions per route section.
List<Section> sections = route.getSections();
for (Section section : sections) {
logManeuverInstructions(section);
}
}
Please refer to this example available in git:
https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/flutter/routing_hybrid_app