none
How to change text color for pushpin in V7? RRS feed

  • Question

  • Hello,

    I am using the pushpin options for the text method in Bing Map Ajax 7. Here are my pushpins options

    var pushpinOptions = { icon: '../icons/blank.png', text: 'this is a test', height: 50, width: 50, anchor: new m.Point(-86.3947038675, 30.6501557915) };

    This actually works great, except the text is always the white. I would like to be able to change the text color. Is this possible, and if so how?

    Thanks ahead of time,


    derek
    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:38 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, May 18, 2011 8:50 PM

Answers

  • If you don't want to break all the pushpins (or set the same color for each label) and , you can set the typeName property in the PushpinOptions parameter.

    Be careful though about the use of !important css override, you can get poor performance on rendering in browser if you use too many of them.

    See: http://msdn.microsoft.com/en-us/library/gg427629.aspx

    And here an implementation:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title></title>
    	<script type="text/javascript" charset="UTF-8" 
          src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" 
          type="text/javascript"></script>
    	<script type="text/javascript">
    
    	  function getMap() {
    	    // Initialize the map
    	    map = new Microsoft.Maps.Map($('#map').get(0), {
    	      credentials: "Your Bing Maps Key",
    	      center: new Microsoft.Maps.Location(47.5, 2.75),
    	      zoom: 4,
    	      mapTypeId: Microsoft.Maps.MapTypeId.road
    	    });
    			
    			var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75), { text: '1', typeName: 'sampleCustom' });
    			map.entities.push(pin);
    	  }
    
    	</script>
    	<style type="text/css">
    		.sampleCustom div { color: Red !important; };
    	</style>
    </head>
    <body onload="getMap();">
    	<div id="map" style="position: relative; width: 800px; height: 600px;">
    	</div>
    	<div id="opacitySlider" style="position: relative; width: 400px;">
    	</div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Thursday, May 19, 2011 8:15 AM
    Moderator
  • is possible if not ideal, if you add typeName: 'mypinclass' to the pushpin options then bing maps will add a css class called "mypinclass' to the pushpin container. Then using the following css you should be able to override the color and anything else:

     

    .mypinclass div{

    color:red !important;

    }

     

    You need the !important to override the css styles that bing maps writes inline into the html it generates


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    • Marked as answer by jderekito Thursday, May 19, 2011 2:15 PM
    Thursday, May 19, 2011 7:12 AM
    Moderator

All replies

  • is possible if not ideal, if you add typeName: 'mypinclass' to the pushpin options then bing maps will add a css class called "mypinclass' to the pushpin container. Then using the following css you should be able to override the color and anything else:

     

    .mypinclass div{

    color:red !important;

    }

     

    You need the !important to override the css styles that bing maps writes inline into the html it generates


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    • Marked as answer by jderekito Thursday, May 19, 2011 2:15 PM
    Thursday, May 19, 2011 7:12 AM
    Moderator
  • If you don't want to break all the pushpins (or set the same color for each label) and , you can set the typeName property in the PushpinOptions parameter.

    Be careful though about the use of !important css override, you can get poor performance on rendering in browser if you use too many of them.

    See: http://msdn.microsoft.com/en-us/library/gg427629.aspx

    And here an implementation:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title></title>
    	<script type="text/javascript" charset="UTF-8" 
          src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" 
          type="text/javascript"></script>
    	<script type="text/javascript">
    
    	  function getMap() {
    	    // Initialize the map
    	    map = new Microsoft.Maps.Map($('#map').get(0), {
    	      credentials: "Your Bing Maps Key",
    	      center: new Microsoft.Maps.Location(47.5, 2.75),
    	      zoom: 4,
    	      mapTypeId: Microsoft.Maps.MapTypeId.road
    	    });
    			
    			var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75), { text: '1', typeName: 'sampleCustom' });
    			map.entities.push(pin);
    	  }
    
    	</script>
    	<style type="text/css">
    		.sampleCustom div { color: Red !important; };
    	</style>
    </head>
    <body onload="getMap();">
    	<div id="map" style="position: relative; width: 800px; height: 600px;">
    	</div>
    	<div id="opacitySlider" style="position: relative; width: 400px;">
    	</div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Thursday, May 19, 2011 8:15 AM
    Moderator