Label Pushpins in Bing Maps v7

One common request I’ve seen on the forums is how to create a custom label on the map. There are two ways to do this. The first is to create an image with your text on it then use a tool like map cruncher to create a tile layer out of it. This method works good if you have a lot of labels you want to put on the. Similarly you can also generate these tiles on the fly to do the same thing. In most cases on the forums however people are just looking to get a small number of labels on the map. In this case there is a pretty easy approach to do this. Simply use the pushpin class without an icon. One benefit of using this approach is that your labels will rotate with the Birdseye imagery, thus making them easier to read.

The key to using this approach is the typeName property of the PushpinOptions class. This allows you to specify a CSS class that will be used by the pushpin. With a little CSS styling we can hide the icon of the pushpin, and remove the overflow property that is set to hidden which prevents more than three characters normally when using text with pushpins. Here is a code sample that demonstrates this method:

<!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 = null;         

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                    credentials:"YOUR_BING_MAPS_KEY"
                  }); 

            var labelPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0,0),{
                text : 'Custom Label',    //The text for the label
                typeName : 'labelPin',     //Assign a CSS class to the pin
                anchor : new Microsoft.Maps.Point(0,0),  //Reset the anchor point of the pin to make aligning the text easier.
                textOffset : new Microsoft.Maps.Point(-45,0) //Adjust textOffset point for better label positioning
                //Adjust the x value as you see fit for better centering of text
            });

            map.entities.push(labelPin);
         } 
      </script>
      <style>
      /* Allow div of pushpin to display overflowing content */
      .labelPin{
        overflow:visible !important;
      }

      /* Hide the default pushpin, Alternatively point the icon property of the pushpin to a transparent image */
      .labelPin img{
        display:none;
      }

      /*Use this to style the text*/
      .labelPin div{
        white-space:nowrap;
        color:blue !important;
      }
      </style>
   </head>
   <body onload="GetMap();">
    <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
   </body>
</html>

Here is a screen shot of the final result:

image

Advertisements

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