Windows Apps: Adding Polygons and Polylines to Bing Maps Windows Store App

Article
1/17/2024

Introduction

This article discusses how to draw complex polygons and polyline on Bing Maps in Windows Store Application. Many of you guys might think that It would be an rocket science but literally it doesn't.

Objective

To know the difference between polygons and polyline.
To know the need and usage of polygons and polyline.
To draw complex polygons on certain area of map.
To draw polyline between any two points.

Description

Polygons are different shapes like square, circle, ellipse, triangle or any custom shape while polyline is only a straight line between two specific points. Youy can also form polygon through polyline by drawing multiple polylines end to end but if you want a complex or custom shape don't go for it because it can be easily done using polygon.

Implemention

Prerequisites

Before starting let me explain the things which you need to have with you.

1- Visual Studio 2012 or later. (2013 Recommended)
2- Bing Map SDK for Windows 8 or Windows 8.1

If you don't have download it from given link below

Bing Map Key (Credential Key)

To access Bing Map you need to create a Bing Map Credential Key. If you already have its good but if you don't have then click the given link below, login to Bing portal with your Microsoft, Hotmail or Outlook account and generate credential key by putting some information they required.

**Note: Don't tell your credential key to anybody as it is important to keep it private. **

If you have all above mentioned things you are easily able to implement Bing Maps in your windows store application.

Implementation

Now lets move toward implementing.

Bing Map SDK installer

Run the Bing Map SDK installer by doing double click on it. It will take couple of seconds to install.

Visual studio

After installation restart your visual studio if it is already running otherwise run visual studio 2013.

New project

Create new windows store (Blank App) Project and name it.

In Solution Explorer right click to reference and add

"Bing Maps for C#, C++ or Visual Basic"
"Microsoft Visual C++ 2013 Runtime Package for windows"

References as shown in picture below:

http://3.bp.blogspot.com/-lY3hGVzfDfc/U42sJwxLj9I/AAAAAAAAAFY/P_jAQ5UMtdo/s1600/1.PNG

After adding you will see a yellow warning sign on both references in solution explorer as shown in picture below:

http://1.bp.blogspot.com/-3EOXRH8koms/U42sJ5I7loI/AAAAAAAAAFU/OIaXXo6Ksi0/s1600/2.PNG

Don't worry it is just due to addition of Visual C++ Runtime reference because some reference only allows to debug or build solution only for one architecture, either it is ARM, x86 or x64.

So to eliminate this warning change platform from "AnyCPU" to "x86" from Build Configuration Manager and see references after closing it as shown in picture below.

http://3.bp.blogspot.com/-BLYtH6C4PPY/U42v4ukmUZI/AAAAAAAAAFs/zTaw_Ck3QKg/s1600/3.PNG

So we have added references successfully.

MainPage

Now open MainPage.xaml and add Map Control from toolbox and name it **"map" **or "myMap".

http://1.bp.blogspot.com/-N7dga9sHPVU/U425t4kku7I/AAAAAAAAAGA/RDjD4-4Dbxw/s1600/4.PNG

**Note: The controls in Bing Map SDK will be automatically added in toolbox. So you can use them directly as explained. **

New buttons

Now the next step is to add two new buttons. One for adding polyline and second for adding complex polygon. So add two buttons and name them**polylinebutton **and **polygonbutton **and create their click event handlers.

Your MainPage.xaml will look like this:

http://1.bp.blogspot.com/-gqYnSnZ7OWs/U9l9RY2dAdI/AAAAAAAAAKw/DiL1de3y8Sg/s1600/1.PNG

Now open MainPage.xaml.cs from solution explorer and see, after creating both buttons click event your **MainPage.xaml.cs **will look like this:

http://4.bp.blogspot.com/-lyOc5cdep3k/U9l9S4CXM3I/AAAAAAAAAK4/y9ToT3WqFr4/s1600/2.PNG

Maps Credential key

Now create string property to set and get Maps Credential key paste the code given below before constructor in you MainPage class inMainPage.xaml.cs

public string  MapKey { get; set; }
Now set  the Bing Maps Credential Key, paste the code given below inMainPage class constructor in MainPage.xaml.cs
// Replace your Bing Maps credential key
MapKey = "<Your-Bing-Maps-Credential-key>"
myMap.Credentials = MapKey; 
// Assigning map key to Bing Maps Control

Polyline

Its time to draw polyline between two location points. so first we have two different location points.

Create and Initialize the Object of LocationCollection class and add different locations in it statically and add two or three different location points in it.

Paste the code below in **constructor **to store different location points for polyline

LocationCollection PolylineLocationPoints = new  LocationCollection( );

Paste the code below in constructor

// Adding different point locations to draw polyline on map

PolylineLocationPoints.Add(new Location(40.798682, -73.968946));
PolylineLocationPoints.Add(new Location(40.797253, -73.965963));
PolylineLocationPoints.Add(new Location(40.804757, -73.932297));

Now we need to do the following to add polyline in maps.

Create and Initialize object of Map Polyline class to create polyline and set its properties like width, color and location points.

Create and Initialize the object of Map Shape Layer class to add all shapes (polygons,polylines) which you want to add on maps to it.

Add Map Shape Layer to maps as its shape layer.

Set the view of Map and zoom to location where shape is added.

Add some code written below in polyline button click event to draw polyline after clicking the button. Paste the code given below in it.

MapPolyline line = new  MapPolyline(); // Initializing Polyline Object
line.Color = Colors.Orange; // Setting its color to Orange
// Assigning Location Points Collection
line.Locations = PolylineLocationPoints; 
line.Width = 5; // Assigning width of polyline. 
// Initializing object of Map Shape Layer to add different shapes (polygons, polylines) on map.
MapShapeLayer layer = new  MapShapeLayer(); 
layer.Shapes.Add(line); // Adding Line to Map Shape Layer.
// Adding Map Shape Layer holding all shapes in Map 
myMap.ShapeLayers.Add(layer); 
// Setting Map View to the location points where we draw polyline.
myMap.SetView(new Location(40.800744, -73.952842),myMap.MaxZoomLevel);

Now your code in **MainPage.xaml.cs **will look like this

http://1.bp.blogspot.com/-_h7gbrKYJd8/U9mPUIRJJpI/AAAAAAAAALI/smuJX9UrYKw/s1600/3.PNG1

17- No1w clean the solution and build it from build menu and run it on local machine. After application launching application click the Add Polyline button and see that you map will move toward the points where you have added the polyline. Location points are represented as point** A,B and C** in screenshot below.

http://1.bp.blogspot.com/-NuZyJyzTiRI/U9mVAMy2DDI/AAAAAAAAALY/Db62-jmf2pY/s1600/4.PNG

Now add some more code to draw polygons on the map, most of the code is similar to the above code.

Again create and initialize new object of location collection class for polygon and add some location points in it as we did above.

Add the code below before **constructor **of the MainPage.xaml.cs class.

LocationCollection PolygonLocationPoints = new  LocationCollection( );

Add the code below within in the constructor

// Adding two different location points for polygon
 
PolygonLocationPoints.Add(new Location(40.808785, -73.936352));
PolygonLocationPoints.Add(new Location(40.804270, -73.937404));

Now same as above add some code in Add Polygon button Click Event to add polygon on maps.

Create and Initialize the object of Map Polygon class to create polygon and set its properties like visibility, Fill Color and Location Points.