When large number shapes plotted on Map then performance issue

Balasaheb Molawade 136 Reputation points
2024-11-14T12:21:47.6433333+00:00

Hi,

We are using the Bing Maps V8 control to plot shapes on the map. When we plot around 15,000 ZIP code boundaries, the map becomes less responsive. For example, zooming in takes time, and there is a delay when clicking on a shape before the click event is triggered. Is there any way to improve performance?

We have addressed the issue of large numbers of pushpins by using clustering. Is there a similar approach we can use to improve overall map performance?

If anyone has a solution, please let us know.

Looking forward to your reply.

Thanks!

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
743 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 18,686 Reputation points Microsoft Employee
    2024-11-14T17:29:02.7533333+00:00

    This is expected. The Bing Maps control was developed technology from over a decade ago, before WebGL had enough adoption to be used. It's one of the fastest web map controls that doesn't use WebGL ever created.

    That said, when it comes to rendering large data sets, there are a bunch of different strategies that have been used. Here are some different methods:

    1. Turn the data into an image (raster) tile layer on the server side. This approach will support rendering billions of shapes and was the main path used for rendering large data sets for a long time. GeoServer is a good open-source tool for doing this (and more). Once your data is an image tile layer, it will be easy to use it with most map platforms. However, it won't be interactive since it's an image. A way around this is to add a click event to your map and then use the clicked coordinate to the query the server to find what has intersected.
    2. Turn your data into a vector tile layer. This approach has the benefits of being able to support billions of shapes and still be interactive and allows for data driven styling on the client side (similar to setting the style/colors in your app currently. Most major map platforms have moved to this approach. Azure Postgres with PostGIS has built in support for returning query responses in vector tile format. There are also many open-source libraries available that can do this ahead of time for static data sets or be deployed as services. Bing Maps doesn't support vector tiles though. Azure Maps has native support for vector tiles, and the even the basemaps in Azure Maps are served using this format. Vector tiles is the best way currently to serve massive data sets to a front-end client and still have easy styling and interactivity. I have a demo where I render 3M+ building polygon's as extruded 3D polygons an apply data driven styling in the client for a rich interactive experience. I load the data as a vector tiles. You can try this demo here: https://tokyoinsights.azurewebsites.net/ (zoom in and the 3D buildings will appear).
    3. Use Azure Maps or the open source MapLibre web SDK (Azure Maps Web SDK has a similar API interface to Bing Maps). These SDKs use WebGL and are able to render tens of thousands of polygons with good performance. If the polygons aren't that complex (don't have a lot of points), it is even possible to render hundreds of thousands of polygons. Here is a code sample I use to try and break the Azure Maps Web SDK with a ton of data. It's a bit slow loading since it's downloads 130MB+ of data: https://samples.azuremaps.com/demos/large-geojson-files It renders 10K lines, 86K points, and 70K polygons. This sample is pretty basic and I haven't done any optimizations to it, so it could potentially be faster. That said, you likely won't want your users to be downloading 100MB+ of data, I wouldn't normally go more than 10 to 15MB if I know the users are in a country that has good adoption of high-speed internet. Otherwise, I limit myself to about 5MB. Generally, for anything larger than 10MB I usually look to go the vector tile route.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.