How to format text or change font size inside pushpin in bingmaps ajax
I created a pushpin using the following code
var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
icon: 'images/pushpin.png',
text: '1',
typeName: 'pushpinStyle'
});
The text displayed in the button icon defaults to 5 pixels below. I changed the height and width of the thumbnail, but did not improve the formatting of the text inside the button. How to format text inside a button.
I googled a lot, but I didn't get the right answer. thanks in advance
source to share
You are on the right track to specify the typeName property for your Pushpin. As you probably already know, specifying the typeName pushpinStyle
will result in the generated Pushpin class pushpinStyle
. If you inspect the generated html of your Pushpin on the map, you can see that the Pushpin text is being reanimated by an absolutely positioned child <div>
inside the Pushpin <div>
. Therefore, it would be logical 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.
source to share
I actually use the option htmlContent
on the button:
var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
typeName: 'pushpinStyle',
htmlContent: '<img src="images/pushpin.png" alt=""/>' +
'<span>'+resultNum.toString()+'</span>'
});
This way you have no nasty things to use! important styles like in @ Bojin Li's solution ... which I noticed was still causing the issue on mobile devices. Every time I scrolled the map, my custom styles were removed until the map stopped moving again. It's also an incredibly flexible configuration option. You can put any html you want there.
API Link: http://msdn.microsoft.com/en-us/library/gg427629.aspx
source to share