Customizing Route Rendering on Maps in Windows Store Apps

Customizing route rendering using DirectionsRenderOptions class

The DirectionsRenderOptions class must be set to the RenderOptions property of the DirectionsManager class's object. The DirectionsRenderOptions class provides options for rendering a route on the map. The process of instantiation of the DirectionsRenderOptions class is as shown below.

DirectionsRenderOptions directionsRender=new DirectionsRenderOptions();

Figure: Class diagram of DirectionsRenderOptions class.

Once we have set the properties of this object and complete all the operations using this instance of the class, we need to assign this to the RenderOptions property of the DirectionsManager class. Once it is has been set only the effort behind the rendering of the route depending on our needs will be reflected on the map output. The default values of DisplayItineraryItemHints, DisplayManeuverIcons, DisplayStepWarnings and DisplayTransitIcons are true. All these properties are of bool type.

Figure: Route Summery View for the direction search.

The DisplayItineraryItemHints property helps to decide whether or not display route hints are in the itinerary. These route hints provide additional information about the route. Let's see what happens by setting its value to false.

directionsRender.DisplayItineraryItemHints = false;

Figure: Displaying Route Summery View output by skipping the displaying of route hints for the direction search.

The DisplayManeuverIcons property helps to decide whether to display icons for each direction maneuver. The default value of it will be true. Let's see what happens by setting its value to false.

directionsRender.DisplayManeuverIcons = false;

Figure: Displaying Route Summery View output by skipping the displaying of route hints and maneuver icons for the direction search.

The preceding output clearly shows that by setting DisplayItineraryItemHints and DisplayManeuverIcons property values of the DirectionsRenderOptions class's object to false will result in skipping the display of route hints and maneuver icons within the route summery view.

The DisplayStepWarnings property helps to decide whether to display warnings for each route direction. The default value of it will be true. Let's see what happens by setting its value to false.

directionsRender.DisplayStepWarnings = false;

Figure: Displaying Route Summery View output by skipping the displaying of route hints, maneuver icons and step warnings for the direction search.

The DisplayTransitIcons property helps to decide whether to display transit icons for route direction. The default value of it will be true. Let's see what happens by setting its value to false.

directionsRender.DisplayTransitIcons = false;

Figure: Displaying Route Summery View output by skipping the displaying of route hints, maneuver icons, step warnings and transit icons for the direction search.

Figure: Route Summary View with its sub-divisions.

Rendering the polyline to represent route on the map

By definition, a series of connected lines that makes a single entity is called a polyline. Polylines represent routes in maps can be created using the DirectionsPolylineRenderOptions class. The DirectionsPolylineRenderOptions class has all the properties and methods that aid in the rendering of a polyline on the map. This polyline itself represents the route in the map.

Figure: DirectionsPolylineRenderOptions class diagram.

DirectionsRenderOptions directionsRender = new DirectionsRenderOptions();
Color color = new Color();
color.A = 255;
color.R = 255;
color.G = 0;
color.B = 0;
Brush brush=new SolidColorBrush(color);
DirectionsPolylineRenderOptions directionsPolyRender = new DirectionsPolylineRenderOptions(color,50,true);
directionsPolyRender.Visible = true;
directionsRender.ActiveRoutePolylineOptions = directionsPolyRender;
directionManager.RenderOptions = directionsRender;

As shown in the preceding code, setting the Visible property of the DirectionsPolylineRenderOptions class to true will certainly be an important factor to display the polyline on the map for highlighting and showing the route between two points/places. Here, let's display the Red polyline to represent the route between the start point and destination. The Polyline's color, width and visibility can be set to the desired values by passing the values to the parametrized constructor during the DirectionsPolylineRenderOptions class's object creation. In order to set the color of the polyline we need to pass the object of the Color class to the parametrized constructor and the first parameter. Here, the Color class helps us to describe the color in terms of Alpha, Red, Green and Blue channels.

Figure: Showing the route in the default mode before using the DirectionsPolylineRenderOptions class.

Figure: Map output after writing code to set the color of the polyline to “Red” and the width to 50. This is when the Alpha "A" value is 255.

We can also render the polyline with various colors by using the Colors class directly. This class belongs to the namespace Windows.UI. This class implements a set of predefined colors. So, we can use the required color directly by accessing the name of the color.

DirectionsPolylineRenderOptions directionsPolyRender = new DirectionsPolylineRenderOptions(Windows.UI.Colors.Red,50,true);
directionsPolyRender.Visible = true;
directionsRender.ActiveRoutePolylineOptions = directionsPolyRender;

As shown in the preceding code, Windows.UI.Colors.Red is passed as the color parameter to the DirectionsPolylineRenderOptions class object's parameterized constructor.

Figure: Map output after writing code to set the color of the polyline to “Red” and width to 50. This is when the Alpha "A" value is 100.

