New features for Windows 10-Introduction to Bing Maps 3D map Development (i)

The main content of this article is about how to create a Windows 3D Map app based on Windows Universal app that covers new Windows 10 features including Bing Maps control, Compiled data bindings (x:bind), S Plitview and Hamburger.

The sample source code in this article has been shared on GitHub (Https://github.com/gaoxuesong/navigado).

Get the Bing Maps key

using Bing Maps in the Universal Windows APP requires a map verification key from the Bing Maps Developer Center and adds it to your app.

To create a new key:

• log in in the browser Bing Maps Developer Center (https://www.bingmapsportal.com)is recommended to log in to your Microsoft account. First login Select the account you want to associate with your Bing Maps account. If you want to use your own Microsoft account, click Yes. Otherwise, click Sign in with a different account.
• Create a Bing Maps account. Enter account name, contact name, company name, e-mail address, and phone number. After you accept the terms of Use, click Create.
• Under the My Account menu, click Create or View key.
• Click the link that you used to create the Xinmi key.
• Create a new key. Complete the Create key table, and then click Create.
  • Application Name: This information is for your reference only and distinguishes it from other keys .
  • application URL (optional): This information is for your reference only .
  • Key Type: select Basic or Enterprise.
  • Application Type: Select the Universal app for use in your Universal Windows app .

Copy the created key to the secure bit and we'll add it to the Universal Windows App in the next steps.

Create a map app based on the Universal Windows appCreate a new project in Visual Studio 2015

Open Visual Studio 2015 (currently the latest version of Visual Studio RC) and select File > New Project.

Expand Installed > Templates , select Windows Universal > Blank App (Windows Universal)as shown in.

Set the name of the project to enter the name of the app in name, in this case, "Navigado". Navigado is the meaning of Esperanto navigation.

Set the directory where the project is saved , that is, the directory where the project is saved in the location.

Click OK to create a new Windows Universal App.

adding map controls and binding keys

In XAML pages or code,Mapcontrol requires namespace declarations for Windows.UI.Xaml.Controls.Maps namespaces .

in this case, you will manually Mapcontrol Add to MainPage.xaml the page and manually add a namespace declaration at the top of the page:

Xmlns:maps= "Using:Windows.UI.Xaml.Controls.Maps"

to be in your using mapcontrol and map Services (Windows.Services.Maps) in the Universal Windows App, The map verification key is required. Add the key to the map control and the map service object, if applicable.

to verify Mapcontrol , use this key to set the Mapservicetoken The value of the property. You can set this property in your code, or you can set it in XAML markup.

In this example, Compiled data bindings (x:bind) is used to bind the keys of Bing Maps to the Mapcontrol in a XAML file, as shown in the following code:

File:MainPage.xaml

<maps:mapcontrol

X:name= "Mymapcontrol"

Mapservicetoken= "{X:bind bingmapstoken, mode=oneway}"

loaded= "mapcontrolloaded"/>

Set the value of Bingmapstoke in the MainPage class in MainPage.xaml.cs, and the value of Bingmapstoken is the key to the Bing maps obtained in the first step. The code is as follows:

File:MainPage.xaml.cs

Private String Bingmapstoken = "Bingmapstoken by Bing Maps Dev Center";

Show map and set map Center

Manually add the namespace declaration at the top of the MainPage.xmal.cs code file.

Using Windows.UI.Xaml.Controls.Maps;

Using Windows.Devices.Geolocation;

Add the following code to the Mapcontrolloaded method of the Mapcontrol class to display the 3D map and set the center of the map:

File:MainPage.xaml.cs

Public basicgeoposition seattlelocation = new Basicgeoposition ()

{

Geopoint for Seattle

Latitude = 47.604,

Longitude =-122.329

};

Public basicgeoposition spaceneedleposition = new Basicgeoposition ()

{

Geopoint for Seattle

Latitude = 47.6204,

Longitude =-122.3491

};

Private async void Mapcontrolloaded (object sender, RoutedEventArgs e)

{

Mymapcontrol.center = new Geopoint (seattlelocation);

Mymapcontrol.zoomlevel = 12;

if (mymapcontrol.is3dsupported)

{

This.myMapControl.Style = mapstyle.aerial3dwithroads;

Geopoint spaceneedlepoint = new Geopoint (seattlelocation);

Mapscene Spaceneedlescene = Mapscene.createfromlocationandradius (Spaceneedlepoint,

*/* Show this many meters around */

135,/* Looking at it-the South east*/

*/* degrees pitch */);

Await Mymapcontrol.trysetsceneasync (spaceneedlescene);

}

Else

{

String status = "3D views is not supported on this device.";

This.myMapControl.Style = mapstyle.aerial;

}

}

You can use Mapcontrol's Is3dsupported method to determine whether the device supports 3D map display, code

This.myMapControl.Style = mapstyle.aerial3dwithroads;

The switch of the map to 3D mode is realized. Call the Mapcontrol.trysetsceneasync method to toggle the map scene.

It uses the Basicgeoposition class to instantiate two demo sites, Seattlelocation and Spaceneedleposition.

Show Pushpins on the map,image and geo-spatial shapes

You can add Pushpins, images, and shapes to the mapelements collection, in Mapcontrol Displays the Pushpins or images in the collection.

• Display images (for example, Pushpins) and text (optional) by using the Mapicon class. Use the image property to set the custom image .
• Define and display Mappolygon or mappolyline.

tip in XAML markup, you cannot bind to a mapelements collection declaratively .

The following is not the Title property to specify any value of the Mapicon The default image.

The following example shows the Seattle Maps and adds a custom image and caption Mapiconto indicate the location of Space Needle . You can have more logic in your application to add pushpins when needed, such as set in the Onnavigatedto method. In this example, a Pushpin is added to the Mapcontrolloaded method in the MainPage.xmal.cs code file.

File:MainPage.xaml.cs

Mapicon Seattlemapicon = new Mapicon ();

Seattlemapicon.location = new Geopoint (seattlelocation);

Seattlemapicon.normalizedanchorpoint = new Point (0.5, 1.0);

Seattlemapicon.title = "Parking here";

Seattlemapicon.image = Randomaccessstreamreference.createfromuri (New Uri ("Ms-appx:///assets/mappin.png"));

MYMAPCONTROL.MAPELEMENTS.ADD (Seattlemapicon);

SplitViewand theHamburger

Typical features of the Windows 10 app design are SplitView and Hamburger, which of course do not miss this new feature.

Add the following code to the MainPage.xaml:

<splitview x:name= "Splitter" ispaneopen= "False" displaymode= "Compactinline" >

<SplitView.Pane>

<Grid>

<Grid.RowDefinitions>

<rowdefinition height= "/>"

<rowdefinition height= "*"/>

<rowdefinition height= "Auto"/>

</Grid.RowDefinitions>

<listview x:name= "Navlinkslist" grid.row= "1" margin= "0,12,0,0" selectionmode= "None" verticalalignment= "Stretch"

Isitemclickenabled= "True" itemclick= "Navlinkslist_itemclick"

Itemssource= "{x:bind navlinks}" itemtemplate= "{StaticResource navlinkitemtemplate}"/>

<stackpanel grid.row= "2" orientation= "horizontal" margin= "14,24,0,24" >

<symbolicon symbol= "Setting"/>

<textblock text= "Settings" margin= "24,0,0,0" verticalalignment= "Center"/>

</StackPanel>

</Grid>

</SplitView.Pane>

</SplitView>

<fonticon horizontalalignment= "left"

Margin= "14,40,0,0"

Verticalalignment= "Top"

X:name= "Hamburger"

fontfamily= "Segoe MDL2 Assets"

Glyph= "& #xE700;"

Foreground= "Green"

pointerpressed= "Button_Click"/>

Add code in MainPage.xaml to set the ItemTemplate of the ListView:

<Page.Resources>

<datatemplate x:key= "Navlinkitemtemplate" x:datatype= "Local:navlink" >

<stackpanel orientation= "Horizontal" margin= "2,0,0,0" >

<symbolicon symbol= "{x:bind Symbol}"/>

<textblock text= "{x:bind Label}" margin= "24,0,0,0" verticalalignment= "Center"/>

</StackPanel>

</DataTemplate>

</Page.Resources>

The ItemsSource of the ListView is bound in x:bind manner, and the bound data source is set in MainPage.xaml.cs:

Private observablecollection<navlink> _navlinks = new Observablecollection<navlink> ()

{

New NavLink () {Label = "Map", Symbol = Windows.UI.Xaml.Controls.Symbol.Map},

New NavLink () {Label = "mapdrive", Symbol = Windows.UI.Xaml.Controls.Symbol.MapDrive},

New NavLink () {Label = "Mappin", Symbol = Windows.UI.Xaml.Controls.Symbol.MapPin},

New NavLink () {Label = "Camera", Symbol = Windows.UI.Xaml.Controls.Symbol.Camera},

};

Public observablecollection<navlink> Navlinks

{

get {return _navlinks;}

}

Our ItemClick event in the ListView responds to the user's interaction. Implement the Navlinkslist_itemclick method in MainPage.xaml.cs, by judging the lable of item in the ListView, we can execute different business logic by determining which item the user clicked. In this example, we add a lable map display mode with the response of "map", with the following code:

private void Navlinkslist_itemclick (object sender, Itemclickeventargs e)

{

String label = (E.clickeditem as NavLink). Label;

Switch (label)

{

Case "Map":

if (mymapcontrol.is3dsupported)

{

if (This.myMapControl.Style = = mapstyle.aerial3dwithroads)

{

This.myMapControl.Style = Mapstyle.road;

}

Else

{

This.myMapControl.Style = mapstyle.aerial3dwithroads;

}

Mapicon Seattlemapicon = new Mapicon ();

Seattlemapicon.location = new Geopoint (seattlelocation);

Seattlemapicon.normalizedanchorpoint = new Point (0.5, 1.0);

Seattlemapicon.title = "Parking here";

Seattlemapicon.image = Randomaccessstreamreference.createfromuri (New Uri ("Ms-appx:///assets/mappin.png"));

MYMAPCONTROL.MAPELEMENTS.ADD (Seattlemapicon);

}

Break

Default

Break

}

}

In the previous code we set the X:name property of the Fonticon to hamburger, and now MainPage.xaml.cs adds pointerpressed event response Button_Click that implements Windows 10 The hamburger.

private void Button_Click (object sender, RoutedEventArgs e)

{

Splitter.ispaneopen = (Splitter.ispaneopen = = True)? False:true;

statusborder.visibility = visibility.collapsed;

}

The code works as follows:

If your device supports multi-touch gestures, rotate the map for a cool effect. The text "Parking here" can be clearly seen on the Pushpin after rotation.

Click Hamburger's "Map" button to toggle the map display mode, as shown in.

Activate the device's developer mode

When you use Visual Studio 2015 to develop a Windows 10 app, you'll see a prompt reminding you to activate developer mode.

So how do I activate the developer model?

If your Windows 10 has been upgraded to Pro insider Preview Evaluation Copy. Build 10130 or more, or you read this article when Windows 10 is released, then select Update & Security > for developersSettings c2>, select Developer mode to activate the developer model.

Windows Ten Phones

Select Update & Securityin Settings and select for developers .

Windows Ten Desktop

Use GPEdit to enable your device

• Open a CMD prompt with administrator privileges.
• Run gpedit.msc.
• Go to Local computer Policy > Computer Configuration > Administrative Templates > Windows components > APP Package Deployment
• Edit the policies to enable the following:
  • Allow all trusted apps to install (Enables your device for sideloading apps)
  • allows development of Windows Store apps and installing them from an integrated development environment (IDE) (Enables your device for development from Visual Studio)
• Reboot your machine.

Use Regedit to enable your device

1. Open a CMD prompt with administrator privileges.
2. Run regedit.
3. Set the value of this DWORD to 1: hklm\software\microsoft\windows\currentversion\appmodelunlock\ Allowalltrustedapps
4. Set the value of this DWORD to 1: hklm\software\microsoft\windows\currentversion\appmodelunlock\ Allowdevelopmentwithoutdevlicense

Use PowerShell to enable your device

1. Run Windows PowerShell with administrator privileges.
2. Run the following command: PS c:\windows\system32> reg ADD "hkey_local_machine\software\microsoft\windows\ Currentversion\appmodelunlock "/t reg_dword/f/V" allowdevelopmentwithoutdevlicense "/d" 1 "
3. Run This command too: PS c:\windows\system32> reg ADD "hkey_local_machine\software\microsoft\windows\ Currentversion\appmodelunlock "/t reg_dword/f/V" Allowalltrustedapps "/d" 1 "

Cedar

Microsoft MVP--Windows Platform development,

Hortonworks Certified Apache Hadoop 2.0 Developer

New features for Windows 10-Introduction to Bing Maps 3D map Development (i)