How to group the markers based on zoom level in the imagery layer of the SfMaps control

This article describes how to display individual markers in a corresponding location at high zoom level. While zooming out, the individual markers are combined to form a single group and displayed as a single marker.

Solution

You can group the marker of imagery layer based on its zoom level by subscribing the ZoomLevelChanging event of the imagery layer and dynamically changing the markers based on the current zoom level.

Step 1: Initialize the CustomMarker class as demonstrated in the following code sample.

Step 2: Initialize the SfMaps control and add the ImageryLayer into the layer collection of the control. Then, subscribe the ZoomLevelChanging event as demonstrated in the following code sample.

XAML

C#

Step 3: Add CustomMarker into the Markers collection of ImageryLayer as demonstrated in the following code sample.

C#

Step 4: Set template to markers added into the collection using the MarkerTemplate property of ImageryLayer as demonstrated in the following code sample.

XAML

Step 5: In the ZoomLevelChanging event, based on the CurrentLevel, add the markers and remove from marker collection to achieve marker grouping based on the zoom level.

In the following code sample, single marker is maintained for zoom level 3 and below. For zoom level 4 and above, multiple markers are maintained.

C#

The following screenshot illustrates the output when zoom level is 1.

The following screenshot illustrates the output when zoom level is 4.

You can download the demo sample from this link.