Hi
I have a XamGeographicMap showing a world map, where I need to draw a line/path/route. My approach is using the GeographicPolylineSeries, whichs can draw a line. Do you have any other recoomendations or guides on how to draw a line/path/route?
However my challenge is to set the color on the line. I can easaly change the color for the whole line, but I need several colors.
Example of a simple route:
A .9.701870, 59.063160 to 9.701870, 59.063160 (Green)
B. 9.707219, 59.058384 to 9.707219, 59.058384 (Yellow)
C. 9.712350, 59.052418 to 9.712350, 59.052418 (Green)
D. 9.720299, 59.045586 to 9.720299, 59.045586 (Red)
D. 9.720299, 59.045586 to 9.732525, 59.042435 (Red)
My route will consist of about 300-1000 points.
The only solution I see is to add a GeographicPolyLineSeries for each time the Color change.
Pseudo code:
var style = new Style();
style.Setters.Add(new Setter(StrokeThicknessProperty, 4.0d));
foreach (var item in (lines splittet per color switch)
{
GeographicPolylineSeries lines = new GeographicPolylineSeries();
lines.ShapeMemberPath = "Points";
lines.ItemsSource = new List() { item };
lines.Outline = new SolidColorBrush(item.Color);
lines.ShapeStyle = style;
mapp.Series.Add(lines);
}
My “lines splittet by color switch” will be:
A. with 1 point in list B. with 1 point in list C. with 1 point in list D. with 2 points in list
My concern is that this approach will generate a lot of Serties to be added to the viewer, due to 1000 points randomlly switching between ~15 colors.
I cannot find any place to set the Color than on the whole series. Am I missing anything?
I hope my example make sence and you maybe can push me in the right direction.
Hi logimatic,
Your example makes total sense and the GeographicPolylineSeries will be able to do this with only 1 series. It's all about how you structure your data. What you can do is split all your points by color and then add them to a collection, one color per item.
public class RouteColor{ public Color Color { get; set; } public IEnumerable<IEnumerable<Point>> Points { get; set; }}
The series ItemsSource will be bound to a collection of RouteColor objects. Each RouteColor has a Points collection which will represent all the points for that color. The reason it's an IEnumerable<IEnumerable<Point>> type is because you may have instances where not all of your green points are connected to each other. There may be gaps between some of them. So really this Points collection is a list of connected points. For example:
var greenPoints = new List<IEnumerable<Point>>();greenPoints.Add(new List<Point> { new Point(0, 1), new Point(0, 2), new Point(0, 3) });greenPoints.Add(new List<Point> { new Point(10, 10), new Point(11, 11) });greenRoute.Points = greenPoints;
This code will make a connected path between the first 3 points. Then it will make a separate connected path with the last 2 points, but it will include both these separate paths under the green route. Once you have defined all of your points for the different colors you will need a StyleSelector in order to set the path colors. Here is a super simple one:
public class RouteStyleSelector : StyleSelector{ public override Style SelectStyle(object item, DependencyObject container) { var routeColor = item as RouteColor; var pathStyle = new Style(typeof(Path)); pathStyle.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(routeColor.Color))); return pathStyle; }}
Just set the ShapeStyleSelector property on the GeographicPolylineSeries and you're all set.
Thanks. Just what I needed.