Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion blazor/maps/markers.md
Original file line number Diff line number Diff line change
Expand Up @@ -696,6 +696,17 @@ Marker clustering can be enabled for each marker group in the map by using the [

N> When the `MapsMarkerClusterSettings` tag is enabled for a specific marker group, the `MapsMarkerClusterSettings` tag within the layers becomes ineffective.

**Detailed Use Case scenario:**

* **Context**: In the below example, have three marker groups—France, India, and the USA. Each country contains many locations spread across different states. Displaying every location marker at the world level makes the map cluttered and hard to read.

* **What clustering does**:
At the world zoom level, markers that are geographically close are clustered into a single symbol per region (e.g., France, India, the USA). The cluster icon can display the number of locations it represents. As the zoom level increases, a country-level cluster splits into smaller clusters based on proximity, and continued zooming reveals individual markers. For example, France splits into clusters around Paris and Normandy, and further zooming shows individual points such as the Eiffel Tower, the Louvre, and Notre‑Dame. The same behavior applies to India (e.g., Rajasthan, Uttar Pradesh) and the USA (e.g., Arizona, Nevada, Tennessee).
* **Manual expansion**:
If [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property is set to **true**, a user can click a cluster to expand it immediately and view its child markers without additional zooming. This is useful on touch devices or when you want quick access to the underlying points.
* **Per‑group customization**:
Each marker group (France/India/USA) can have its own `MapsMarkerClusterSettings`—different cluster icons, colors, sizes, and label styles—so clusters are visually distinct by group.

```cshtml
@using Syncfusion.Blazor.Maps

Expand Down Expand Up @@ -816,4 +827,4 @@ Tooltip is used to display more information about a marker on mouse over or touc
## See also

* [Add different types of markers](how-to/add-different-types-of-markers)
* [Use ObservableCollection for Marker Updates](https://support.syncfusion.com/kb/article/21355/how-to-use-observablecollection-for-marker-updates-in-blazor-maps)
* [Use ObservableCollection for Marker Updates](https://support.syncfusion.com/kb/article/21355/how-to-use-observablecollection-for-marker-updates-in-blazor-maps)
11 changes: 10 additions & 1 deletion blazor/maps/user-interactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,16 @@ documentation: ug

## Zooming

The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) property of the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) class. The [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) is increased or decreased dynamically based on zoom in and out interaction.
The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) property of the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) class. The [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) is increased or decreased dynamically based on zoom in and out interaction. [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) is linear. It represents a magnification multiplier relative to the initial “fit to viewport” view. Increasing the value linearly magnifies the map; decreasing it zooms out. Fractional values are allowed.

**How the map renders at the default:**

By default, [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) is 1. The map automatically fits the layer’s bounds into the available map area. You see the whole world or the whole shape layer centered and sized to the component.

**What happens when you change ZoomFactor:**

* **Zoom in**: Increasing ZoomFactor enlarges the content around the current center. Example: going from 1 to 2 approximately doubles the scale.
* **Zoom out**: Decreasing ZoomFactor reduces the scale, showing a larger area.

<b>Enable zooming</b>

Expand Down