How to show traffic lines on Route progress

[mohanve7]

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;

paint.color = travelledColor;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = _kLineWidth;

canvas.drawLine(Offset(_kLineWidth * 2, size.height / 2),
    Offset(currentPosition, size.height / 2), paint);

paint.strokeWidth = 1;

canvas.drawCircle(Offset(_kLineWidth, size.height / 2), _kLineWidth, paint);

paint.strokeWidth = _kLineWidth;
paint.color = Colors.blue;

canvas.drawLine(Offset(currentPosition, size.height / 2),
    Offset(size.width - _kLineWidth * 2, size.height / 2), paint);

paint.strokeWidth = 1;
canvas.drawCircle(
    Offset(size.width - _kLineWidth, size.height / 2), _kLineWidth, paint);

Path currentPositionShape = Path()
  ..moveTo(_kPositionSize, 0)
  ..lineTo(-_kPositionSize, -_kPositionSize)
  ..lineTo(-_kPositionSize / 2, 0)
  ..lineTo(-_kPositionSize, _kPositionSize)
  ..lineTo(_kPositionSize, 0);
Matrix4 matrix4 = Matrix4.identity();
matrix4.translate(currentPosition, size.height / 2);
currentPositionShape = currentPositionShape.transform(matrix4.storage);

paint.style = PaintingStyle.fill;
paint.color = currentColor;
canvas.drawPath(currentPositionShape, paint);
paint.style = PaintingStyle.stroke;
paint.color = Colors.white;
canvas.drawPath(currentPositionShape, paint);

}

@override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } }

[Guru-cm-here]

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 of spans. A span includes the traffic jam factor trafficSpeed.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.

[mohanve7]

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 of spans. A span includes the traffic jam factor trafficSpeed.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.