How to apply marker cluster only to specific markers?

[Pavel lavi]

Hi,

Given 2 types of markers, List and List, I'm trying to apply cluster configuration only on List.

Meaning, List should not be clustered. Note: City class inherit from TPoint

How can i configure marker cluster settings to specific type or marker tag?

Added sample project.


<SfMaps>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Diamond" DataSource="TPoints" Height="15" Width="15" TValue="TPoint">
                    </MapsMarker>
                <MapsMarker Visible="true" Shape="MarkerType.Balloon" DataSource="LargestCities" Height="15" Width="15" TValue="City">
                </MapsMarker>
            </MapsMarkerSettings>
            <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Circle" Fill="#008CFF" Height="25" Width="25">
                <MapsLayerMarkerClusterLabelStyle Color="white"></MapsLayerMarkerClusterLabelStyle>
            </MapsMarkerClusterSettings>
            <MapsShapeSettings Fill="lightgray">
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>


@code {


    public class City : TPoint
    {
        public string Name { get; set; }
        public double Area { get; set; }
    };


    private List<City> LargestCities = new List<City>
    {
        new City { Latitude = 40.6971494, Longitude = -74.2598747, Name = "New York", Area = 8683 },
        new City { Latitude = 40.0024137, Longitude = -75.2581194, Name = "Philadelphia", Area = 4661 },
        new City { Latitude = 42.3142647, Longitude = -71.11037, Name = "Boston", Area = 4497 },
        new City { Latitude = 42.3526257, Longitude = -83.239291, Name = "Detroit", Area = 3267 },
        new City { Latitude = 47.2510905, Longitude = -123.1255834, Name = "Washington", Area = 2996 },
        new City { Latitude = 25.7823907, Longitude = -80.2994995, Name = "Miami", Area = 2891 },
        new City { Latitude = 19.3892246, Longitude = -70.1305136, Name = "San Juan", Area = 2309 }
    };


    public class TPoint
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    };


    private List<TPoint> TPoints = new List<TPoint>
    {
        new TPoint { Latitude = 40.6999494, Longitude = -74.2598747 }
    };


}

Attachment: MapsSample_d49513f1.zip

[Indumathi Ravi]

Hi Pavel,

The Maps component does not support enabling marker clusters for each marker groups added in the map. We have considered this as a feature and added it to our features request list. We do not have immediate plans to implement this feature. However, we will include this implementation in any of our upcoming releases. Meanwhile, please find the feedback link below to keep track of this feature.

https://www.syncfusion.com/feedback/49186

[Indumathi Ravi]

Hi Pavel,

We have implemented the requirement - “Support to add marker cluster for each marker group in the Maps”. The fix is included in our Essential Studio® 2024 Volume 4 release v28.1.33 which is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/195512/essential-studio-2024-volume-4-main-release-v28-1-33-is-available-for-download

To achieve your scenario, you can use the MapsMarkerClusterSettings tag within the MapsMarker tag. This will cluster the markers for each marker group in the Maps component. Additionally, you can customize each marker cluster individually. Below is the code snippet demonstrating this implementation.

Code Snippet:

@using Syncfusion.Blazor.Maps

 

<SfMaps>

        //..

       //..

        <MapsLayers>

            <MapsLayer  ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json" }' TValue="string">

                <MapsShapeSettings Fill="#C3E6ED">

                </MapsShapeSettings>

                <MapsMarkerSettings>

                    <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataFrance" Shape="MarkerType.Circle" Fill="#b38600" Height="15" Width="15">

                        <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>

                        <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="cluster-france.svg" Height="40" Width="40">

                            <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>

                        </MapsMarkerClusterSettings>

                    </MapsMarker>

                //..

               //..

                </MapsMarkerSettings>

            </MapsLayer>

        </MapsLayers>

    </SfMaps>

 

Meanwhile, you can find the online demo link below for reference.

https://blazor.syncfusion.com/demos/maps/osm-with-marker-clustering?theme=fluent2

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.