Plotting Your Data Using Virtual Earth


Jon  Hello SharePoint Designer users,

My name is Jon Campbell – I’m a developer for the SharePoint Designer team. My main job is to work on all things data oriented in SharePoint Designer. Today I thought I would share a tip on how to take your data views to the next level by combining some custom XSL transforms on the server with JavaScript on the client. Specifically, this post will go through the steps of how to make a data view that will show a set of points stored in a data source, such as a SharePoint list, on a map using Virtual Earth.

We have an XML file that contains the data that we want to plot as pushpins on the Virtual Earth map. The data can come from any data source, but for the sake of simplicity an XML file will do the job. The most important aspect of the data is that it must have both latitude and longitude so that it can be plotted. Without a latitude and longitude we would need to use an address and geocode it to the equivalent coordinates, which is outside the scope of this post. Create an XML file called locations.xml and set the contents as follows:

<?xml version=1.0 encoding=utf-8 ?>

<Locations>

      <Location lat=47.760101 long=-122.205141 name=place 1 description=A nifty place. />

      <Location lat=47.255436 long=-122.51739 name=place 2 description=A place for fun!/>

      <Location lat=47.831876 long=-122.277658 name=place 3 description=More fun!/>

</Locations>

Next, we need to be able to show the Virtual Earth map on the page. The basic requirements for doing so are including the Virtual Earth map control, creating a div tag to show the content, and then adding a basic script to use the map control to place the map into the div tag. Create a new ASPX page and switch to code view. Put the following code inside the form tag:

<script src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5″>    </script>

    <script type=”text/javascript”>

      var map = null;


// Loads the Virtual Earth map control

      function GetMap()

      {

            map = new VEMap(‘myMap’);

            map.LoadMap(new VELatLong(47.6, -122.2), 8,‘r’ ,false);

            AddPin(47.7,-122.2,null,‘place 1’,‘A nifty place to be.’);

      }

     

// Places a pushpin on the map using the parameters given, iconurl is ignored

      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);

      }

 

// Programmatically adds func as a handler for the onload event

// This method has been used by many developers, but the code is

// via the ViaVirtualEarth Wiki

// http://www.viavirtualearth.com/Wiki/Load+VE+control+without+body+onload.ashx

      function addLoadEvent(func)

      {

            var oldonload = window.onload;

            if (typeof window.onload != ‘function’)

            { window.onload = func; }

            else

            { window.onload = function()

                  { oldonload(); func(); }

            }

      }

      addLoadEvent(GetMap);

    </script>

    <div id=’myMap’ style=”position:relative; width:400px; height:400px;”></div>

The last function, addLoadEvent(func), is used to run the map control’s code when the page is loaded without having to set the body tag’s onload event handler. This can be useful in situations where a master page is being used. If you preview the page, you should end up with a map like the one to the right.

Next you should insert a DataFormWebPart view of the locations.xml file that you created earlier. There are many methods for doing this, but the easiest way for what needs to be done is switch to design view and then drag it from the folders list and drop it onto the page. You can then switch back to code view. You should be able to find the XSL property of the DataFormWebPart that was created. Before the dvt_1 template, add the following XSLT:

<xsl:template name=AddMapPins>

    <xsl:param name=Rows/>

    <xsl:text disable-output-escaping=yes><![CDATA[

            <script type=”text/javascript”>

            function AddPins()

            {

            ]]></xsl:text>

    <xsl:for-each select=$Rows>

      <xsl:if test=not(normalize-space(@lat) = ” and normalize-space(@long) = ”)>

        AddPin(<xsl:value-of select=@lat />,

        <xsl:value-of select=@long />,

        null,

        <xsl:value-of select=@name />‘,

        <xsl:value-of select=@description/>‘);

      </xsl:if>

    </xsl:for-each>

    <xsl:text disable-output-escaping=yes><![CDATA[

            }

            </script>

            ]]></xsl:text>

