none
change the backgroud color of the pushpin text if color is a variable RRS feed

  • Question

  • by using css class I can set the color of the pushpin text.

     <style type="text/css">
            .test div
            {
                color: Green !important;
                background-color: Green;
            }
        </style>


     var pushpinOptions = {
            typeName: 'test',
            text: '1'
        }

    If color is a variable then how can I set the color ?

    I can not pass a variable to the css class. so, is there any way to set the color for puspin text ?

    Thanks and Regards,

    Ani

    Friday, March 16, 2012 9:56 AM

Answers

  • So you want to change the color of your pushpin from your javascript code.
    To do so, you'll have many solutions:

    • Dynamicaly created your own class with own values and set it as typeName property of the pushpin
    • Dynamicaly modify the inline style information on the element (solution below)
    • Create your style classes in advance and use them accordingly

    Here is a sample code that I don't recommend since the internal structure of a pushpin might evolved (it did not during all v7 but still):

    <!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">
    	</script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		var map = null;
    			
    		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 pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    				typeName: 'customPushpinLabel',
    				text: '1'
    			});
    			map.entities.push(pushpin);			
    			
    			$('.customPushpinLabel div').css({color: 'red'});
    		}
    		
    	</script>
    </head>
    <body onload='getMap()'>
    	<div id="map" style="position: relative; width: 800px; height: 600px;">
    	</div>
    </body>
    </html>

    The other solution that might be supported and lets you a better access to the rendering is to use your own custom pushpin (HTML Pushpin) and implement your own representation.

    And if you want to add different pushpins with different colors, you should use the dynamically typeName approach with dynamic CSS classes creation or inline style edition.


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/


    Friday, March 16, 2012 3:12 PM
    Moderator

All replies

  • So you want to change the color of your pushpin from your javascript code.
    To do so, you'll have many solutions:

    • Dynamicaly created your own class with own values and set it as typeName property of the pushpin
    • Dynamicaly modify the inline style information on the element (solution below)
    • Create your style classes in advance and use them accordingly

    Here is a sample code that I don't recommend since the internal structure of a pushpin might evolved (it did not during all v7 but still):

    <!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">
    	</script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		var map = null;
    			
    		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 pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    				typeName: 'customPushpinLabel',
    				text: '1'
    			});
    			map.entities.push(pushpin);			
    			
    			$('.customPushpinLabel div').css({color: 'red'});
    		}
    		
    	</script>
    </head>
    <body onload='getMap()'>
    	<div id="map" style="position: relative; width: 800px; height: 600px;">
    	</div>
    </body>
    </html>

    The other solution that might be supported and lets you a better access to the rendering is to use your own custom pushpin (HTML Pushpin) and implement your own representation.

    And if you want to add different pushpins with different colors, you should use the dynamically typeName approach with dynamic CSS classes creation or inline style edition.


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/


    Friday, March 16, 2012 3:12 PM
    Moderator
  • Hello,

    Thanks for your reply.

    My pushpins are on a layer. Every pushpin on that layer can have different colors.

    I can add this code only after I add my layer to the map. This means my pushpin can have only one color.

                      map.entities.push(layer);

    $('.customPushpinLabel div').css({color: 'red'});

    Is there any way that a achieve this functionality for pushpins on a layer ?

    I removed the layer and I tried with adding pushpins directly to the Map.

    This code applies the  same color to all pushpins. It takes the color of the last pushpin and apply it to all pushpins.


    • Edited by AniLex9 Monday, March 19, 2012 2:02 AM
    Monday, March 19, 2012 1:01 AM
  • Hello,

    How can a set the background-color for the pushpin text?

    $('.customPushpinLabel div').css({background-color: 'red'}); is not supported.

    Ans:

    for background color we have to use quotes.''

    $('.customPushpinLabel div').css({'background-color': 'red'});



    • Edited by AniLex9 Monday, March 19, 2012 3:13 AM
    Monday, March 19, 2012 1:29 AM
  • I found the problem and the solution:

    I missed your  point of dynamically type name approach.

    Every pushpin typename class should be unique..

    Monday, March 19, 2012 3:23 AM