How to color clustering numbers in Bing Maps

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