3D Rendering of MapControl in Windows 10 Universal App Development

Map Controls in Windows 10 Universal Apps are much more easier and makes app developers life simpler. Normally maps are displays either in satellite image or normal map image but we haven’t seen the map in a 3D View. In this post we will learn how to create a map control to display the map normally and then set the map control to renders the map in 3D. This Map control with 3D Render helps the user to view the location at any angle and at any direction. lets create the sample application in Universal Windows app.

Download the Source code from GitHub : https://github.com/ArunSuryaPrakash/MapControl

Lets begin by creating an empty windows universal app and then add the following namespace in the Xaml.

xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"

Now add the MapControl in the Xaml.

<maps:MapControl/>

That’s it. Now your application has a Map Control and it displays the Map in the page.

Let’s see how to add the 3D view to the MapControl.

Provide a name for the control as we can access it in our code behind file. When the map control loads check whether the MapControl supports the 3D view or not. Using the Is3DSupported property.

if(mapControl.Is3DSupported){ //set 3D view if supported.}

If the 3D view is supported, then set the Style of the Map to the Aerial3DWithRoads.

mapControl.Style = MapStyle.Aerial3DWithRoads;

Set the MapScene to be viewed in the Map. MapScene class has a static method called  CreateFromLocationAndRadius. This method takes four parameter which helps in making the 3D experience more great. lets see about these parameters in detail.

1. location  : which is used to provide the center of the map.

2. radiusInMeters : the radius which will be viewed in the Map.

3. headingInDegrees :  the direction in which the location is viewed.

4. pitchInDegrees : the angle at which the location is viewed.

Set the values to the CreateFromLocationAndRadius method.

 BasicGeoposition position = new BasicGeoposition();
 position.Latitude = 40.7204;
 position.Longitude = -74.0091;

 Geopoint location = new Geopoint(position);

 MapScene mapScene = MapScene.CreateFromLocationAndRadius(location, 500, 150, 70);

finally call the method TrySetSceneAsync which set the specified map scene in the map Control.

await mapControl.TrySetSceneAsync(mapScene);

That’s it, the Map control displays the specified geolocation in Map with the 3D Ariel View along with the Road.

The Same App runs in the Windows 10 Emulator displaying the MapControl  in 3D view.

Hope this post might have helped in creating the 3D view in MapControl in windows 10.