3D Rendering of MapControl in Windows 10 Universal App Development

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.

3dmaps

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.

Map-Control

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.

Map-Control2

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

Map-Control_phone

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

Arun Kumar

Arun kumar Surya Prakash, is a  Developer  Consultant. He  is a Microsoft Certified Solution  Developer  for Store App Development, and a Azure Solution Developer. His core skills is on developing Windows Store App and Cross Platform App development. You can follow him @arunnov04

2 Comments to “3D Rendering of MapControl in Windows 10 Universal App Development”

  1. Paul

    Hello Arun, thank you for your post! It’s a pity our home towns is not available in 3D but it certainly is a nice feature.

    One question that’s urgent for me: how do you get the MapControl to display content? I have tried a hints and tips (also from Joost van Schaik, see this post: http://dotnetbyexample.blogspot.nl/2015/08/windows-10-maps-part-3-querying-map.html

    Everything looks fine when running on local machine, but the MapControl on the emulator (version 10.0.10240.0) always shows a blue screen and no map content. The internet connections is fine: the edge browser has internet connection in the emulator. The MapControl complains about not having internet connection . Whether the MapControl has a servicetoken does not seem to matter. The here maps app on the emulator also does not show any content.
    Please give me some help on this, because I need the emulator to test Geofencing using the location tooling.

    More people are experiencing this problem: http://stackoverflow.com/questions/32371265/windows-phone-10-emulator-doesnt-shows-maps
    Frustrating to see that some people don’t have any problem and others do using the same versions of the tooling. Yesterday I installed the Windows 10 november update, hoping it would fix this problem. Unfortunately…

    Thanks in advance!

Comments are closed.