</xsl:template>

That XSLT code will iterate over each of the rows in the dataset and create individual calls to AddPin() inside the AddPins() function. The AddPin() function uses the latitude and longitude from the row in the dataset as well as the name and the description attributes.

There are a couple things which need to be done in order to hook up the DataFormWebPart to the JavaScript code. The first is that the AddMapPins template won’t get called yet. To ensure that it gets called, add the following lines inside the dvt_1 template immediately after the Rows variable.

<xsl:call-template name=AddMapPins>

  <xsl:with-param name=Rows select=$Rows/>

</xsl:call-template>

Next, change the AddPin(…) call in GetMap() to be a call to AddPins(). The resulting GetMap() function should look like this:

function GetMap()

{

      map = new VEMap(‘myMap’);

      map.LoadMap(new VELatLong(47.6, -122.2), 8,‘r’ ,false);

      AddPins();

}

If everything is correct then you should be able to preview the page and end up with the results shown in the screenshot to the right. This method demonstrates how client side script can be generated based on server side data using XSLT. Though JavaScript was used in this example, it is not unreasonable to imagine using this to drive other client side technologies like SilverLight. This won’t replace custom web parts, but it definitely opens up some interesting scenarios – especially for those in hosting scenarios or with limited posting privileges.

Enjoy,
Jon

SampleMappingSource.zip


