Get entity by property in Bing Maps V7

Every once in a while a question comes up on the forums around how to extend the functionality of the map controls. A simple example of one such request was the ability to get a tile layer by name. In Bing Maps v6.3 we had functionality that allowed us to do this. In Bing Maps v7 this functionality was removed as it wasn’t really needed and could easily be recreated if someone wanted it. When I came across this forum question I decided to do a quick code write up on how to do this and realized that it made more sense to provide something a bit more flexible. So, I extended this idea and have wrote a simple method that allows you to get any entity by any public property. I also decided add the ability to specify the collection to look inside of so it could be used with a single entity collection if you wanted to find an entity inside of a particular collection without searching all collections.

This is easily accomplished because JavaScript supports anonymous properties. We can easily add a custom property to an object simply by adding a reference to the customer property. The following code sample has this method for getting an entity by property. In addition the following code sample also implements this method to add the ability to get a layer by name like we were able to do in Bing Maps v6.3.

<!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 type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         var map;

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
                credentials: "Bing Maps Key", 
                center: new Microsoft.Maps.Location(48.03,-122.4), 
                zoom: 12, 
                mapTypeId: Microsoft.Maps.MapTypeId.road 
            }); 

            // Create the tile layer source
            var tileSource = new Microsoft.Maps.TileSource({
                uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'
            });

            // Construct the layer using the tile source
            var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: .7 });

            //Create a custom Property to store the layer name
            tilelayer.LayerName = "MyLayer";

            // Push the tile layer to the map
            map.entities.push(tilelayer);
         }

         //Method that will get a layer or entity by name assuming it has a LayerName property on it.
         function GetLayerByName(layerName){
            return GetEntityByProperty(map.entities, 'LayerName', layerName);
         }

         //This Method is similar to the above but more flexible and allows you to get a layer based on the value of any public property.
         function GetEntityByProperty(collection, propertyName, propertyValue){
            var len = collection.getLength(), entity;

            for(var i = 0; i < len; i++){
                entity = collection.get(i);

                if(entity[propertyName] && entity[propertyName] == propertyValue){
                    return entity;
                }else if (entity.getLength){
                    //Entity collections have this property and we want to look inside these collections
                    var layer = GetEntityByProperty(entity, propertyName, propertyValue);

                    if(layer != null){
                        return layer;
                    }
                }
            }

            return null;
         }

         //Simple method that toggle the visibility of a layer 
         function ToggleLayerVisibility(layerName){
            var layer = GetLayerByName(layerName);

            if(layer){
                layer.setOptions({ visible : !layer.getVisible() });
            }
         }
      </script>
   </head>
   <body onload="GetMap();">
        <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div><br/>
        <input type='button' onclick="ToggleLayerVisibility('MyLayer')" value="Get Layer by Name and toggle visibility"/>
   </body>
</html>
About these ads

4 thoughts on “Get entity by property in Bing Maps V7

  1. Very cool. It makes good sense to do it this way. less overhead. One type-o in your code.

    This line;

    should look like this;

    The trailing /> is missing the / from the tag.

    Thanks Ricky!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s