Articles in this section
Category / Section

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

3 mins read

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.

    
    /// <summary>
    /// The custom marker
    /// </summary>
    public class CustomMarker : MapMarker
    {
        /// <summary>
        /// Gets or sets the image source
        /// </summary>
        public ImageSource ImageName { get; set; }
    }
 

 

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

   <maps:SfMaps >
            <maps:SfMaps.Layers>
                <maps:ImageryLayer x:Name="imageryLayer"
                                                  ZoomLevelChanging="ImageryLayer_ZoomLevelChanging">
                </maps:ImageryLayer>
            </maps:SfMaps.Layers>
        </maps:SfMaps>

 

C#

 
    /// <summary>
        /// This method is called whenever the zoom level changed
        /// </summary>
        /// <param name="sender">The sender</param>
        /// <param name="e">The zoom level changing event args</param>
        private void ImageryLayer_ZoomLevelChanging(object   
                                          sender,ZoomLevelChangingEventArgs e)
        {
 
        }

 

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

C#

  public MainPage()
        {
            InitializeComponent();
            imageryLayer.Markers.Add(new CustomMarker() { Latitude = "20.766387",
                                                         Longitude = "78.750000",
                                                         ImageName =  
                                                         ImageSource.FromResource("Grouping_maps.Icons.pin.png") });
        }

 

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

XAML

<maps:ImageryLayer.MarkerTemplate>
                        <OnPlatform x:TypeArguments="DataTemplate">
                            <On Platform="Android, iOS">
                            <DataTemplate>
                                <Grid>
                                    <Image Source="{Binding ImageName}" 
                                                 HorizontalOptions="Start" VerticalOptions="Center"
                                                 HeightRequest="30" WidthRequest="30"/>
                                </Grid>
                            </DataTemplate>
                        </On>
                        <On Platform="UWP">
                            <DataTemplate>
                                <Grid Padding="-14,-14, 0, 0">
                                    <Image Source="{Binding ImageName}" HorizontalOptions="Start"  
                                                  VerticalOptions="Center"
                                                  HeightRequest="30" WidthRequest="30"/>
                                </Grid>
                            </DataTemplate>
                        </On>
                        </OnPlatform>
                    </maps:ImageryLayer.MarkerTemplate>
 

 

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#

   
        /// <summary>
        /// This method is called whenever the zoom level changes and the markers can be grouped based on your requirement with this event
        /// </summary>
        /// <param name="sender">The sender</param>
        /// <param name="e">The zoom level changing event args</param>
        private void ImageryLayer_ZoomLevelChanging(object sender, ZoomLevelChangingEventArgs e)
        {
            // Marker is added based on the zoom level
            if (e.CurrentLevel <= 3)
            {
                if(imageryLayer.Markers.Count > 1)
                {
                    imageryLayer.Markers.Clear();
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "20.766387", Longitude = "78.750000", ImageName = ImageSource.FromResource("Grouping_maps.Icons.pin.png") });
                }          
            }
 
            if (e.CurrentLevel >= 4)
            {
                if (imageryLayer.Markers.Count == 1)
                {
                    imageryLayer.Markers.Clear();
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "12.331952", Longitude = "78.002930", ImageName = ImageSource.FromResource("Grouping_maps.Icons.one.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "17.678045", Longitude = "78.793945", ImageName = ImageSource.FromResource("Grouping_maps.Icons.two.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "18.346705", Longitude = "73.608398", ImageName = ImageSource.FromResource("Grouping_maps.Icons.three.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "21.486297", Longitude = "84.418945", ImageName = ImageSource.FromResource("Grouping_maps.Icons.four.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "22.139076", Longitude = "72.905273", ImageName = ImageSource.FromResource("Grouping_maps.Icons.five.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "26.463197", Longitude = "81.166992", ImageName = ImageSource.FromResource("Grouping_maps.Icons.six.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "26.463197", Longitude = "74.487305", ImageName = ImageSource.FromResource("Grouping_maps.Icons.seven.png") });
                    imageryLayer.Markers.Add(new CustomMarker() { Latitude = "28.952879", Longitude = "77.915039", ImageName = ImageSource.FromResource("Grouping_maps.Icons.eight.png") });
                }
 
            }
        }

 

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

Grouped the markers using xamarin SfMaps

 

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

Grouped the markers using xamarin SfMaps

 

You can download the demo sample from this link.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied