how to format the text or change the font size inside pushpin in bingmaps ajax

Question

I've created pushpin using the follwing code

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
        icon: 'images/pushpin.png',        
        text: '1',
        typeName: 'pushpinStyle'
    });

Text displayed in the pushpin icon is 5px below from top of the icon by default. I've changed the height and width of the pushpin icon, but no improvement in text format inside the pushpin. How to format the text inside the pushpin.

I've googled a lot but i didn't get the correct response. Thanks in advance

Answer 1

You are on the right track to specify the typeName property for your Pushpin. As you probably already know, specifying a typeName of pushpinStyle will cause the created Pushpin to have a class of pushpinStyle. If you inspect the generated html of your Pushpin on the map, you will see that the Pushpin text is reaized by an absolutely positioned child <div> inside the Pushpin <div>. So the logical thing to do would be to use css to further style the Pushpin text <div>. For example, you can do the following:

.pushpinStyle div{
    color: black !important; /*Make Pushpin text black*/
    left: 5px !important;  /*Since Pushpin text is absolutely positioned, this will cause the text to be 5 pixels from the left instead of 0 pixels */
    text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  /*Give the text all around white text shadow so it looks nice on browsers that support it*/
    font: 12px arial,sans-serif; !important // override default fonts 
}

This will cause the Pushpin text <div> to have the above styles. Of course you can add your own styles to suit your application.

Answer 2

I'm actually using the htmlContent option on the pushpin:

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
    typeName: 'pushpinStyle',
    htmlContent: '<img src="images/pushpin.png" alt=""/>' +
                 '<span>'+resultNum.toString()+'</span>'
});

This way you don't have the nastiness of using !important styles like in @Bojin Li's solution... which I noticed were causing a problem on mobile anyway. Everytime I'd scroll the map my custom styles would be removed until the map stopped moving again. This is also just an incredibly flexible configuration option. You can put any html you want in there.

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