none
What Pin Building is Fastest? RRS feed

  • Question

  • I'm trying to set up a map to display points of four different types. There are a lot of pins (about half a million over the whole country) so I just want to show the pins in the area I'm zoomed to then switch to something else when zoomed too far out.  I would like to stick to pins for as long as I can, though, and update them as the map scrolls around.

    It's working out pretty well but I noticed that the biggest thing slowing my code down is actually adding pins to the layer.  When I add the default pin, my performance is about 4 times faster than when I add a pin that has an inline SVG circle for the icon.  Now that has me wondering what the fastest method is.  Could I get my pins in faster by using a different type of icon - like referencing an SVG or image file?  Will faster loading methods end up slowing down the map itself?  Just what is the fastest way to build a pin?

    Tuesday, May 2, 2017 4:13 PM

Answers

  • When using pushpins the fastest option is to use a url to an image as an icon. When you use SVG's they are converted into an image by the browser and then rendered on the map canvas which has a slight overhead. That said, you likely will be limited to rendering around 64K pushpins on the map (assuming you are adding events to them). If you want to be able to render larger data sets I recommend using a custom overlay and a canvas. Here is an example which strips away a lot of the extra features of pushpins as a trade off for performance: http://bingmapsv8samples.azurewebsites.net/#Canvas%20Layer

    If this still isn't fast enough for you then you will want to look at using server side rendering of your data as a tile layer. Using that approach I have rendered data sets with millions of points. I have one customer who is using this for a dataset of half a billion points. I have a white paper on how to do this here: https://1drv.ms/b/s!AgFqp4QkIjUNloYCwQmwpbyH8dRs6A


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, May 2, 2017 4:30 PM
    • Marked as answer by Zloth X Tuesday, May 2, 2017 5:10 PM
    Tuesday, May 2, 2017 4:30 PM

All replies

  • When using pushpins the fastest option is to use a url to an image as an icon. When you use SVG's they are converted into an image by the browser and then rendered on the map canvas which has a slight overhead. That said, you likely will be limited to rendering around 64K pushpins on the map (assuming you are adding events to them). If you want to be able to render larger data sets I recommend using a custom overlay and a canvas. Here is an example which strips away a lot of the extra features of pushpins as a trade off for performance: http://bingmapsv8samples.azurewebsites.net/#Canvas%20Layer

    If this still isn't fast enough for you then you will want to look at using server side rendering of your data as a tile layer. Using that approach I have rendered data sets with millions of points. I have one customer who is using this for a dataset of half a billion points. I have a white paper on how to do this here: https://1drv.ms/b/s!AgFqp4QkIjUNloYCwQmwpbyH8dRs6A


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, May 2, 2017 4:30 PM
    • Marked as answer by Zloth X Tuesday, May 2, 2017 5:10 PM
    Tuesday, May 2, 2017 4:30 PM
  • A tile layer would be perfect, thanks!

    Tuesday, May 2, 2017 5:10 PM