Bing Maps Concepts
(formerly Virtual Earth)
Mike Garza   
VEMaps@garzilla.net   

   
Concept: Push Pin Side Bar with GeoRSS Feed

This is an updated example of the Push Pin Side Bar sample that I had posted previous. I received a request to show how this concept would work with a GeoRSS feed. Since it was a great request, I reworked part of the original code to show how this could be done.

From the end user perspective, nothing has changed. The example works exactly the same way the as the original. Below is the working example. I won’t go into all of the details about how this concept works since you can just refer to the original article.


Walk Through

Like I mentioned, this example is pretty much the same as the original except, the process for placing the push pins on the map has changed. In the original example, when the map was created, five push pins were added to the map at random locations [within the bounds of the map]. In this updated example, that process has been changed so that the five push pin locations are retrieved from a GeoRSS feed (more like a file as the locations are static, for now).

Two main changes needed to be made to this example. The first was importing the push pins from the GeoRSS feed and the second was processing the imported push pins to build out the side bar. The implementation for the import is as follows:
    var layerSpec = new VEShapeLayer();
    var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "SideBarGeoRss.xml", layerSpec);
    map.ImportShapeLayerData(veLayerSpec, loadMarkers);
    
The approach taken is the typical approach for importing a GeoRss feed as listed in the VE SDK (http://dev.live.com/virtualearth/sdk/). First a new VEShapeLayer is created and assigned to the variable “layerSpec”. In order to import the new layer of VEShapes, the Shape source specification needs to be set. This is accomplished through the VEShapeSourceSpecification Class. An instance of this class is created by passing the data type, data source and corresponding layer to the constructor. The data type must be a valid VEDataType Enumeration (GeoRSS, VECollection or ImportXML), the data source is location of the data itself, in this case a GeoRSS feed and the layer is the VEShapeLayer object, layerSpec, that was previously created. Once the VEShapeSourceSpecification object, veLayerSpec, has been created, the shapes can be added to the map.

Now that the data has been retrieved, it needs to be added to the map. This is accomplished via the ImportShapeLayer method on the VEMap object, map. This method accepts two parameters which are the Shape Source and a call back function. (There is actually a third optional parameter, setBestView, which determines if the zoom level for the map will be changed to show all of the VEShapes imported. The default is “true”.) The Shape Source is the VEShapeSourceSpecification object, veLayerSpec and the call back is a function named “loadMarkers”. The call back function, loadMarkers, will be invoked once all of the VEShapes have been imported into the map. The implementation of this is as follows:
    function loadMarkers(layer) {
        var numShapes = layer.GetShapeCount();
        for (var i = 0; i < numShapes; ++i) {
            var marker = layer.GetShapeByIndex(i);
            
            var currentPinHTML = pinHTML.replace('{0}', i + 1);
            marker.SetTitle('Push Pin #' + (i + 1));     
            marker.SetDescription('Hover over either the push pin or the side bar item to display the Info Box.');
            marker.SetCustomIcon(currentPinHTML);

            //Build out sidebar
            var itemHTML = '';
            var currentMarkerID = marker.GetID();
            currentPinHTML = currentPinHTML.replace('<div ', '<div id=\'sideBarMarker_' + currentMarkerID+ '\' '); 
            itemHTML += '<p><span onmouseover="mouseOverSidebarItem(\'' + marker.GetID() + '\');" 
                        onmouseout="mouseOutSidebarItem(\'' + marker.GetID() + '\');">';
            itemHTML += currentPinHTML;
            itemHTML += 'Marker # ' + (i + 1) + '<br/>';
            itemHTML += currentMarkerID + '<br/>';
            itemHTML += '</span><br/></p>';

            document.getElementById('SideBar').innerHTML += itemHTML;
        }
    }
    
Once all of the push pins have been loaded via the ImportShapeLayer method, this function is invoked. The instance of the VEShapeLayer that all of the push pins were added is passed to the call back function and is represented by the parameter/variable “layer”. First we determine how many push pins were added to the layer by invoking the GetShapeCount() method on the VEShapeLayer object, layer. This method returns an integer and it is assigned to the variable “numShapes”. Next we establish a for loop, using numShape, to process all of the push pins in the layer.

For each iteration of the loop, the push pin information is updated and the side bar information is built up. First, an instance of the push pin (VEShape object) is retrieved via the GetShapeByIndex() method in the VEShapeLayer Object, layer. This method accepts one parameter, which is the [zero based] index of the shape being retrieved and returns an instance of a VEShape object. Once this VEShape is retrieved, its title, description and icon are set. Addtionally, the VEShape information is used to build out the side bar. This process is repeated for each push pin the VEShapeLayer object, layer. For more detailed information about how the side bar is built out, please refer to the original article.

Wrap-up:

Again, this is just an updated version of the original Push Pin Side Bar example. This example has been updated so that a GeoRSS feed is used to supply the locations of the push pins (instead of randomly generated points). A GeoRSS feed is probably a more realistic source for the data points that need to be plotted. With a relatively simple change this example was updated to use a different data source.

Some of the code details were not covered in this article as they did not change from the original article. Please refer to the original article for more details on the other sections of code.

As always, I welcome any feedback, questions or comments.

Return to Home Page

©2007-2017, Mike Garza, All Rights Reserved