none
Placing labels on the map (such as for vehicle identifiers) RRS feed

  • Question

  • Hi all,

    I have switched back from Silverlight maps to the standard map control due to restrictions on our company network (terminal servers can't handle silverlight very well).  I've successfuly migrated all the functionality back to the standard control but am stuck on one item.

    Labels.

    The application is used to track several hundred vehicles and I am unable to display labels on the map next to the custom icons I am using.  In silverlight this was quite simple to do but now I am stuck on how to implement in this version.  Can anyone help me place simple labels on the map?

    Thanks in advance!

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 1:22 PM (From:Bing Maps: Map Control and Web services Development)
    Sunday, January 29, 2012 10:44 PM

Answers

  • There is a property on the pushpin called textName that you can set to point to a CSS class. You can create some styles that make creating labels on the map pretty easy. Here is some code I just put together that seems to have a nice result:

    <!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(45, 12) //adjust anchor 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;
    	  }
    	  </style>
       </head>
       <body onload="GetMap();">
    	<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    • Marked as answer by Kearnsy Monday, January 30, 2012 2:10 AM
    Monday, January 30, 2012 12:54 AM
  • Try using the !important tag on the color property like so: color:blue !important;
    http://rbrundritt.wordpress.com
    • Marked as answer by Kearnsy Monday, January 30, 2012 5:00 AM
    Monday, January 30, 2012 3:31 AM

All replies

  • There is a property on the pushpin called textName that you can set to point to a CSS class. You can create some styles that make creating labels on the map pretty easy. Here is some code I just put together that seems to have a nice result:

    <!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(45, 12) //adjust anchor 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;
    	  }
    	  </style>
       </head>
       <body onload="GetMap();">
    	<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    • Marked as answer by Kearnsy Monday, January 30, 2012 2:10 AM
    Monday, January 30, 2012 12:54 AM
  • Thankyou, that's great!

    The only issue I'm having is being unable to change the color of the text on the labels.  I have tried:

     

    .labelPin div{
    white-space:nowrap;

    color: Blue;
       }

    But this has not worked.  Properties such as background-color do, however.

    • Edited by Kearnsy Monday, January 30, 2012 3:07 AM
    Monday, January 30, 2012 2:10 AM
  • Try using the !important tag on the color property like so: color:blue !important;
    http://rbrundritt.wordpress.com
    • Marked as answer by Kearnsy Monday, January 30, 2012 5:00 AM
    Monday, January 30, 2012 3:31 AM