Closed mohanve7 closed 3 weeks ago
Hi, Step-by-Step Breakdown to Draw Traffic Lines (MapPolyline) on the Map Based on Traffic Levels
sections
, and each section contains a list of spans
. A span includes the traffic jam factor trafficSpeed.jamFactor
.geometry. vertices
).MapPolylineSolidRepresentation
.addMapPolylines
.Here’s a simplified example to illustrate how this code looks:
import 'package:here_sdk/routing.dart' as here;
MapPolyline? _createPolylineV1({required List<GeoCoordinates> polylineCoordinates, double? factor}) {
return MapPolyline.withRepresentation(
GeoPolyline(polylineCoordinates),
MapPolylineSolidRepresentation(
MapMeasureDependentRenderSize.withSingleSize(RenderSizeUnit.pixels, 5.0),
getTrafficColor(factor),
LineCap.round,
),
);
}
Color getTrafficColor(double? factor) {
if (factor == null) return Colors.transparent;
if (factor < 2.0) return Colors.green;
if (factor < 4.0) return Colors.yellow;
return Colors.red;
}
void _showTraffic(here.Route route) {
final List<MapPolyline> newPolylines = <MapPolyline>[];
for (final here.Section section in route.sections) {
for (final here.Span span in section.spans) {
final double? currentJamFactor = span.trafficSpeed.jamFactor;
if (currentJamFactor != null) {
final MapPolyline? polyline = _createPolylineV1(
polylineCoordinates: span.geometry.vertices,
factor: currentJamFactor,
);
if (polyline != null) {
newPolylines.add(polyline);
}
}
}
}
mapController?.mapScene.addMapPolylines(newPolylines);
}
Please adapt this sample code accordingly.
Hi, Step-by-Step Breakdown to Draw Traffic Lines (MapPolyline) on the Map Based on Traffic Levels
- Each route is composed of multiple
sections
, and each section contains a list ofspans
. A span includes the traffic jam factortrafficSpeed.jamFactor
.- We need to draw a MapPolyline for each span using its GeoPolyline (
geometry. vertices
).- The colour of the polyline should be determined based on the jamFactor and our specific requirements, using
MapPolylineSolidRepresentation
.- Finally, all created polylines should be added to the map scene using
addMapPolylines
.Here’s a simplified example to illustrate how this code looks:
import 'package:here_sdk/routing.dart' as here; MapPolyline? _createPolylineV1({required List<GeoCoordinates> polylineCoordinates, double? factor}) { return MapPolyline.withRepresentation( GeoPolyline(polylineCoordinates), MapPolylineSolidRepresentation( MapMeasureDependentRenderSize.withSingleSize(RenderSizeUnit.pixels, 5.0), getTrafficColor(factor), LineCap.round, ), ); } Color getTrafficColor(double? factor) { if (factor == null) return Colors.transparent; if (factor < 2.0) return Colors.green; if (factor < 4.0) return Colors.yellow; return Colors.red; } void _showTraffic(here.Route route) { final List<MapPolyline> newPolylines = <MapPolyline>[]; for (final here.Section section in route.sections) { for (final here.Span span in section.spans) { final double? currentJamFactor = span.trafficSpeed.jamFactor; if (currentJamFactor != null) { final MapPolyline? polyline = _createPolylineV1( polylineCoordinates: span.geometry.vertices, factor: currentJamFactor, ); if (polyline != null) { newPolylines.add(polyline); } } } } mapController?.mapScene.addMapPolylines(newPolylines); }
Please adapt this sample code accordingly.
Thank you for the reply, how to erase traffic lines as user passes through it.
how to draw traffic lines on route progress, please help we how to identify the start and end positions to draw traffic lines
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:here_sdk/routing.dart' as Routing; import 'controller/map_controller.dart';
import '../../theme/ui_style.dart';
/// A widget that displays the progress on the route as a progress bar. class RouteProgress extends StatelessWidget { /// Length of the route. final int routeLengthInMeters;
/// Remaining distance of the route. final int remainingDistanceInMeters;
/// Constructs a widget. RouteProgress({ Key? key, required this.routeLengthInMeters, required this.remainingDistanceInMeters, }) : super(key: key);
@override Widget build(BuildContext context) { return CustomPaint( size: Size.infinite, painter: _RoutePainter( routeLengthInMeters: routeLengthInMeters, remainingDistanceInMeters: remainingDistanceInMeters, travelledColor: Theme.of(context).colorScheme.onSecondary, remainingColor: Theme.of(context).colorScheme.secondary, currentColor: UIStyle.currentPositionColor, ), ); } }
class _RoutePainter extends CustomPainter { static const double _kLineWidth = 5; static const double _kPositionSize = 10;
final int routeLengthInMeters; final int remainingDistanceInMeters; final Color travelledColor; final Color remainingColor; final Color currentColor;
_RoutePainter({ required this.routeLengthInMeters, required this.remainingDistanceInMeters, required this.travelledColor, required this.remainingColor, required this.currentColor, });
final MapController mapController = Get.find();
@override void paint(Canvas canvas, Size size) { Paint paint = Paint(); double currentPosition = (routeLengthInMeters - remainingDistanceInMeters) / routeLengthInMeters (size.width - _kLineWidth 4) + _kLineWidth * 2;
}
@override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } }