none
v7: Pushpin dynamic width based on text RRS feed

  • Question

  • How do I create a pushpin that will grow in width according to the text?  I see there is a width argument but my text varies in length so I cannot calculate a pixel width.

    var pinArgs = { text: "Hello World", height: 7, typeName: "cssClass" };
    var pin = new Microsoft.Maps.Pushpin(groupInfo.center, pinArgs);

    -=Dan=-

    Friday, July 6, 2012 7:04 PM

Answers

  • Hello,

    In your case, I think I would choose to adapt the width based on the length of the string set on text.
    So to do this, the only thing that you need to do is to know the actual width of a letter (you set it in your cssClass for example) and after that, you can multiply the width by the length of the string associated to the text property.


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

    Sunday, July 8, 2012 9:26 PM
    Moderator
  • Thanks for the JavaScript solution, though I decided to use CSS for IE8+

    div.cssClass[style] { display:block; padding-right:10px; overflow:visible!important; }
    
    .cssClass div[style] { display:block; padding: 0 10px 0 10px; position:relative; background-color: red; -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em; width:auto!important; white-space:nowrap;}

    -=Dan=-


    • Marked as answer by danactive Tuesday, July 10, 2012 6:39 PM
    • Edited by danactive Tuesday, July 10, 2012 6:40 PM improve CSS
    Tuesday, July 10, 2012 6:39 PM

All replies

  • Hello,

    In your case, I think I would choose to adapt the width based on the length of the string set on text.
    So to do this, the only thing that you need to do is to know the actual width of a letter (you set it in your cssClass for example) and after that, you can multiply the width by the length of the string associated to the text property.


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

    Sunday, July 8, 2012 9:26 PM
    Moderator
  • Thanks for the JavaScript solution, though I decided to use CSS for IE8+

    div.cssClass[style] { display:block; padding-right:10px; overflow:visible!important; }
    
    .cssClass div[style] { display:block; padding: 0 10px 0 10px; position:relative; background-color: red; -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em; width:auto!important; white-space:nowrap;}

    -=Dan=-


    • Marked as answer by danactive Tuesday, July 10, 2012 6:39 PM
    • Edited by danactive Tuesday, July 10, 2012 6:40 PM improve CSS
    Tuesday, July 10, 2012 6:39 PM