Bing Maps in my Sharepoint? It is more likely than you think..
January 2, 2011 2 Comments
Actually, there are many mapping solutions for SharePoint, both commercial and open source.
The thing I didn’t understand was why it was hard to find a ‘Hello World‘ example for a Javacript based map?
Microsoft provide an interactive SDK that allows you to quickly get maps up and running in HTML.
To do the same in SharePoint 2010, I will use this SDK as the basis of an example WebPart built in Visual Studio 2010.
The main problem of integration these examples is that the Map has to be created after the page has finished loading, hence the definition of the <Body onload=”"> tag.
It is really hard to add this onload attribute to SharePoint since we do not have ready access to it. In addition, by hacking away at the underlying template you might break something else.
The solution is to not use onload, but to use JQuery’s $(document).ready function, that will also make a call back once the document has finished loading.
It does mean some extra configuration of your code however.. follow the steps below:
Step 1: Create a SharePoint WebPart project in Visual 2010
Step 2: Add a SharePoint Mapped Folder to your project
Step 3: In the following dialog, add the Templates->Layouts folder
This will add a corresponding folder to your WebPart solution.
Step 4: Create a unique folder under Layouts, and add javascript files.
Create a unique folder here (I have used the name ‘FlightTracks’).
In this folder, add the JQuery javascript file. Download from here. (Hint: Use the development version for easy debugging)
Then create a new empty javascript file such as ‘FlightTracks.js’.
Step 5: Add content to the custom Javascript file
function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
}
$(document).ready(function () {
GetMap();
});
Step 6: Add code to the UserControl’s CodeBehind file
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl bingMapsScript = new HtmlGenericControl("script");
bingMapsScript.Attributes["type"] = "text/javascript";
bingMapsScript.Attributes["src"] = "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2";
HtmlGenericControl jQueryScript = new HtmlGenericControl("script");
jQueryScript.Attributes["type"] = "text/javascript";
jQueryScript.Attributes["src"] = ResolveClientUrl("../../_LAYOUTS/FlightTracks/jquery-1.4.4.js");
HtmlGenericControl flightTracksScript = new HtmlGenericControl("script");
flightTracksScript.Attributes["type"] = "text/javascript";
flightTracksScript.Attributes["src"] = ResolveClientUrl("../../_LAYOUTS/FlightTracks/FlightTracks.js");
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes["type"] = "text/javascript";
script.InnerText = "var map = null; ";
Page.Header.Controls.Add(bingMapsScript);
Page.Header.Controls.Add(jQueryScript);
Page.Header.Controls.Add(script);
Page.Header.Controls.Add(flightTracksScript);
}
Please note that if you havn’t named your Javascript folder as ‘FlightTracks’, then you will need to adjust here.
Step 7: Define the HTML entry of the map
Bing Maps will take over a defined DIV to turn into a map. Add this line to your custom control (ascx) file:
<div id='myMap' style="position:relative; width:600px; height:400px;"></div>
Pingback: Use Bing Maps as a Dashboard Visualization in SharePoint 2010 « Andrew Whitten's .NET Blog
Just what I was looking for. Thx!