Virtual Earth Map Control on SharePoint

James Tsai .Net SharePoint Blog Virtual Earth Map Control

Well, I finally have some free time to play with it. I know, I am two years late on this topic. But I still wanted to see how Microsoft Virtual Earth Map Control can work together with SharePoint, so I created a control that does following tasks

1. Read saved locations from SharePoint List

Read saved locations information from SharePoint list. SharePoint list stores location items with Title, Address and Description fields.

James Tsai .Net SharePoint Blog Address Book SharePoint List

Render all the locations stored in SharePoint list on Virtual Earth Map Control. Virtual earth Map Control is embedded in Content editor web part - there is no need to create a custom web part.

Display custom created panel control (VEMap Control) on Virtual Earth Map Control. It shows the pushpins, location Id and Titles - user click on the pushpin Id in panel control to see the corresponded location on map

James Tsai .Net SharePoint Blog Virtual Earth Map Control View Mode

2. Write to SharePoint List

Display Pushpin Information box when user click on pushpins – information box contains the custom created HTML with Text boxes and Edit/Save/Cancel action links.

Push changed value back to SharePoint list via SharePoint list web service (/_vti_bin/lists.asmx)

James Tsai .Net SharePoint Blog Virtual Earth Map Control Edit Mode

How to do it

Download JavaScript Files

I am not going to explain the code I wrote, it is not hard for you to figure out what each function does. Source code can be downloaded from the link below.

VirtualEarthMapControl_SharePointExample.zip (5.92 kb)

It contains five .js files and one .css style file.





VirtualMapSPC.js  (SharePoint web service connection code)

PLEASE NOTE: These are uncommented code with hard-coded values. DO NOT use them directly. I provide this so that you can see how this can be done, it doesn’t necessary show the implementation of best practice. 

The functions in above .js files are pretty self-explained by their name.

Create a SharePonit List

Create a SharePoint list with following name and fields.

James Tsai .Net SharePoint Blog Address Book SharePoint List

Please keep in mind that SharePoint list and field names in VirutalMapSPC.js were hard-coded. You can change them to map to the list on your SharePoint Site

Add a Content Editor Web Part to page

On the web part page, add a Content Editor Web Part and insert the following html in Web Part Properties > Source Editor. Make sure the source links of JavaScript and CSS files are match to their saved location.

James Tsai .Net SharePoint Blog Content Editor Web Part

Since Virtual Map Control has to be called during OnLoad event, I use the _spBodyOnLoadFunctionNames.push() to do this.

<script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapSPC.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapPanel.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapInfoBox.js"></script>   
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapPushPin.js"></script>   
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapMain.js"></script>   

<script type="text/javascript">

var headID = document.getElementsByTagName("head")[0];        
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '/Style Library/temp/virtualmap.css';
cssNode.media = 'screen';

<div id='myMap' style="position:relative; width:600px; height:400px;"> </div>  

James Tsai .Net SharePoint Blog Content Editor Web Part Source Editor

Save changes, and a Virtual Earth Map Control should be loaded and displayed in Content Editor Web Part with all the data loaded from SharePoint list.

Let me know if you have any questions, I hope you find this helpful.

blog comments powered by Disqus