Multicolor lines

Question

I would like to draw the user's track on the map, and use a color scale to represent a third axis of data. For instance, in the below, this is a breadcrumb track where the color could represent speed along the ground.

Others have asked about something similar, but so far there's no canonical documentation that I have found for multi-color polylines or polygons. I have looked through the SDK documentation and it seems that since LineSymbol is only inherited by SimpleLineSymbol this multi-color geometry might be currently unsupported.

I suspect that this might be doable by using a ListModel of some sort, e.g. GraphicListModel or GraphicsOverlayListModel, but I worry about the impact on system resources. (Typically, a large array of data structures is orders of magnitude less performant than a single structure containing a large data array.)

JamesBallard1 · Answer

Hey @KennSebesta ,

Another option would be a ClassBreaksRenderer. Here's an example where we use that.

https://github.com/Esri/arcgis-runtime-samples-qt/tree/0d40b7f2793f220af8355374115a1036db582c39/ArcGISRuntimeSDKQt_QMLSamples/Layers/ChangeSublayerRenderer

You could probably write a loop to create all the class breaks (all 100 or however many you need), along with the symbol and color you want for each.

For that many distinct values, ClassBreaksRenderer is likely more suitable and easier to work with.

One thing to keep in mind is that with this or the previous solution, you will need to break apart your breadcrumbs polyline into multiple sections with rather than treating it is a single feature/graphic. You'd need to weigh that with your needs.

KennSebesta · Answer

I haven't had a chance to try this yet, but I see it has some potential as a workaround. The immediate limitations I see are 1) needing ~100 bins/buckets-- not just 3-- in order to have a seamless color transition and 2) the need to re-bin across the entire dataset in case the color end-points are changed. But in a pinch, it should work.

Ideally, something like HeatmapRenderer would exist for lines. It would be far simpler to be able to update color endpoints and have the renderer take care of the work.

I will try to schedule some time to implement the workaround. There's enough complexity that I'll want to write a decent API so that the end programmer interacts with it like s/he would see HeatmapRenderer.

JamesBallard1 · Answer

Hi @KennSebesta ,

There is a way to achieve this with a few caveats. First, there is no multicolor symbolization in Runtime right now. That being said, I think this solution would be suitable.

You can have multiple GraphicsOverlays in each GraphicsOverlayListModel. So for example, you could add 3 GraphicsOverlays; one for each speed and each with their own renderer. With this approach overlay 1 could be slow (green), overlay 2 could be moderate (blue) and overlay 3 could be fast (red). Then, when processing each new segment of the breadcrumbs polyline, you could determine which overlay to add it to.

This may require some extra data structures. For example, you'd need to keep track of each segment rather than using a PolylineBuilder to keep adding onto with each new track.

Let us know if that works.