Is there any way to change the order of polylines?

[aliciasteiman]

I'm working on a feature in my app where a user can select a route from multiple running routes. I'm using this package to display tappable polylines (representing each of the routes) on a map so that the user can make their selection (see code below). However, some of the polylines naturally overlap and their order (on top vs. on bottom) seems to be fixed. Is there a way to rearrange the order of the polylines so that I can always ensure the one that is tapped displays on top of all the others? Currently, I'm decreasing the stroke width of unselected routes so that the selected one is easier to see even if it's the bottom-most line but I would love to just rearrange the polylines. Thanks!

// creates a tappable polyline for each route in the list of GeneratedRoutes
// if the polyline is selected, make it blue - else make it gray
  List<TaggedPolyline> _getPolylines(List<GeneratedRoute> routes) {
    List<TaggedPolyline> polylines = [];
    for (var i = 0; i < routes.length; i++) {
      polylines.add(
        TaggedPolyline(
          tag: i.toString(),
          points: Helper.convertWaypoints(routes[i].waypoints),
          strokeWidth: _routeIdx == i ? 5.0 : 3.0,
          color: _routeIdx == i ? kEmbarcBlue : kAccentGray,
        ),
      );
      // add false for each route b/c they all start off as not saved
      _savedRoutes.add(false);
      // need a placeholder for each route, will be updated if route is actually saved
      _routeIDs.add(null);
    }
    return polylines;
  }

[HugoHeneault]

Hello @aliciasteiman

The simplest way of puting one polyline on top of the others is to add it to your list of polylines after looping through all of them.

In your code it would be something like : (untested)

  List<TaggedPolyline> _getPolylines(List<GeneratedRoute> routes) {
    List<TaggedPolyline> polylines = [];

    for (var i = 0; i < routes.length; i++) {
      // ignore the route as we will add it last
      if (i == _routeIdx) {
        continue;
      }
      polylines.add(
        TaggedPolyline(
          tag: i.toString(),
          points: Helper.convertWaypoints(routes[i].waypoints),
          strokeWidth: 3.0,
          color: kAccentGray,
        ),
      );
      // add false for each route b/c they all start off as not saved
      _savedRoutes.add(false);
      // need a placeholder for each route, will be updated if route is actually saved
      _routeIDs.add(null);
    }

   // if there is a selected route, add it at the end so it will show up on top
   if (_routeIdx != null) {
      polylines.add(
        TaggedPolyline(
          tag: i.toString(),
          points: Helper.convertWaypoints(routes[_routeIdx].waypoints),
          strokeWidth: 5.0,
          color: kEmbarcBlue,
        ),);
   }
    return polylines;
  }

You might want to refactor the polyline.add call to avoid duplicating this part.

Tell us if it works for you :-)

[HugoHeneault]

@aliciasteiman Did it work for you? Thanks 🙏

[aliciasteiman]

Yes - this looks great! Thank you!