Search code examples
azure-mapsazuremapscontrol

AzureMapsControl - Is there a pre-render event?

This is for AzureMapsControl.Components which is a wrapper around Azure Maps.

<AzureMap> has a ton of events including dragend, pitchend, resize, etc. It also has the render event.

What I need to do is when the extent of the map changes, if it now includes areas not before included, I need to add any HtmlMarkers for that new area. Doing so on render strikes me as a bit late as I want that all added so that it will be included in the new render.

But I don't see a pre-render event. So to accomplish this do I need to have an event handler for all the events that can change the map extent?

Solution

  • If I understand correctly, your issue is that HTML markers that are out of the current map view are rendered after the map has moved them into view. This is on purpose as HTML markers are a legacy technology that is very slow. They are the reason why Azure Maps moved to a better rendering method (data sources and layers). HTML markers are DOM elements, and the more you have in a page, the slower the whole page gets. When you get more than a couple hundred it can become very noticeably slow on many systems. Older map controls that use HTML based markers generally wait until the marker location is in view before rendering it. You may not see this in many maps now a days as more have moved away from using HTML based markers. HTML markers only exist as a legacy items, mainly for those migrating older apps and should only be used for the following scenarios:

    • Your marker has some animation to it (e.g. CSS pulse, gif image...).
    • You want to drag the marker around. If you want to drag any pin/marker around, and you have a lot, it is better to render using layers, then swap out with a HTML marker when the user interacts with it.
    • You marker has a lot of complex CSS and converting it to a static image isn't really an option.

    Using a symbol layer and a data source is the recommended alternative to HTML markers if you are displaying an image as an icon. If you only need a circle, use the bubble layer. These layers can render tens of thousands of pins with good performance and render things as before they come into view depending on the settings you use (I've had some apps where I could render 500K pins). Rendering of these layers happen on the GPU while HTML markers use CPU rendering (that's DOM objects render in the browser). These layers also support data driven styling which is an advanced but very powerful feature that allows you to customize how things are rendered based on the data linked to the shape. You can also use multiple layers to render shapes (e.g. bubble layer for a circle with data driven color based on some property with an icon selected based on some other property in the shapes data using symbol layer) which allows for rich visualizations with very good performance.