Plot 1000 ploygon shape faster and with proper map performace

Question

Hi,

We have the requirement to plot the shapes on a map. We store the collection of latitude/longitude in the table in text format. When the user clicks on the plot then we will read that lat/long collection and create a location object and then insert it into the polygon using the below code.

polygon = new Microsoft.Maps.Polygon(polygonArray, { fillColor: 'rgba(50,0,255,0.5)', strokeColor: 'rgba(0,0,255,0.5)' });

When there are more than 1000 polygon collection then it took time to plot the all polygon on map and some time map is not performing properly.

Is there any better and performant way.

Thanks

Answer 1

A couple of things can impact the performance when plotting polygons;

1. Adding polygons efficiently - In Bing Maps there are a couple of ways to add shapes to the map. The simplest is to use the map.entities.push method, however this is actually an older method carried over from previous versions of Bing Maps for backwards compatibility and isn't the most efficient way to add shapes to the map as each call to this method triggers a "repaint" of the map and is generally only fine to use when working with a couple hundred shapes. A more efficient method is to add your shapes to a data layer and then add the layer to the map which would only repaint the map once when adding. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/layers/data-layer-events This is often the most likely what you need to resolve your issue.
2. The number of coordinates in a polygon - The more coordinates, the more calculations the map has to make when it moves. Polygons with tens or even a couple hundred points aren't an issue. High resolution polygons can have thousands, if not millions of points in them. But when rendered, a single pixel on the map could contain tens or hundreds of coordinates (sometimes more) which hurts performance and provides no added value. In that scenario it is best to reduce the resolution of your polygons before adding them to the map. Ideally this would be done in the source data ahead of time. If that's not an option, you can leverage the spatial math module in Bing Maps and use the geometry reduce method. https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/reduceshape In extreme cases, when working with hundreds of thousands, or millions of polygons, there are other methods that can be used to bring the data more efficiently.
3. The number of polygons you have - Rendering a 1,000 polygons shouldn't be an issue, and you should be fine for upwards of 10,000 polygons. You said "polygon collection" though, so bringing this up in case you actually have 1,000 "groups" of polygons, and actually have way more than 10,000 thousand.
4. Browser version/device power - Of course, lower end devices and older browsers can also limit the browsers performance.

If the first option above doesn't work, please provide more details on the number and size of polygons you are working with.

If you are early in your development and have no hard requirement to use Bing Maps, another option is to consider using the newer Azure Maps platform. The Azure Maps Web SDK uses WebGL and is capable of rendering hundreds of thousands of shapes.

• https://azure.microsoft.com/en-us/services/azure-maps/
• https://learn.microsoft.com/en-us/azure/azure-maps/
• https://samples.azuremaps.com/