How to color clustering numbers in Bing Maps

SEONOK KIM 1 Reputation point
2021-12-01T07:21:20.073+00:00

Hello.
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
    2023-05-26T16:27:45.8666667+00:00

    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:

    https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/customizeclusteredpushpins#TS

    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="http://www.w3.org/2000/svg"',
                        ' 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>',
                        '</svg>'];
                    //Customize the clustered pushpin using the generated SVG and anchor on its center.
                    cluster.setOptions({
                        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.

    Sincerely,

    IoTGirl

    0 comments No comments