[FEATURE] Add darkened intersection effect to translucent self-intersecting Polylines

[stx]

What is the bug?

In Google Maps, Leaflet and Mapbox, on both the web and in Flutter, when you draw a polyline with a low opacity it gets darker when it overlaps, like this:

This provides a very nice UX for showing more popular routes.

However, in flutter_map, when drawn at low opacity, the line never darkens, so there appears to be no way to achieve this nice UX:

What is the expected behaviour?

Polyline opacity overlaps.

How can we reproduce this issue?

Polyline(
  points: path,
  color: Colors.red.withOpacity(0.25),
);

Do you have a potential solution?

No response

Can you provide any other information?

No response

Platforms Affected

Android, iOS, Web, Windows, MacOS, Linux, Other

Severity

Minimum: Allows normal functioning

Frequency

Consistently: Always occurs at the same time and location

Requirements

• I agree to follow this project's Code of Conduct
• My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
• I am using the latest stable version of this package
• I have checked the FAQs section on the documentation website
• I have checked for similar issues which may be duplicates

[JaffaKetchup]

Hi @stx,
Can you try toggling saveLayers? You might also try several Polylines, instead of just one - that might be more effective.
The documentation for saveLayers says the reverse is true, but I may have made a mistake when writing it, so it's worth a shot. Note the performance impact this may have.

[stx]

@JaffaKetchup saveLayers has no effect. If someone travels in circles there's really no logical way to break it into multiple lines.

[ibrierley]

That's kind of correct for the 2nd example, however I would imagine your first example would be feasible changing saveLayers (assuming multiple lines), but your 2nd example not. It feels like it would be a bit strange I think for a single path to change depth of colour when overlapping itself, but maybe I'm wrong.

[stx]

The first example is actually one polyline.

flutter_map bogs down the device extremely when many polylines are drawn (think hundreds), so using multiple polylines is only an option if that's fixed. Until then we combine multiple lines into one polyline. Given that it may not be possible to support drawing so many polylines, we'd like single polyline coloring to work like other map renderers if possible.

[ibrierley]

Ok, I assume it was more than one. In which case I suspect you're out of luck unless you can split it into segments, which is feasible but a lot of work.

[JaffaKetchup]

Hey @stx, you may be interested in the discussion over at #1510 and #1513/#1519.

[JaffaKetchup]

Hi @stx,
If you're still concerned, #1519 has been merged, and it may have resolved this. You can try testing with 'master'.

---

Needs re-assessment to check whether #1519 has fixed this.

[stx]

@JaffaKetchup Thanks for following up. This has no effect and the issue remains. Master:

Code:

        Polyline(
          points: path,
          color: Theme.of(context).colorScheme.primary.withOpacity(0.25),
          strokeWidth: 5,
        );

[ibrierley]

I don't think the issue will be affected with this is if its one polyline, I don't think that will change, as I'm not sure it makes sense unless I'm misunderstanding it how it would work. I would only expect this to have any effect with multiple polylines.

[JaffaKetchup]

(This is now a feature request, as this functionality never existed AFAIK).

[JaffaKetchup]

I can't see how we can implement this at the moment. If anyone can post some code that does this (a self intersecting translucent line on a CustomPainter, outside the scope of FM), then we can consider implementing this!
The good news for now is we can easily supports hundreds of polylines, so maybe there's some kind of really difficult workaround available.