locked
Creating a list of populated locations RRS feed

  • Question

  • Hi,

     

    I'm currently displaying multiple office locations with custom icons on VE at the same time (approx 100 locations) from a custom webservice which is returned as a list .

     

    What I would also like to do is display the office location titles on the HTML page, which when the user clicks on the 'location title' the revelant custom icon in the above step is centered on the map and text is dispolayed in the 'bubble".

     

    I had a look on the SDK but could not find any information.

     

    Any body see a demo/code on how this is done?

     

    I've had a look at the

    Many thanks

    simon

    Tuesday, March 25, 2008 5:35 PM

Answers

  • There is no built in functionality that will do this directly for you, however this can be done by using the methods I used in the following code:

    Code Snippet



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
          <script>
             var map = null;
               var l = new VEShapeLayer();
              
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
             }  

             function AddMyLayer(type)
             {
               
                map.AddShapeLayer(l);
                var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "georssTest.xml",l);
               
                map.ImportShapeLayerData(veLayerSpec,makeList,1);
               
               
            }
           
            function makeList()
            {
                var list ="";
                for(var i=0;i<l.GetShapeCount();i++)
                {
                    var shape = l.GetShapeByIndex(i);
                    list+="<a href='#' onclick='showLocation(\""+shape.GetID()+"\");'>"+shape.GetTitle()+"</a><br/>";
                }
               
                var d = document.getElementById("list");
                d.innerHTML = list;
             }

             function showLocation(id)
             {
                 var shape = map.GetShapeByID(id);
                 map.SetCenter(shape.GetPoints()[0]);
                
                 var callback = "displayInfo(\'"+id+"\')";
                 setTimeout(callback,500);
             }
            
             function displayInfo(id)
             {
                 var shape = map.GetShapeByID(id);
                 map.ShowInfoBox(shape);
             }

          </script>
       </head>
       <body onload="GetMap();">
    <div align="center">
          <div id='myMap' style="position:relative; width:600px; height:500px;"></div>
          <INPUT id="loadFeed" type="button" value="Load RSS" onclick="AddMyLayer(VEDataType.GeoRSS);">
        </div>
        <div id='list'></div>
       </body>
    </html>

    Tuesday, March 25, 2008 7:59 PM
    Moderator

All replies

  • There is no built in functionality that will do this directly for you, however this can be done by using the methods I used in the following code:

    Code Snippet



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
          <script>
             var map = null;
               var l = new VEShapeLayer();
              
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
             }  

             function AddMyLayer(type)
             {
               
                map.AddShapeLayer(l);
                var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "georssTest.xml",l);
               
                map.ImportShapeLayerData(veLayerSpec,makeList,1);
               
               
            }
           
            function makeList()
            {
                var list ="";
                for(var i=0;i<l.GetShapeCount();i++)
                {
                    var shape = l.GetShapeByIndex(i);
                    list+="<a href='#' onclick='showLocation(\""+shape.GetID()+"\");'>"+shape.GetTitle()+"</a><br/>";
                }
               
                var d = document.getElementById("list");
                d.innerHTML = list;
             }

             function showLocation(id)
             {
                 var shape = map.GetShapeByID(id);
                 map.SetCenter(shape.GetPoints()[0]);
                
                 var callback = "displayInfo(\'"+id+"\')";
                 setTimeout(callback,500);
             }
            
             function displayInfo(id)
             {
                 var shape = map.GetShapeByID(id);
                 map.ShowInfoBox(shape);
             }

          </script>
       </head>
       <body onload="GetMap();">
    <div align="center">
          <div id='myMap' style="position:relative; width:600px; height:500px;"></div>
          <INPUT id="loadFeed" type="button" value="Load RSS" onclick="AddMyLayer(VEDataType.GeoRSS);">
        </div>
        <div id='list'></div>
       </body>
    </html>

    Tuesday, March 25, 2008 7:59 PM
    Moderator
  • Richard, thanks for the above solution.

     

    I have found I click on "South Coldwater Trailhead" and then click on "Snow Lake Camp" , the item is centered on the map but the ballonn appears briefly in the top right region of the page and then dissapears until you click on "Snow Lake Camp"again.

     

    Do you know what would cause this?

     

    Many thanks

    Simon

     

     

    Wednesday, March 26, 2008 3:53 PM