How can I add a label onto my Bing Maps pushpins?

Question

I am creating maps where in some cases the pushpins represent locations where events occurred and where the date of the events are significant. I want to display the order of the chronological events on the pushpins themselves (with additional data being available to the user via the toolip property/by hovering).

For example, I want a map that looks like this:

...to look something like this:

Is there a way to do this?

Answer 1

You can use either of the following options:

• Set Content property of the Pushpin
• Add TextBlock or Label to a MapLayer

Set Content of Pushpin

You can set the Content property of the Pushpin to the text that you want to show on pushpin.

For example the following code, shows 1-base index of the pushpins on map:

private void button1_Click(object sender, EventArgs e)
{
    var locations = new[] {
        new Location(47.6424, -122.3219),
        new Location(47.8424,-122.1747),
        new Location(47.67856,-122.130994)};
    for (int i = 0; i < locations.Length; i++)
    {
        var pushpin = new Pushpin() { Location = locations[i], Content = i + 1 };
        this.userControl11.myMap.Children.Add(pushpin);
    }
    var thickNess = new Pushpin().Height;
    this.userControl11.myMap.SetView(locations,
        new Thickness(thickNess / 2, thickNess, thickNess / 2, 0), 0);
}

The text will be clipped to balloon area, so don't use a long text there.

Add TextBlock to MapLayer

You can also add MapLayer and then add TextBlock or Label to show longer texts:

private void button1_Click(object sender, EventArgs e)
{
    var locations = new[] {
        new Location(47.6424, -122.3219),
        new Location(47.8424,-122.1747),
        new Location(47.67856,-122.130994)};
    var pushpinLayer = new MapLayer();
    var height = new Pushpin().Height;
    var width = new Pushpin().Width;
    for (int i = 0; i < locations.Length; i++)
    {
        var pushpin = new Pushpin() { };
        var txt = new System.Windows.Controls.TextBlock();
        txt.Text = $"Lorem ipsum dolor sit amet {i + 1}";
        txt.Background = new SolidColorBrush(Colors.White);
        txt.Foreground = new SolidColorBrush(Colors.Black);
        txt.Width = 100;
        txt.TextWrapping = TextWrapping.WrapWithOverflow;
        txt.TextAlignment = TextAlignment.Center;
        txt.TextWrapping = TextWrapping.Wrap;
        txt.Padding = new Thickness(2);
        pushpinLayer.AddChild(pushpin, locations[i]);
        pushpinLayer.AddChild(txt, locations[i],
            new System.Windows.Point(-txt.Width / 2, -height));
    }
    this.userControl11.myMap.Children.Add(pushpinLayer);
    this.userControl11.myMap.SetView(locations,
        new Thickness(width / 2, height + 1, width / 2, 0), 0);
}

Answer 2

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial],
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12
});
var loc = new Location(47.6424, -122.3219);
var DevicePin = new Microsoft.Maps.Pushpin(loc, { color: '#f00', text: 'W', title: '', subTitle: 'Subtitle' });
map.entities.push(DevicePin);