Programatically expand map marker clusters

[Brad Knowles]

Is it possible to programmatically open marker clusters? The reason being is that when I create a pdf containing a map I would like to expand all of them so they appear on the pdf.

The web functionality is great since you can click on the cluster to see what it is but printing closed clusters doesn't reveal what is there.

Thanks

[Indumathi Ravi]

Hi Brad,

The Maps component does not support expanding the marker clusters programmatically, as the cluster expand functionality is a UI-based interaction. However, to print the Maps component without clusters, you can remove the clusters rather than expanding them.

To achieve this, you can disable the clustering using the “AllowClustering” property and call the “PrintAsync” method to print the Maps component. Once the print is completed, we again need to enable the clustering using the “AllowClustering” property. Please find the code snippet for the same below.

Code Snippet:

@using Syncfusion.Blazor.Maps

 

<button @onclick="PrintMap">Print</button>

 

<SfMaps @ref="maps" AllowPrint="true">

    <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" DataSource="LargestCities" Height="25" Width="25" TValue="City" AnimationDuration="0">

                </MapsMarker>

            </MapsMarkerSettings>

            <MapsMarkerClusterSettings AllowClusterExpand="true" AllowClustering="@cluster" Shape="Syncfusion.Blazor.Maps.MarkerType.Circle" Fill="#008CFF" Height="25" Width="25">

                <MapsLayerMarkerClusterLabelStyle Color="white"></MapsLayerMarkerClusterLabelStyle>

            </MapsMarkerClusterSettings>

            <MapsShapeSettings Fill="lightgray">

            </MapsShapeSettings>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

 

@code {

    SfMaps maps;

    public bool cluster = true;

    public async Task PrintMap()

    {

        cluster = false;

        await Task.Delay(200);

        await this.maps.PrintAsync();

        cluster = true;

    }

}

You can find the sample for demonstration from the below link.

https://blazorplayground.syncfusion.com/LZLpNMrKfhuwmKZI

IMPORTANT NOTE: A delay of 200 milliseconds is added to the above sample to allow the marker clusters to be removed. This will vary based on the number of markers in the layer.

Please let us know if the above solution meets your requirement.