Using Virtual Earth in SharePoint (Part 1 of 2)

Over the past few weeks Daniel Colarossi and I have been working together on developing a series of Web Parts using Virtual Earth.  This article describes two ways in which you can use Virtual Earth from within SharePoint.  I will shortly be adding to these with a couple of additional ways we have used Virtual Earth.

Content Editor Web Part

The simplest way to insert a Virtual Earth map into your SharePoint page is to use the out of the box Content Editor Web Part.  All you need to do is simply add a Content Editor Web Part and past the following code into the Source Editor.  The code below will display a map centered on Melbourne Australia and also places a push pin (with my photo) on top of the Melbourne Town Hall (-37.81585174911994 Latitude and 144.965714083252 Longitude).

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script> <script type="text/javascript">
  var map = null;   function GetMap()
  {
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(-37.81585274911994, 144.9657154083252), 10,'r' ,false);
    AddPin(-37.81585274911994, 144.9657154083252, 'CodeJedi.NET', '<strong>Name:</strong> William Cornwill.<br><strong>Blog:</strong> <a target ="_new" href="http://www.codejedi.net">http://www.codejedi.net/</a><br><br><a target ="_new" href="http://www.codejedi.net"><img src="http://members.optusnet.com.au/cornwill73/siteimages/William.jpg" /></a>');
  }   function AddPin(lat, lon, iconurl, title, desc)
  {
    var shape = new VEShape(VEShapeType.Pushpin,new VELatLong(lat,lon));
    shape.SetTitle(title);
    shape.SetDescription(desc);
    map.AddShape(shape);
  }   function addLoadEvent(func)
  {
    if(typeof window.onload != 'function')
    {
      window.onload = func;
    }
    else
    {
      window.onload = function()
        {
          func();
        }
    }
  }   addLoadEvent(GetMap);
</script>
<div id='myMap' style="position:relative; width:640px; height:480px;"></div>

Basic Virtual Earth Web Part

As you might agree providing a user with some JavaScript and telling them to paste it into a Content Editor Web Part isn’t really that user friendly.  So Daniel and I have wrapped this basic functionality into a WebPart.  The Basic Virtual Earth Web Part allows a user to provide Latitude and Longitude coordinates or enter an address, a zoom level, a pin title and pin description.  The result is a user friendly and easily adjusted Virtual Earth map in a SharePoint page.

You can download the code for the Basic Virtual Earth Web Part from the samples section of this blog.

Next time

In the next article I will be posting another two ways in which we have used Virtual Earth in SharePoint, including obtaining pin points from a SharePoint list of Lat/Longs (with an additional surprise) and also a Web Part that shows a map with pin points for all your contacts in Outlook.

These are just a couple of ways in which you could use mapping within SharePoint, there are countless other ways and I hope that this has gotten you as excited as I am about using Virtual Earth in SharePoint.

MOSSIG site updated

Today I finally got around to updating the content on the MOSSIG website. It is now a lot more functional and I think it looks a little better. The MOSSIG team are currently working on a more snazzy MOSS site and I will keep you all posted when that goes live. But in the meantime, enjoy the new site content.

I have to give a special thank you to Daniel Colarossi for giving some tutorial on embedding Virtual Earth in a Content Editor Web Part – pretty funky!