I have always been fascinated with maps, GPS’es and other navigational stuff. So why don’t try to mix this with SharePoint!! In a series of posts I’m going to build a SharePoint 2013 app using Bing Maps API, demonstrating simple map loading, adding entities, location searches and getting route directions. I will also demonstrate some interactions between lists in the SharePoint Host Web and the app itself, residing in the app web.
Create a Bing Map Account
If you want to use Bing Maps in your applications, whether it is a Windows 8 app, phone app, or standard web application, you need a Bing Maps account key. This can be obtained at the Bing Maps Portal here. NB, you need a Windows Live ID to register for the account. When you have completed the registration, login to the Bing Maps Portal site and click Create or view keys in the left navigation menu. Fill out the Create Key form and click Submit. For this exercise I’m going to use the following entries:
Application Name: Bing Map Demo
Application URL: <url to your SharePoint 2013 or Office 365 dev site>
Key Type: Trial ( valid for 90 days)
Application Type: Private Website.
Copy and save the generated key from the list below the form. You will need it later on.
Microsoft provide several Bing Maps API options for developers, depending on the target platform and whether you want a static or interactive map. The differences and suggested use cases are outlined here. For this demo I’m going to use the Bing Maps Ajax Control, Version 7.
Create the project
With the account key in place, it’s time to start with some coding:
Open VS 2012 and create a new App for SharePoint 2013 project . Give it an appropriate name, eg. BingMapAjaxDemo and click OK. In the New App for SharePoint dialog, enter and validate your SharePoint site where you will install the app. Select SharePoint-hosted in the drop down menu and click Finish .
Microsoft recommend using utf-8 encoding on the Bing Maps host page, so to support that we need to add a couple of lines in the <head> section.
Open default.aspx from Solution Explorer and locate the <asp:Content> tag named PlaceHolderAdditionalPageHead. Enter the following 2 lines at the top of the section, above the first <script> tag:
<meta http-equiv=”content-type” content=”text/html; charset=”utf-8″ />
<script charset=”utf-8″ type=”text/javascript” src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0 />
The first line adds the charset to the http header while the second one loads the Bing Maps API using the same charset.
Remove the default contents inside the PlaceHolderMain tag, and add the following code which will create a div area to hold the map:
<body onload=”LoadMap();”>
<div id=”mapDiv” class=”map”></div>
</body>
Next, add this class style description into the the App.css file:
.map {
position: absolute;
top: 20;
left: 10;
width: 600px;
height: 600px;
border: #555555 2px solid;
}
Finally, add the following map loading function into the App.js file. This method will be invoked by the main page onload event:
function LoadMap() {
var map = Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: "<your Bing account key here>"});
}
Deploy and Run the App
Right-click the solution file and select Deploy. When completed, open your SharePoint site and click on the BingMapsDemo link in the “Apps for testing…” list to start the app. When the page is opened it will look like this:
Out of the box you have lots of functionality readily available. You can zoom the map, change map type and pan the map in all directions. Now let’s say you want to load the map at a specific location using a custom zoom level, and you want the Road map type to be the default map. Just edit the LoadMap() function to make it look as follows:
function LoadMap() {
var loc = new Microsoft.Maps.Location(36.1,-115.1); // your favorite conference city
var mapType = Microsoft.Maps.MapTypeId.road;
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
credentials: "<your account code>",
center: location,
mapTypeId: mapType,
zoom: 7
});
}
When you redeploy and relaunch the app, the map will now look like this:
Up to this point we have concentrated on adding functionality to just load the map when the app is launched, but there are lots of more cool stuff to do, like searching and getting route directions, and we haven’t done any direct interaction with the host web using SharePoint API’s yet. That will be the topic of Part 2 of this demo.
NB! If you try to debug the app directly from VS by pressing F5, you will probably get a javascript error message saying “Microsoft is undefined”. Cool message, but I haven’t yet been able to find the exact cause. If you press continue you will still be able to launch the app without errors. So if anyone has any clue why this is happening , please don’t hesitate to post a comment!
