none
Plotting 50 K records using cluster speed issue RRS feed

  • Question

  • Hi,

    We have developed an application where we have plotted more than 50K records but it takes too much time to show pushpins on map. We have used the cluster as well but it still takes too much time to display pushpins on Map after finishing the all processes.  

    After much troubleshooting, we have found that when we use the icon property of pushpin, it takes too much time to show pushpins on Map. When we remove icon property and plot pushpins based on default Bing maps images, it shows pushpins immediately.

    Could you please let us know the reason for the delay and how to resolve this issue.

    We have used the below code. In that we have used the .png  pushpin and SVG pushpin as well.

         var pushpinColl = [];                 

            var defaultSVGPushpin = '<svg id="Layer_1" data-name="Layer 1" width="19" height="29" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.18 27.84"><defs><style>.cls-1{fill:#1d71b8;}.cls-2{fill:#fcfcf4;}</style></defs><title>Pushpin icon</title><path d="M18.71,9.69a9.09,9.09,0,0,0-18.18,0,8.88,8.88,0,0,0,1,4h0L9.62,28.44l8.12-14.77h0A8.9,8.9,0,0,0,18.71,9.69Z" transform="translate(-0.53 -0.6)"/><path d="M16.62,9.37a7,7,0,1,1-7-7A7,7,0,0,1,16.62,9.37Z" transform="translate(-0.53 -0.6)"/></svg>';

                 

                $.each(records, function (index, data) {

                    var latitude = data["address1_latitude"];

                    var longitude = data["address1_longitude"];

                    if ((latitude != undefined && longitude != undefined) && (latitude != 0 || longitude != 0)) {

                        var svgImage = window.btoa ? "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(defaultSVGPushpin))) : "data:image/svg+xml;base64," + jQuery.base64.encode(unescape(encodeURIComponent(defaultSVGPushpin)));

                           

                        loc = new Microsoft.Maps.Location(latitude, longitude);

                        var pin = new Microsoft.Maps.Pushpin(loc, {

                            icon: svgImage,

                            //  icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',

                            anchor: new Microsoft.Maps.Point(9, 29)

                        });                       

                        pushpinColl.push(pin);                     

                    }

                });     

          

            Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {

                //Create a ClusterLayer with options and add it to the map.

                clusterLayer = new Microsoft.Maps.ClusterLayer(pushpinColl, {

                    clusteredPinCallback: createCustomClusteredPin,

                    gridSize: 80

                });

                map.layers.insert(clusterLayer);

            });       

        }  

    Please check and help us to resolve this issue.

    Waiting for your reply.

    Thanks!


    Balasaheb

    Monday, September 16, 2019 11:48 AM

All replies

  • Hi Balasaheb,

    I have escalated this to the Microsoft Maps & Geospatial Team in charge of the Bing Maps Web Control to review.

    Sincerely,

    IoTGirl

    Monday, September 16, 2019 5:47 PM
    Owner
  • There are two problems. 

    1) This line "var svgImage = window.btoa ? ...." is executed for every pushpin (in your case it is executed 50,000 times), whereas the result is actually always the same. By moving it outside of the loop, I was able to save about 1 second.

    2) We spotted an internal inefficiency in Bing map SDK and we are evaluating what is the best way to fix.

    Which browser/version are you using?

    Monday, September 16, 2019 7:57 PM
  • Hi,

    Thanks for your reply.

    Yes we can move "var svgImage = window.btoa" outside of loop but it did not make large effect.

    Can you please let us know when bing map team able to fix this issue or you have any alternative way for the same.

    Thanks!

    Sam


    Balasaheb

    Tuesday, September 17, 2019 6:42 AM
  • What browser and which version you are using?
    Tuesday, September 17, 2019 5:03 PM
  • Hi,

    We are using Google Chrome (Version 77.0.3865.75).

    Thanks!

     


    Balasaheb

    Wednesday, September 18, 2019 5:10 AM
  • We did first enhancement in experimental branch, please give a try by adding branch parameter:

    https://www.bing.com/api/maps/mapcontrol/?branch=experimental

    In internal testing, 50k pushpin used to take around 13sec to render, now it has been cut down to about 5s.

    More optimizations are on the way. Thanks.

    Thursday, September 19, 2019 5:00 PM
  • Hi,

    Thanks for your reply. When we changed to "?branch=experimental" then it increase the performance.

    We will do more testing and let you know how it goes.

    Thanks!

     


    Balasaheb

    Monday, September 23, 2019 9:29 AM