Bing Maps V8 clustered layer with custom icons performance RRS feed

  • Question

  • Hello,

    we are using clustered layer to display around 5-6k of pins. The performance is good, until the custom icon is not used. Then it takes to render the pins around 6-7 seconds, instead of less then one. What is odd that in a case i use the same icon only for clustered pins there is no visible performance drawback.

    new Microsoft.Maps.ClusterLayer(pins, {
    clusteredPinCallback: (cluster) => {
    icon: 'assets/shipping-box.svg'

    But when i set this icon as a default already when creating pins it get slow..

    const location: Microsoft.Maps.Location = new Microsoft.Maps.Location(openLoad.origin.latitude, openLoad.origin.longitude);
    const pushPinOptions: Microsoft.Maps.IPushpinOptions = {};
    pushPinOptions.icon = 'assets/shipping-box.svg';
    const pushpin = new Microsoft.Maps.Pushpin(location, pushPinOptions); //around 5-6 thousands of these

    I already set the map option liteMode to true and also changed the branch to experimental one, as suggested on some threads but no improvement.

    So is there anything else what i can do? (Or at least it would be good to know that there is ongoing work on this issue )

    Wednesday, January 17, 2018 11:04 PM


  • The clusterPinCallback is only fired for the clustered pushpins, not individual pushpins. This will usually be a small number of pushpins and will be fast. Setting custom icons on a pushpin (as in your second code block), will only render that icon when the individual pushpin is not in a cluster, which is likely to occur a lot more. If you use several different pushpin icons, then the performance will be slow as each icon would need to be downloaded before the pushpin is rendered. If several different icons need to be loaded at the same time, they will likely block each other as browsers only allow around 8 files from the same domain to be loaded at a time. That said, I also see you are using SVG's. Rendering SVG's on the map requires converting them into an image then drawing them on the canvas. Since SVG's can easily be modified on the fly, each pushpin is doing this SVG conversion individually which is likely adding a performance hit. Try using an image (png, gif, jpeg) as an icon to see if the performance issue disappears.

    [Blog] [twitter] [LinkedIn]

    Thursday, January 18, 2018 5:50 PM