In the preceding figure, you can observe that the width of the polyline has increased by setting its width to "50" and the color of the polyline is “Red” that is reflected on the map. For obtaining red colored polyline we need to set A=1, R=255, G=0, B=0. Here, "R" is Red, "G" is Green and "B" is Blue that clarifies that combination of these three colors will make multiple colors. These variables of the Color class accepts values from "0" to "255". So, setting the value of "R" to 255 and the values of "G" and "B" to 0 will certainly make a “Red” color. Similarly, we can display a Green colored polyline by setting A=1, R=0, G=255 and B=0. For the Blue color, A=1, R=0, G=0 and B=255. With the comparison of the preceding two figures it is clear that changing the Ambient (A) value will certainly effect the opacity of the polyline. Therefore it is clear that the Alpha (A) channel acts as the opacity channel. Increasing the value of "A" from 0 to 255 will increases the opacity accordingly. If the value of the alpha channel is "0" then the polyline will be completely transparent. In our case it is opaque, since we have set 255 as its value. 255 is the highest value that we can assign to each of the channels. This is because each channel can store a byte since they are of Byte datatype. A byte is eight bits and it is briefly explained below.

Each of the preceding cells can be "0" or "1". If it is "1" then we can consider the value present within that cell. The preceding array is an array of eight bits that represents a byte. So, to reach the maximum value that it can contain will hold "1" in all the cells as shown below.

cells

To get the final computed result, we need to add all the two to the power of respective positional values as in the following:.

Result

From the preceding result, it is clear that 255 is the maximum value that it can hold. What happens when the value of "A" is 100? The computation will be as shown below.

Figure: Map output after writing code to set the color of the polyline to “Green” and the width to 50. This is when the Alpha "A" value is 255.

Green

Figure: Map output after writing code to set the color of the polyline to “Green” using Windows.UI.Colors.Green.

Blue

Figure: Map output after writing code to set the color of the polyline to “Blue” and the width to 50. This is when the Alpha "A" value is 255.

The WalkingPolylineOptions and DrivingPolylineOptions properties can be set with the appropriate DirectionsPolylineRenderOptions class's object. So that we can set a different color to different routes. For example, a Blue color polyline for a walking route, a Green color polyline for a driving route. We can also do this without using the WalkingPolylineOptions and DrivingPolylineOptions properties. In other words, just by applying the simple logic of setting the ActiveRoutePolylineOptions property of the DirectionsRenderOptions class's object to various DirectionsPolylineRenderOptions class's objects that helps to render various colors upon clicking the Get the direction button. “Customizing route rendering on maps in Windows Store Apps2.zip” provided with this article for download contains the complete code snippet required to get the scenario of the color changing of the polyline upon the selection of various “Route Calculations”.

//Selecting route direction calculation type and calculating based on the user input.
int selectedRouteMode = comboBoxRoute.SelectedIndex;
//Walking route colour
Color walkingPathColor = new Color();
walkingPathColor.A = 255;
walkingPathColor.R = 0;
walkingPathColor.G = 0;
walkingPathColor.B = 255;
DirectionsPolylineRenderOptions walkingDirectionsPolyRender = new DirectionsPolylineRenderOptions(walkingPathColor, 50, true);
//Driving route color
Color drivingPathColor = new Color();
drivingPathColor.A = 255;
drivingPathColor.R = 0;
drivingPathColor.G = 255;
drivingPathColor.B = 0;
DirectionsPolylineRenderOptions drivingDirectionsPolyRender = new DirectionsPolylineRenderOptions(drivingPathColor, 50, true);
DirectionsRenderOptions directionsRender = new DirectionsRenderOptions();
switch (selectedRouteMode)
{
case 1:
directionRequest.RouteMode = RouteModeOption.Driving;
directionsRender.ActiveRoutePolylineOptions = drivingDirectionsPolyRender;
break;
case 2:
directionRequest.RouteMode = RouteModeOption.Walking;
directionsRender.ActiveRoutePolylineOptions = walkingDirectionsPolyRender;
break;
case 3:
directionRequest.RouteMode = RouteModeOption.Transit;
break;
default:
MessageDialog msg = new MessageDialog("You have not selected any route direction mode");
await msg.ShowAsync();
break;
}

The preceding code block helps us to execute the preceding scenario and to get the right output.

Figure: Driving path polyline color set to Green.

Figure: Walking path polyline color set to Blue.

Changing the waypoints colors

StartWaypointColorBrush and EndWaypointColorBrush are color brush properties responsible for rendering the start and end waypoints of the route respectively. The Brush class is responsible for producing objects that can be used to paint graphical objects. All classes that inherit from the Brush class will have the ability to describe how an area can be painted. In this scenario, start and end waypoints can be painted with objects of the Brush class by setting the StartWaypointColorBrush and EndWaypointColorBrush properties.

Representing waypoints using pushpins

The start and end waypoints of the route can be represented using pushpins. This is made possible by the DirectionsPushpinRenderOptions class. This class is derived from the DependencyObject class. As the name suggests, the DirectionsPushpinRenderOptions class helps to render pushpins to represent waypoints. It has a parameterized constructor that can accept an object of the ControlTemplate class type as the single parameter. The ControlTemplate class is capable of defining the element tree. This defined element tree can used further as the control template for a control. The PushpinTemplate property of the DirectionsPushpinRenderOptions class is also of type ControlTemplate.

Class diagram of DirectionsPushpinRenderOptions class

Class diagram of DirectionsPushpinRenderOptions class

Figure: Class diagram of the DirectionsPushpinRenderOptions class.