How to color clustering numbers in Bing Maps

SEONOK KIM 1 Reputation point

I'm using clustering, and white seems to be the default text color.
I want to change it to black, how can I do it?

Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
238 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. IoTGirl 2,961 Reputation points Microsoft Employee

    Hi Seonok Kim,

    Indeed you cannot use this method and change the text color. However you can use "SVG" images and then completely control the look of the points. I have the following suggestion from a member of our Engineering team:

    Clusters can be customized by SVG which allows just about everything. Start from this example:

    The idea is to throw away the original text, and replace with texts in SVG, I changed three lines to make the modifications to make texts red:

    const originalClusterText = cluster.getText();
                    //Create an SVG string of two circles, one on top of the other, with the specified radius and color.
                    var svg = ['<svg xmlns=""',
                        ' width="', (radius * 2), '" height="', (radius * 2), '">',
                        '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                        '<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="', fillColor, '"/>',
                        '<text font-size="14" font-weight="bold" fill="red" x="' + (radius - 5) + '" y="' + (radius + 5) + '">'+ originalClusterText + '</text>',
                    //Customize the clustered pushpin using the generated SVG and anchor on its center.
                        icon: svg.join(''),
                        text: '', // set default text to empty because it is already part of the SVG
                        anchor: new Microsoft.Maps.Point(radius, radius),
                        fillColor: '#f00',
                        textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.

    You can paste this code back into the iSDK to see the text turn red.



    0 comments No comments