23 August 2015

Windows 10 maps part 4 - color scheme and options

Intro
This part of the mapping series is the shortest from a code perspective - it actually only handles six properties of the Map control, but these give you access to some pretty powerful features of the map. The properties in question are:

  • imageBusinessLandmarksVisible
  • LandmarksVisible
  • PedestrianFeaturesVisible
  • TrafficFlowVisible
  • TransitFeaturesVisible
  • ColorScheme (the map 'theme')

To see this features in action, you will need to use the controls displayed to the right, and I will take you to the center of the (in)famous capital city of the Netherlands - Amsterdam. I have zoomed to this location manuallyimage

So here we have a base map, looking on the center of Amsterdam, from a point above the actual center to the North. This shows a view of the Central Station and the river IJ, where at the moment of this writing Sail Amsterdam is taking place.

image

This maps shows when LandmarksVisible is set to true. Basically every building is displayed in 3D outline, as well as some well-known landmarks, most notably the Central Station.

image

If BusinessLandmarksVisible is set to true, all kinds of restaurants and other businesses light up. This can be handy when making an app targeted toward tourists. A major differentiator towards competing map providers is that these business features can be turned on and off at will - and are not flung into your face by default. Display is determined by whether or not it makes sense to your app, not whether or not it's useful for the commercial purposes of the map provider.

image

A very Dutch map shows up when PedestrianFeaturesVisible is set to true. All kinds of little ways and roads that are only sketchily displayed in 'normal' mode - or not at all - show up now. The map now shows roads and alleyways that are not accessible to vehicles, but can be used perfectly when strolling through the city. Very neat.

image

When TrafficFlowVisible is set to true, live traffic data is displayed on top of the map, which shows it's pretty busy now at the area in front of the Amsterdam Central Station. Which is kind of like saying it's pretty darn cold in Antarctica, but it proves the point. Notice also color intensity gives an indication of actual traffic density - red is very dense, yellow a little less dense.

image

Another very Dutch maps shows up when TransitFeaturesVisible is set to true. Now all kinds of stops for trains, streetcars, the subway and other forms of public transport show up. Once again very handy for apps targeted toward tourists or other 'getting around' style apps.

image

Now when you set ColorScheme to MapColorScheme.Dark you get the following "Amsterdam by night" view

image

And of course you can combine all these options,  this is Amsterdam with all the options turned on, now looking to the south (the Central station is now seen from the back, and on the lower right corner of the map).

The actual code involved in all these great images is actually very, very little:

private void ToggleOption(object sender, RoutedEventArgs e)
{
  MyMap.BusinessLandmarksVisible = ToggleBusiness.IsChecked.Value;
  MyMap.LandmarksVisible = ToggleLandMark.IsChecked.Value;
  MyMap.PedestrianFeaturesVisible = TogglePedestrian.IsChecked.Value;
  MyMap.TrafficFlowVisible = ToggleTraffic.IsChecked.Value;
  MyMap.TransitFeaturesVisible = ToggleTransit.IsChecked.Value;
}

private void ThemeToggle_Toggled(object sender, RoutedEventArgs e)
{
  MyMap.ColorScheme = ThemeToggle.IsOn ? MapColorScheme.Light : MapColorScheme.Dark;
}

which goes to show you have a very powerful and visually compelling map toolbox at your disposal that is very easy to use. And of course, if also works on a phone, 3D landmarks and all

image

with zero code change, of course, for this is a Universal Windows App. Things like this make a very compelling case for tourist guiding apps indeed.

A tip, finally - if you want an app making use of this features, you might want to include a suggestion for you users to check if they have downloaded the map of the area they are going to to their device. Although the maps themselves - including the 3D data - are not overly large, having to download them in a busy city with potentially a lot of network congestion may lead to user experience degrading delays, which you of course want to avoid if possible.

Get the sample app to show you how things work in real life - in your own city.

No comments: