none
Pushpin Text Style in V7 RRS feed

  • Question

  • Is there a way to manipulate the text style on v7 Pushpin?

    I found a couple of others asking,  but no solution was evident.

    The default style produces white text that is essentially useless...

    • Moved by Ricky_Brundritt Friday, March 9, 2012 4:32 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, February 15, 2011 3:00 PM

Answers

  • Here's how I was able to manipulate the style of the pushpin text.

     

    First, set the type name of the pushpin

     

    var pushpinOptions = {				
    	text: "hello!",
    	icon: "",				
    	width: 30,
    	height: 20,
    	typeName: "mapPin"
    }
    

    You can use that type name to style via CSS

     

    <style>
    .mapPin{
     background:url(someimage.png) no-repeat left -3px;
    }
    .mapPin div {font-size:11px !important; color:yellow !important;}
    </style>
    

    Notice the div after the class name and the !important.  Those are required to make it work and to keep the default styles from overriding. (I was banging my head against that forever!)

    • Proposed as answer by Danny Scott Thursday, March 17, 2011 6:04 PM
    • Unproposed as answer by Danny Scott Thursday, March 17, 2011 7:58 PM
    • Marked as answer by Ricky_Brundritt Thursday, March 24, 2011 10:38 AM
    Thursday, March 17, 2011 12:56 PM

All replies

  • currently no, have asked for support for html pushpins with the dev team (like we had in 6.3) so hopefully we might have a way to customize things eaiser in future
    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    Thursday, March 3, 2011 11:11 PM
    Moderator
  • Here's how I was able to manipulate the style of the pushpin text.

     

    First, set the type name of the pushpin

     

    var pushpinOptions = {				
    	text: "hello!",
    	icon: "",				
    	width: 30,
    	height: 20,
    	typeName: "mapPin"
    }
    

    You can use that type name to style via CSS

     

    <style>
    .mapPin{
     background:url(someimage.png) no-repeat left -3px;
    }
    .mapPin div {font-size:11px !important; color:yellow !important;}
    </style>
    

    Notice the div after the class name and the !important.  Those are required to make it work and to keep the default styles from overriding. (I was banging my head against that forever!)

    • Proposed as answer by Danny Scott Thursday, March 17, 2011 6:04 PM
    • Unproposed as answer by Danny Scott Thursday, March 17, 2011 7:58 PM
    • Marked as answer by Ricky_Brundritt Thursday, March 24, 2011 10:38 AM
    Thursday, March 17, 2011 12:56 PM