Welcome to MSDN Blogs Sign in | Join | Help

Virtual Earth in SharePoint

I recently was working on a very cool requirement where customer wanted to implement virtual earth pins view in a SharePoint web part.

On working for a long time using javascripts and XSL I was finally able to crack the solution.

So, here are some instructions that will hopefully get you up and running quickly.

Assuming that you have a list with Title and Description fields that includes 2 additional fields called "Lat" and "Long", create a web part page in SharePoint Designer and add a Data View of the list containing the locations.

Add the following script and html to the page above the data view web part:

   1: <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"> </script> 
   2: <script type="text/javascript"> 
   3: var map = null; 
   4: // Loads the Virtual Earth map control 
   5: function GetMap() 
   6: { 
   7: map = new VEMap('myMap'); 
   8: map.LoadMap(new VELatLong(0,0), 1,'r' ,false); 
   9: AddPins(); 
  10: } 
  11: // Places a pushpin on the map using the parameters given, iconurl is ignored 
  12: function AddPin(lat, lon, iconurl, title, desc) 
  13: { 
  14: var shape = 
  15: new VEShape(VEShapeType.Pushpin, 
  16: new VELatLong(lat,lon)); 
  17: shape.SetTitle(title); 
  18: shape.SetDescription(desc); 
  19: map.AddShape(shape); 
  20: } 
  21: // Programmatically adds func as a handler for the onload event 
  22: // This method has been used by many developers, but the code is 
  23: // via the ViaVirtualEarth Wiki 
  24: // http://www.viavirtualearth.com/Wiki/Load+VE+control+without+body+onload.ashx. 
  25: function addLoadEvent(func) 
  26: { 
  27: var oldonload = window.onload; 
  28: if (typeof window.onload != 'function') 
  29: { window.onload = func; } 
  30: else 
  31: { window.onload = function() 
  32: { oldonload(); func(); } 
  33: } 
  34: } 
  35: addLoadEvent(GetMap); 
  36: </script> 
  37: <div id='myMap' style="width:800px; height:600px;"></div>

 

Add the following XSL template section to the Data View web part 

   1: <xsl:template name="AddMapPins"> 
   2: <xsl:param name="Rows"/> 
   3: <xsl:text disable-output-escaping="yes"><![CDATA[ 
   4: <script type="text/javascript"> 
   5: function AddPins() 
   6: { 
   7: ]]></xsl:text> 
   8: <xsl:for-each select="$Rows"> 
   9: <xsl:if test="not(normalize-space(@Lat) = '' and normalize-space(@Long) = '')"> 
  10: AddPin(<xsl:value-of select="@Lat" />, 
  11: <xsl:value-of select="@Long" />, 
  12: null, 
  13: "<xsl:value-of select="@Title" />", 
  14: "<xsl:value-of select="@Description"/>"); 
  15: </xsl:if> 
  16: </xsl:for-each> 
  17: <xsl:text disable-output-escaping="yes"><![CDATA[ 
  18: } 
  19: </script> 
  20: ]]></xsl:text> 
  21: </xsl:template>

 

Find the following code in the Data View

    <xsl:template name="dvt_1"> <xsl:variable name="dvt_StyleName">Table</xsl:variable>     <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

And insert the following immediately after

<xsl:call-template name="AddMapPins"><xsl:with-param name="Rows" select="$Rows"/> </xsl:call-template>

 

And Viola you are all set to see virtual earth in sharePoint.

Published Tuesday, May 26, 2009 12:47 AM by varunmalhotra

Comments

Monday, May 25, 2009 3:09 PM by Virtual Earth in SharePoint | Microsoft Share Point

# Virtual Earth in SharePoint | Microsoft Share Point

PingBack from http://microsoft-sharepoint.simplynetdev.com/virtual-earth-in-sharepoint/

Anonymous comments are disabled
 
Page view tracker