Comments (49)

  1. Wow, thanks guys for this……..thanks a lot.

  2. imorrish says:

    Working demo on wssdemo.com using a SharePoint list to hold the lat/long data

    http://www.wssdemo.com/Pages/map.aspx

    Try adding your own locations…

  3. Body: I threw together a quick demo http://www.wssdemo.com/Pages/map.aspx of the code demonstrated in

  4. gover says:

    Hey , I dont’y have a file of latitudes/logitudes but i have plenty of addresses I’d like to map. Is there an api or web service I can use to geocode addresses. Can virtual earth take addresses rather than lat/lons?

  5. Jon Campbell says:

    When it comes to geocoding, things can get a bit complex. Depending on which mapping service you use to drive your view, you may or may not have a direct method to geocode your data. When using virtual earth, there is no straightforward way to give it an address and have it spit back lat/lon combination. There is a "FindLocation" function available, but that will center the map on that location and then you can plot your point. A way around that is to use a hidden iframe or div and load a second map in the background that you use for geocoding, similar to this article: http://msdn2.microsoft.com/en-us/library/bb259691.aspx.

    Outside of that, there are a variety of other geocoders available. If you have a small number of points that are fixed, then perhaps geocoding beforehand via http://www.batchgeocode.com/ or something similar might suit your needs. Beyond that, you would need to check out the various geocoders out there. MapPoint Web Service includes a geocoder, but many people prefer the yahoo maps implementation because of its simplicity (http://developer.yahoo.com/maps/rest/V1/geocode.html).

    With whatever service you choose to geocode your points, the basic gist of the task is the same. Rather than grabbing a lat/lon directly out of your data, you instead grab the address and feed it to a javascript function that will determine the coordinates for you and then plot the point. Make sure to do these calls asynchronously, otherwise you will lock up the browsing experience for your users.

  6. jdanderson02 says:

    Hi Folks,

    We are very interested in learning how to to this with a WSS list as the source. However, we have no idea how to do that. We have been able to get the demo to work from an xml file, just baffled about the list. Thanks.

  7. Jon Campbell says:

    janderson02 – can you detail some specifics of what you are running into? The steps should be the same for a sharepoint list as with a xml file. The DataFormWebPart acts the same whether its working against a sharepoint list, xml file, aggregate data source, or other source. If you would prefer to take it offline, you can email me directly at joncamp at microsoft dot com.

  8. Jeffrey says:

    I downloaded the samplemappingsource.zip file and uploaded the files to a library on my sharepoint box and ran the simplemap example which worked fine.  When I run the Dynamic map I get an error.  I got this same error previously when I typed in the example…

    Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

    However Jon helped me out by explaining that I needed to edit my aspx page to tell it where to find the xml file since I had it in a subsite and not in the "Shared Documents" library…

  9. Jon Campbell says:

    As Jeffrey noted, if you put the sample files into a place other than the root of the site then SimpleMap.aspx renders fine, but DynamicMap.aspx shows an error message. To fix this, you need to update the FilePath parameter of the SPXmlDataSource to add the DefaultValue attribute such that it contains the path to where the locations.xml file is stored. It is a site relative path, so in my case it was stored at http://testsite/mysubsite/Shared%20Documents/locations.xml. Therefore the DefaultValue for the FilePath would be “Shared%20Documents”. See the following code:

                   <DataSources>

                                   <SharePoint:SPXmlDataSource runat="server" id="locations_x002e_xml1">

                                     <DataFileParameters>

                                       <WebPartPages:DataFormParameter Name="FileName" ParameterKey="FileName" PropertyName="ParameterValues" DefaultValue="locations.xml"/>

                                       <WebPartPages:DataFormParameter Name="FilePath" ParameterKey="FilePath" PropertyName="ParameterValues" DefaultValue="Shared%20Documents"/>

                                     </DataFileParameters>

                                   </SharePoint:SPXmlDataSource>

                   </DataSources>

    If you want to use this sample with a source other than an xml file (SOAP web service, sql database, sharepoint list, etc) you will want to start from scratch rather than working from the samples. Converting the provided sample code to an arbitrary source can be done but it’s not for the faint of heart. The main reason for that is to ensure that SharePoint Designer can do the work to make sure that the basic DataFormWebPart has all the right stuff to start from in terms of data sources, basic XSLT, etc.

  10. Jon Campbell says:

    A quick note about the geocoding issue:

    The reason why FindLocation is unsuitable for the purpose described in this post is that it causes the map to be centered on the point that is found as a result of the call. Because of that, if you are plotting multiple points it causes the map to jump around for every address. The solution described in the msdn article that I linked to above (http://msdn2.microsoft.com/en-us/library/bb259691.aspx) is to use a second hidden map to find each address.

    If you only want to show a single address then the built in geocoding will work just fine. You can simply call FindLocation with your address data, then add a pushpin at the center of the map. This works great if you are trying to make a detail page for a contact in your address book.

  11. Hi everyone, My name is Greg Chan and I’m a Program Manager in the SharePoint Designer team. I’ve also

  12. dacle says:

    Help me please! I have an Address Lists (about 400 addresses) and I want to display them in Virtual Earth. How to display many addesses by adding pushpin in VE ?

  13. Jon Campbell says:

    Dacle – the easiest solution is probably to use something like http://www.batchgeocode.com/ to give you the lats/longs for the addresses, then add them as extra columns on a sharepoint list. If your data is in sql or something and you don’t have the ability to add the data to the source, you can create a parallel list and use an aggregate datasource to correlate the lat/long with the address.

  14. Feature extensions to the WSS blog site template TheKid.me.uk extends the wss blog template – Check it

  15. Simon says:

    Dear Jon,  I have a similar case like Dacle where I want to display multiple address on a map in VE.  I’ve already created a sharepoint list with address (there’s lats and longs including it).  However, I don’t know how to get those data from the list and post them as pushpins in the VE inside SharePoint…

  16. Jon Campbell says:

    With regard to the comments about driving directions – its super easy to do! You don’t even need to have the virtual earth map or anything, you can just format your address and you are good to go. That url has info on building your own url.

    http://help.live.com/Help.aspx?market=en-US&project=WL_Local&querytype=topic&query=WL_LOCAL_PROC_BuildURL.htm

    For example, if you were going to go to Chicago but wanted to let the user put in their own starting point then you could use a url like this:

    http://maps.live.com/default.aspx?v=2&rtp=~adr.Leavenworth,%20Washington”>http://maps.live.com/default.aspx?v=2&rtp=~adr.Leavenworth,%20Washington

    In the sharepoint contacts list case, you would probably want something like this:

    <a href="http://maps.live.com/default.aspx?v=2&rtp=~adr.{@WorkAddress},{@WorkCity},{@WorkState},{@WorkZip}">Get directions!</a>

  17. mswin says:

    Hi,

    Its a great post.

    I am strucked with some problem using Javascript in xslt.

    I have javascript on my xsl file.

    In the javascript I have a method, which return some databsed on browser locale.

    Based on the value returned by the javascript function I want to set the value for xslt variable or parameter.

    I want to use this xslt parameter value and include some other xsl on condition basis.

    How to set the xslt variable value from the javascript. My Javascript is there in the xslt itself.

    My requirement is, I want to include culture specific xsl in my main xsl based on the value from Javascript.

    Any help will be highly appreciated.

  18. Jon Campbell says:

    mswin: The situation you are describing is somewhat backwards to what we are doing in this post. The method described above uses xsl on the server to generate javascript that is inserted into the page markup, which in turn is run by the client. What you seem to be describing is the reverse, which is a rather different scenario.

    While your scenario is somewhat vague to me, in general you can pass values to the DFWP using parameters. Those parameters are in turn available to the xsl as <xsl:param> values. So, if you have javascript that you want to pass a resource to a DFWP via the query string, you can create a query string parameter on the DFWP and then have your javascript open the appropriate page passing in the data that you got via your call.

    If that doesn’t make sense then you can contact me offline at joncamp at microsoft dot com and then we can discuss if this method will suit your needs.

  19. judysemo says:

    Jon,

    Is the use of this code to display a virtual earth map in a Sharepoint Intranet Portal depend on us having a MWS/VE  agrrement/license?

  20. Jon Campbell says:

    judysemo: You should check the licensing terms for Virtual Earth since I am not a lawyer, but the above code is just like any other mashup or VE application that any site would use. I think http://www.microsoft.com/virtualearth/product/terms.html has the info that you are looking for. From the looks of it, as long as you arent hitting 100k transactions in a 24 hour period you should be fine, but check the terms to be sure.

  21. Tom Resing says:

    Jon,

    I’m also interested in the answer to Judysemo’s question. The third paragraph of the terms states "You are not permitted to use the API or the Service on any intranet or non-public website, unless You have a MWS/VE Agreement that includes such rights."

    I’ve expirimented with the Virtual Earth API on an intranet and it does work. On the other hand, the Google Maps API actually prevents use on an intranet because of similar terms.

    Your answer and the fact that it actually works on an intranet suggest there is some gray area in the terms. Do you know if that is true?

    Tom

  22. Jon Campbell says:

    Tom: I wish I could give you an easy answer, but I am not a lawyer. The best I can do is suggest that you or your corporate legal affairs team take a look at the licensing terms. Perhaps checking on the Virtual earth forum (http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=537&SiteID=1) might shed more light.

  23. dash says:

    Is there any way to display a more minimal zoom menu ?  I have this in a sort-of small part of my page [about 400x300px], and the zoom/menu kind of takes over.

    I’m also looking to use some non-standard icon, I see that the AddPin() function is called with an ‘iconurl’ parameter, but it doesn’t seem to be used in the actual function.  Is it still, just not visibly ?  Also, how should I align my icons so that the pointer-part of it is still in the same place ?

    I cast my vote for built-in geocoding support too.  I’m fine with using batchgeocode or something, but my nontechnical clients get confused easily. 🙂

    Also, using non-integer zoom levels is rather amusing, nice error handling. 😛

  24. dash says:

    I’ve solved my own problems, if anybody else wants them:

    You can hide the zoom/navigation menu by applying the following stylesheet:

    "#myMap_dashboard {visibility:hidden!important;}"

    Custom icons can be used by implementing this:

    Change the ‘null’ in the original call to AddPin() to a link to an image that you want to use instead of the default.

    Add this line to the AddPin() function: "shape.setCustomIcon(iconurl)", before the map.AddShape() part, but after the shape object is created.

    Have fun!

  25. Body: I threw together a quick demo http://www.wssdemo.com/Pages/map.aspx of the code demonstrated in

  26. Nitu says:

    Dash, I am trying to change the icon for the pushpin. but after settiing it to a custom image, pushpins are not displayed at all.

    The code I used is:

         function AddPin(lat, lon, iconurl, title, desc)

         {

               var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(lat,lon));

               shape.setCustomIcon("<div><img src=’dot.gif’/></div>");

               shape.SetTitle(title);

               shape.SetDescription(desc);

               map.AddShape(shape);

         }

    and on a note dot.gif is sitting at the same place where my aspx page is.

    Any help is highly appreciated. Thanks

  27. Nitu says:

    I got this working perfectly. just changed the shape.setCustomIcon to shape.SetCustomIcon. But it was really pain in butt to figure it out.

    Now I want a link in the popup which will open a different list on the same or different page. I was wondering if anybody can help…Thanks.

  28. Anthony says:

    I really appreciate what you’ve shown me here.  I was able to disect your code and in turn change the data source from the XML into the one of the lists on my site.  Unfortunately all I had was addresses in my list so I geocoded the info to get my LatLong info and now I have a list that is plotted against a VE map.  Thanks again.

  29. Jon Campbell says:

    Nitu: To combine data from multiple lists, there are two ways that i have tried successfully.

    1) instead of using an SPDatasource, use an aggregate datasource which contains the two lists you want data from. Then just manipulate the XSL to point to the right places.

    2) use the "hidden iframe" technique to load the second page into a hidden iframe, then use javascript to pull data out of that page into the div for the popup.

  30. Simon Gregory says:

    Hi, thanks for this. I have modified the code to use a list of input and I have changed to version 6 of the API. All works great.

    I want to now improve my solution:

    Once I have plotted the points I want to center and scale the map to show all the plotted points.

    I was hoping to do this by using the VEMap.SetMapView method. This method needs an array of the plot points. That is straight forward (I think)  I just created an array and I push the VELatLong objects into it just after I have plotted them.

    However, I am very new to xslt processing and my big problem is where/when to run VeMap.SetMapView method. I thought I had found the place that I thought it was logical to put it but that did not work.

    Any help with this would be appreciated.

    Thanks

    Simon

  31. Jon Campbell says:

    Simon – based on what you are describing, you will want to modify the AddMapPins template. The code above is pretty simple in that it creates an AddPin() call for each row of data. A better way would be to have the AddMapPins template generate the array of points. Something similar to the following should be close to what you want.

    <xsl:template name="AddMapPins">

       <xsl:param name="Rows"/>

       <xsl:text disable-output-escaping="yes"><![CDATA[

               <script type="text/javascript">

               var mypins = {

               ]]></xsl:text>

       <xsl:for-each select="$Rows">

         <xsl:if test="not(normalize-space(@lat) = ” and normalize-space(@long) = ”)">

           new VEShape(VEShapeType.Pushpin, new VELatLong(<xsl:value-of select="@lat" />,<xsl:value-of select="@lon" />)),

         </xsl:if>

       </xsl:for-each>

       <xsl:text disable-output-escaping="yes"><![CDATA[

               }

               </script>

               ]]></xsl:text>

    </xsl:template>

    Then you would want to modify the GetMap() function to call your SetMapView with those pins, and also modify the addpins function to add each of your pins to the map. http://dev.live.com/virtualearth/sdk/Ref/HTML/M_Namespace_VEMap_SetMapView.htm has a good example of the basic concept.

  32. Glennzo says:

    I could realy do with some help here guys.

    Im not technically minded with ASP.NET (PHP MYSQL background)

    Ive done a course in Sharepoint, installed it, set up Sites etc.

    Do I edit a Sharepoint master page and drop the code in (the code above)?

  33. tonidecoster says:

    HI

    i have an issue

    My client has asked me to put the org chart on the page (which is big and which is a visio file)

    and the org chart contains the list of the companies

    client has also asked, when the file is displayed on the page one must be able to zoom on the page so  the name of the company can be seen

    i am new to coding and designing

    Please help ………..my mail id is tonidecoster9@yahoo.com

    Regards,

    toni decoster

  34. Ram says:

    very nice job

    but my task is slightly different

    i have to show the offices of a company that is in share point list site on the virtual earth map

    like if i click the US office of the company then it should show the address of that US office in the map

    plz help me

    it is very urgent

    regards

    Ram

    plzzzzzzzzzzz

    hury

  35. Hi everyone, Jon here again with a quick how-to on creating a simple bar graph of your data by using

  36. Aaron says:

    Hi,

    I want to use this functionality on my SharePoint homepage, using a custom list in my SharePoint site as the data source. I was wondering how would I implement list VE map on my homepage based off a custom list that is not displayed on the page. Also, how could I implement this mapping as is using a custm list instead of creating a new XML file. I am some what new to XML and this type of customization so any help would be greatly apprecaited.

  37. Jon Campbell says:

    Aaron – you don’t have to show the list on the page – I just did that for clarity’s sake. If you don’t want the table to be shown, just delete the <table> tag that is after the call to AddMapPins. For completeness you should delete the dvt_1.body and dvt_1.rowview templates, but you don’t have to.

    In terms of using a list instead of the xml file – the process is basically the same. the biggest difference is that inside the AddPin template you will need to change the fields that are referenced. for example, if you call your latitude field "Latitude", then you will want to change the "@lat" to be "@Latitude".

  38. Hi everyone, Jon here again with a great tip on visualizing your data. In my Plotting Your Data Using

  39. vextraz says:

    Is there a way to load the map into an iFrame, but still pull from the Data source in the main page?

  40. vextraz says:

    Also, Has anyone tried to load mutiple data soruces in the map using layers? I have tried but with no success. Below is my DIV tag to load the map.

    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script&gt;

       <script type="text/javascript">

         var map = null;

               var layer1;

               var layer2;

         function GetMap()

         {

               map = new VEMap(‘myMap’);

               map.SetDashboardSize(VEDashboardSize.Small);

               map.LoadMap(new VELatLong(44.4024, -94.1309), 6,’r’ ,false);

               AddPins();

            CreateLayer1();

            CreateLayer2();

         }

         function AddPin(layer, lat, lon, iconurl, title, desc)

         {

               var shape =

    new VEShape(VEShapeType.Pushpin,

    new VELatLong(lat,lon));

               shape.SetCustomIcon("icon.gif");

               shape.SetTitle(title);

               shape.SetDescription(desc);

              layer.AddShape(shape);

         }

         function addLoadEvent(func)

         {

               var oldonload = window.onload;

               if (typeof window.onload != ‘function’)

               { window.onload = func; }

               else

               { window.onload = function()

                     { oldonload(); func(); }

               }

         }

         addLoadEvent(GetMap);

       </script>

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

    This is how I am trying to call the pins.

    <xsl:template name="AddMapPins">

       <xsl:param name="Rows"/>

       <xsl:text disable-output-escaping="yes"><![CDATA[

               <script type="text/javascript">

               function CreateLayer1()

               {

    alert();

                             layer1 = new VEShapeLayer();

                             map.AddShapeLayer(layer1);

               ]]></xsl:text>

       <xsl:for-each select="$Rows">

         <xsl:if test="not(normalize-space(@lat) = ” and normalize-space(@long) = ”)">

           AddPin(layer1, <xsl:value-of select="@lat" />,

           <xsl:value-of select="@long" />,

           null,

           ‘<xsl:value-of select="@name" />’,

           ‘<xsl:value-of select="@description"/>’);

         </xsl:if>

       </xsl:for-each>

       <xsl:text disable-output-escaping="yes"><![CDATA[

               }

               </script>

               ]]></xsl:text>

    </xsl:template>

    ——————-

    <xsl:call-template name="AddMapPins">

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

    </xsl:call-template>

    Any help on this would be greatly appreciated. I have reached out to John for this, but we could figure it out.

  41. vextraz says:

    I figured out my problem. I was not calling the PINs for each  layer. Below is the code that worked for me.

    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script&gt;

       <script type="text/javascript">

         var map = null;

               var layer1;

               var layer2;

         function GetMap()

         {

               map = new VEMap(‘myMap’);

               map.SetDashboardSize(VEDashboardSize.Small);

               map.LoadMap(new VELatLong(44.4024, -94.1309), 6,’r’ ,false);

            CreateLayer1();

            CreateLayer2();

               AddPins();

         }

         function AddPin(layer1, lat, lon, iconurl, title, desc)

         {

               var shape =

    new VEShape(VEShapeType.Pushpin,

    new VELatLong(lat,lon));

               shape.SetTitle(title);

               shape.SetDescription(desc);

              layer1.AddShape(shape);

         }

               function AddPin(layer2, lat, lon, iconurl, title, desc)

         {

               var shape =

    new VEShape(VEShapeType.Pushpin,

    new VELatLong(lat,lon));

               shape.SetTitle(title);

               shape.SetDescription(desc);

              layer2.AddShape(shape);

         }

         function addLoadEvent(func)

         {

               var oldonload = window.onload;

               if (typeof window.onload != ‘function’)

               { window.onload = func; }

               else

               { window.onload = function()

                     { oldonload(); func(); }

               }

         }

         addLoadEvent(GetMap);

       </script>

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

  42. Benyten says:

    Woww,great job…

    Thanks Jon for your knowledge sharing 🙂 🙂

  43. Avikumar says:

    Hello Jon

    Nice piece of coding.

    I tested on my local server, working nicely. But I am thining in some different manner, can I not first generate xml from an existing sharepoint list and load this xml in your suggested coding.

    OR

    Can I direct integrate sharepoint list rather than hardcoded location.xml?

    Please advise

  44. Rob says:

    I have it working from the xml file with no issues, i’ve also been able to modify various aspects of it, but one thing I cannot get to work is getting it to read from a sharepoint list.  I basically tried to replace the paths that would point to the xml file and make them point to the location of the list, but that only resulted in an error at the bottom of the map.  I changed the datasources names to represent the fields but that didn’t do anything either.  I’m not a coding or sharepoint guru to being with, can someone point me to a sample code that shows how to reference a sharepoint list rather than an xml file? Thanks in advance.

  45. Jon M. says:

    I too am trying to link this to a SharePoint list.  The pushpins are not appearing and I can’t figure out what I am doing wrong.

  46. Aaron says:

    A new issue that I face is referencing a data colomn that contains an apostrophy. When there is an apostrophy the map does not work for that layer.

    any thoughs or ideas about how to get past this issue?

  47. Mike K says:

    Just starting working with SharePoint and mapping. Great example, but I’m trying to use the clustering option available with Version 6.2. Any thoughts on how to combine this example with Cluster?

  48. Rick says:

    Hi Jon,

    Thank you for this usefull information, All is working good as expected from XML file, I created an xml file with Latitude, Longitude, Name & Address fields.

    But requirement is to store all this information in a SharePoint list & then display points on map.

    I tried it by taking help from points described by you in comments but got web part error on map page.

    Can you please post the code from SharePoint list.

    Your help will be highly appreciated.

    Thanks.