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="https://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: // https://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.