Pushpin Label can extend bounds of Pushpin

Question

I'm using Bing Map's js API to drop a number of pushpins on a map. I want to label them with something particular. I've found code how to do that from their website and made some slight changes

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat - (latDiff * Math.random()), lon + (lonDiff * Math.random())), { text: 'Pushpin 278'});

map.entities.push(pushpin);

The problem is that the text appears to be restricted to the size of the pin (even if I offset it) - so it looks something like this

I want the text to go outside of the bounds of the pushpin, in such a manner for instance similar to Google Maps'

If I give it an amount of offset such that it'd appear down there, it instead just disappears.

I don't want to 'cheat' such as making the pins really large and transparent or whatever.

Answer 1

You have two solutions to do what you want to do.

• Using a custom HTML pushpin for both image and text

The first solution is to use the htmlContent property and create your own HTML pushpin content.

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

• Using two pushpins to manager rendering differently

The second is to use a first basic pushpin for the image and then you're adding a second custom pushpin with only text as htmlContent so you will have two seperated pushpins. This solution is better if you want to keep the default options for the image and be able to get a much better experience for readibility at various zoom levels.

Bonus:

I see another way to do this simply, you need to specify the width and the height (both of them) to be able to set a much larger pushpin representation. In this way, your pushpin representation will be bigger and you will need to also specify several other options including: anchor, text and textOffset.