diff --git a/blazor/maps/accessibility.md b/blazor/maps/accessibility.md index f8dd8ae3a8..7ddc115ad0 100644 --- a/blazor/maps/accessibility.md +++ b/blazor/maps/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Maps component and much more details. +description: Check out and learn here all about accessibility in the Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor Maps Component -The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). +The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component adheres to widely adopted accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles). -The accessibility compliance for the Blazor Maps component is outlined below. +The accessibility compliance for the Blazor Maps component is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Maps component is outlined below. | [Right-To-Left Support](../common/accessibility) | Not Applicable | | [Color Contrast](../common/accessibility) | Yes | | [Mobile Device Support](../common/accessibility) | Yes | -| [Keyboard Navigation Support](../common/accessibility) |Yes | +| [Keyboard Navigation Support](../common/accessibility) | Yes | | [Axe-core Accessibility Validation](../common/accessibility) | Yes | + @code { SfMaps Maps; public bool IsInitialRender { get; set; } @@ -270,6 +272,7 @@ When you drag and resize the Dialog component, the Maps component is not notifie this.ShowButton = true; IsInitialRender = false; } + private void OnClicked() { this.Visibility = true; @@ -286,8 +289,8 @@ When the Maps component renders within the Accordion component, its rendering be When you expand the Accordion component, the Maps component is not notified, so the Maps are not properly rendered within the Accordion. To avoid this scenario, the Maps component's `Refresh` method must be called in the Accordion's [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanded) event. - ```cshtml + @using Syncfusion.Blazor.Maps @using Syncfusion.Blazor.Navigations @@ -348,6 +351,7 @@ When you expand the Accordion component, the Maps component is not notified, so + -@code{ +@code { SfMaps MapsOne; SfMaps MapsTwo; SfMaps MapsThree; @@ -410,4 +414,4 @@ When you expand the Accordion component, the Maps component is not notified, so } ``` -![Blazor Maps inside Accordion component](../images/blazor-maps-with-accordion.png) \ No newline at end of file +![Blazor Maps inside Accordion component](../images/blazor-maps-with-accordion.png) diff --git a/blazor/maps/internationalization.md b/blazor/maps/internationalization.md index b59f08a69d..8c37e145f7 100644 --- a/blazor/maps/internationalization.md +++ b/blazor/maps/internationalization.md @@ -1,7 +1,7 @@ --- layout: post title: Globalization in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about globalization in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to configure and apply globalization feature in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -9,17 +9,19 @@ documentation: ug # Globalization in Blazor Maps Component -Maps provide support for internationalization for the following elements. +Maps support internationalization for the following elements: * Data label * Tooltip ## Globalization -Globalization is the process of designing and developing a component that works in different cultures or locales. It can be provided to the Blazor server-side and client-side applications. Refer to [Blazor server-side](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-server-application) and [Blazor client-side](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application) sections for configuring the globalization for the Maps component. It is used to globalize number, date, time values in -Maps component using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property in the Maps component. +Globalization is the process of designing and developing a component that works across cultures and locales. It is available for both Blazor Server and Blazor WebAssembly applications. Refer to the Blazor Server and Blazor WebAssembly localization sections for configuring globalization for the Maps component: [Enable localization in Blazor Server applications](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-server-application) and [Enable localization in Blazor WebAssembly applications](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application). + +Number, date, and time values in the Maps component can be globalized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property of the Maps component. ```cshtml + @using Syncfusion.Blazor.Maps @@ -43,25 +45,28 @@ Maps component using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.B public string Country { get; set; } public string Membership { get; set; } public double Population { get; set; } - }; - public List CountryData = new List{ - new MapDataSource { Country= "China", Membership= "Permanent", Population=20000 }, - new MapDataSource { Country= "France",Membership= "Permanent", Population=30000 }, - new MapDataSource { Country= "Russia",Membership= "Permanent", Population=40000 }, - new MapDataSource { Country= "Kazakhstan",Membership= "Non-Permanent", Population=50000 }, - new MapDataSource { Country= "Poland",Membership= "Non-Permanent", Population=60000 }, - new MapDataSource { Country= "Sweden",Membership= "Non-Permanent", Population=70000 } + } + + public List CountryData = new List { + new MapDataSource { Country = "China", Membership = "Permanent", Population = 20000 }, + new MapDataSource { Country = "France", Membership = "Permanent", Population = 30000 }, + new MapDataSource { Country = "Russia", Membership = "Permanent", Population = 40000 }, + new MapDataSource { Country = "Kazakhstan", Membership = "Non-Permanent", Population = 50000 }, + new MapDataSource { Country = "Poland", Membership = "Non-Permanent", Population = 60000 }, + new MapDataSource { Country = "Sweden", Membership = "Non-Permanent", Population = 70000 } }; } + ``` ![Blazor Maps with Gloabalization](./images/Internationalization/blazor-maps-globalization.PNG) ## Numeric Format -The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property in the [SfMaps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) class. In the following example, the tooltip is globalized to **German** culture. When setting the [EnableGroupingSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_EnableGroupingSeparator) property as **true**, the numeric text in the Maps separates with the comma separator. +Numeric formats such as currency and percentage can be displayed in tooltips and data labels using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property of the [SfMaps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) class. In the following example, the tooltip is globalized to the German culture. When the [EnableGroupingSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_EnableGroupingSeparator) property is set to **true**, numeric text in the Maps component includes the culture-specific grouping separator. ```cshtml + @using Syncfusion.Blazor.Maps @@ -85,20 +90,22 @@ The numeric formats such as currency, percentage and so on can be displayed in t public string Country { get; set; } public string Membership { get; set; } public double Population { get; set; } - }; - public List CountryData = new List{ - new MapDataSource { Country= "China", Membership= "Permanent", Population= 38332521}, - new MapDataSource { Country= "France", Membership= "Permanent", Population= 19651127 }, - new MapDataSource { Country= "Russia", Membership= "Permanent", Population= 3090416}, - new MapDataSource { Country= "Kazakhstan", Membership= "Non-Permanent", Population= 1232521}, - new MapDataSource { Country= "Poland", Membership= "Non-Permanent", Population= 90332521}, - new MapDataSource { Country= "Sweden", Membership= "Non-Permanent", Population= 383521} + } + + public List CountryData = new List { + new MapDataSource { Country = "China", Membership = "Permanent", Population = 38332521 }, + new MapDataSource { Country = "France", Membership = "Permanent", Population = 19651127 }, + new MapDataSource { Country = "Russia", Membership = "Permanent", Population = 3090416 }, + new MapDataSource { Country = "Kazakhstan", Membership = "Non-Permanent", Population = 1232521 }, + new MapDataSource { Country = "Poland", Membership = "Non-Permanent", Population = 90332521 }, + new MapDataSource { Country = "Sweden", Membership = "Non-Permanent", Population = 383521 } }; } + ``` ![Blazor Maps with Numeric Format](./images/Internationalization/blazor-maps-numeric-format.png) ## See also -* [Localization in Blazor Maps component](https://blazor.syncfusion.com/documentation/maps/localization) \ No newline at end of file +* [Localization in Blazor Maps component](https://blazor.syncfusion.com/documentation/maps/localization) diff --git a/blazor/maps/layers.md b/blazor/maps/layers.md index f5254a637b..4e2a48321b 100644 --- a/blazor/maps/layers.md +++ b/blazor/maps/layers.md @@ -1,7 +1,7 @@ --- layout: post title: Layers in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about the layers in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to configure layers in the Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,19 +9,20 @@ documentation: ug # Layers in Blazor Maps Component -The Maps component is rendered through [MapsLayers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html) and any number of layers can be added to the Maps. +The Maps component is rendered through [MapsLayers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html), and any number of layers can be added to Maps. ## Multilayer -The Multilayer support allows loading multiple shape files and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers of the Maps. Multiple layers can be added as **SubLayer** over the main layers using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Type.html) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The multilayer feature supports loading multiple shape files and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers. Multiple layers can be added as a **SubLayer** over the main layers using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Type.html) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). ## Sublayer -Sublayer is a type of shape file layer. It allows loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to view the geographic features such as rivers, valleys and cities in a map of a country. Similar to the main layer, elements in the Maps such as markers, bubbles, color mapping and legends can be added to the sub-layer. +Sublayer is a type of shape file layer. It supports loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to display geographic features such as rivers, valleys, and cities in a country map. Similar to the main layer, elements such as markers, bubbles, color mapping, and legends can be added to the sublayer. -In this example, the United States map shape is used as shape data by utilizing **usa.ts** file, and **texas.ts** and **california.ts** files are used as sub-layers in the United States map. +In this example, the United States map shape is used as shape data from the **usa.ts** file, and **texas.ts** and **california.ts** files are used as sublayer in the United States map. ```csharp + @using Syncfusion.Blazor.Maps @@ -32,28 +33,30 @@ In this example, the United States map shape is used as shape data by utilizing + Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string"> + Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string"> + ``` ![Blazor Maps with Sublayer](./images/Layers/blazor-maps-sublayer.png) ## Displaying different layer in the view -Multiple shape files and map providers can be loaded simultaneously in Maps. The [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) property is used to determine which layer on the user interface should be displayed. This property is used for the Maps drill-down feature, so when the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value is changed, the corresponding shape is loaded. In this example, two layers can be loaded with the World map and the United States map. Based on the given [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value the corresponding shape will be loaded in the user interface. If the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value is set to **0**, then the world map will be loaded. +Multiple shape files and map providers can be loaded simultaneously. The [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) property determines which layer is displayed. This property also supports the drill-down feature; when the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value changes, the corresponding shape is loaded. In this example, two layers are configured for the world map and the United States map. Based on the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value, the corresponding shape is rendered. If [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) is set to **0**, the world map is loaded. ```csharp + @using Syncfusion.Blazor.Maps @* To switch the layer, set `BaseLayerIndex` *@ @@ -63,17 +66,18 @@ Multiple shape files and map providers can be loaded simultaneously in Maps. The + ``` ![Blazor Maps with Multiple Layer](./images/Layers/blazor-maps-multiple-layer.png) ## Rendering custom shapes -Custom shapes (also known as custom maps) can be rendered in Maps to represent bus seat booking, cricket stadium, basic home plan/sketch, and so on. To accomplish this, a JSON file in GeoJSON format with proper geometries must be created manually or with the assistance of any online map vendor. The GeoJSON file created must be set to the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the Maps layer, and the [GeometryType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_GeometryType) must be set as **GeometryType.Normal**. +Custom shapes (also known as custom maps) can be rendered in Maps to represent bus seat booking, cricket stadiums, basic home plans/sketches, and similar layouts. To achieve this, create a JSON file in GeoJSON format with proper geometries manually or with an online map vendor. Set the created GeoJSON file to the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in the Maps layer, and set [GeometryType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_GeometryType) to **GeometryType.Normal**. -Please refer this [link](https://cdn.syncfusion.com/maps/map-data/seat.json) for an example GeoJSON file containing information about bus seat selection. +Refer to the sample GeoJSON file for bus seat selection: [Seat selection GeoJSON](https://cdn.syncfusion.com/maps/map-data/seat.json). -Please refer this [link](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5) for more information and a live demonstration. +For a live demonstration, see [Bus seat selection demo](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5). ## See also diff --git a/blazor/maps/legend.md b/blazor/maps/legend.md index dda89ef01a..7f51a49fe8 100644 --- a/blazor/maps/legend.md +++ b/blazor/maps/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about the legend in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to configure and customize legends in the Syncfusion Blazor Maps component for effective data visualization. platform: Blazor control: Maps documentation: ug @@ -9,23 +9,24 @@ documentation: ug # Legend in Blazor Maps Component -A Legend is a visual representation of the symbols used on the Maps. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend visually explains the symbols used on Maps. It uses colors, shapes, or other identifiers based on the data and helps interpret what the Maps display. Enable legends by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ## Modes of legend -Legend had two types of mode. +Legends support two modes. 1. [**Default**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendMode.html#Syncfusion_Blazor_Maps_LegendMode_Default) mode 2. [**Interactive**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendMode.html#Syncfusion_Blazor_Maps_LegendMode_Interactive) mode ### Default mode -Default mode legends have symbols with legend labels which are used to identify the shape or bubble or marker color. Enable this option by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Default**. +Default mode shows symbols with legend labels that identify the color of a shape, bubble, or marker. Enable it by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **Default**. ### Interactive mode -The legends can be made interactive with an arrow mark indicating the exact range color in the legend when the mouse hovers over the corresponding shapes. To enable this type of mode by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Interactive**. The [InvertedPointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_InvertedPointer) property is used to enable or disable the visibility of the inverted pointer in interactive legend in Maps. +Interactive legends display an arrow pointer indicating the exact range color when hovering over corresponding shapes. Enable this by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **Interactive**. Use the [InvertedPointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_InvertedPointer) property to show or hide the inverted pointer in interactive legends. ```cshtml + @using Syncfusion.Blazor.Maps @@ -47,49 +48,51 @@ The legends can be made interactive with an arrow mark indicating the exact rang @code { private List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"} + new UNCouncilCountry { Name "China", Membership = "Permanent" }, + new UNCouncilCountry { Name = "France", Membership = "Permanent" }, + new UNCouncilCountry { Name = "Russia", Membership = "Permanent" }, + new UNCouncilCountry { Name = "Kazakhstan", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "Poland", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "Sweden", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "United Kingdom", Membership = "Permanent" }, + new UNCouncilCountry { Name = "United States", Membership = "Permanent" } }; public class UNCouncilCountry { public string Name { get; set; } public string Membership { get; set; } - }; + } } + ``` ![Blazor Maps with Interactive Legend](./images/Legend/blazor-maps-interactive-legend.png) ## Positioning of the legend -The legend can be positioned in the following two ways: +The legend can be positioned in two ways: * Absolute position * Dock position Absolute position -The legend of the Maps can be positioned using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Y) properties in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). For positioning the legend based on co-ordinates corresponding to Maps, the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property is set as **Float**. +Position the legend using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Y) properties in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). To position the legend based on coordinates relative to Maps, set [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) to **Float**. Dock position -Legends are positioned in the following locations within the container. The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) is used to set these options in Maps. +Legends can be docked within the container using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) at the following locations: * Top * Left * Bottom * Right -The above four positions can be aligned with combination of **Near**, **Center**, and **Far** using [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). So, the legend can be aligned to 12 positions. +These positions can be aligned using **Near**, **Center**, or **Far** with the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html), providing 12 alignment combinations. ```cshtml + @using Syncfusion.Blazor.Maps @@ -108,6 +111,7 @@ The above four positions can be aligned with combination of **Near**, **Center** + ``` N> Refer [code block](#legend-mode) to know the property value of `securityCouncilDetails`. @@ -116,11 +120,12 @@ N> Refer [code block](#legend-mode) to know the property value of `securityCounc ## Legend for shapes -Legend for shapes can be generated from color mapping types such as equal color mapping, range color mapping and desaturation color mapping. +Legends for shapes can be generated from equal, range, and desaturation color mappings. -The following code snippet demonstrates the equal color mapping legends for the shapes. To bind the **MembershipDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html), set the value of [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) to **name** and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to **Country**. To enable equal color mapping, set the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Finally, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true**. The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) property in [MapsColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) is used to set the text name for legend in Maps. +The following code demonstrates equal color mapping legends for shapes. To bind the **MembershipDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html), set [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) to **name** and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to **Country**. To enable equal color mapping, configure [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Finally, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. Use the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) property in [MapsColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) to set legend text. ```cshtml + @using Syncfusion.Blazor.Maps @@ -139,29 +144,30 @@ The following code snippet demonstrates the equal color mapping legends for the -@code{ - +@code { public class UNCouncil { public string Country { get; set; } public string Membership { get; set; } } + private List MembershipDetails = new List { - new UNCouncil { Country= "China", Membership= "Permanent" }, - new UNCouncil { Country= "France",Membership= "Permanent" }, - new UNCouncil { Country= "Russia",Membership= "Permanent" }, - new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" }, - new UNCouncil { Country= "Poland",Membership= "Non-Permanent" }, - new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" } + new UNCouncil { Country = "China", Membership = "Permanent" }, + new UNCouncil { Country = "France", Membership = "Permanent" }, + new UNCouncil { Country = "Russia", Membership = "Permanent" }, + new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" }, + new UNCouncil { Country = "Poland", Membership = "Non-Permanent" }, + new UNCouncil { Country = "Sweden", Membership = "Non-Permanent" } }; } + ``` ![Blazor Maps with Legend](./images/Legend/blazor-maps-legend.png) ### Legend shape -Maps supports the following types of legend shapes. The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Shape) property in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) can be used to change the type of legend shapes. +Maps supports the following legend shapes. Use the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Shape) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to change the legend shape. * Circle * Rectangle @@ -174,26 +180,27 @@ Maps supports the following types of legend shapes. The [Shape](https://help.syn * Pentagon * InvertedTriangle -The shape of legends can be customized using the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeHeight), [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeWidth), [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapePadding) properties and [MapsLegendShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendShapeBorder.html). +Customize legend shapes using [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeHeight), [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeWidth), [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapePadding) properties and [MapsLegendShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendShapeBorder.html). ### Customization -The following properties and classes are available in legend to customize the legend and legend text in Maps. - -* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Background) - To customize the background color of the Legend. -* [MapsLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendBorder.html) - To customize the color and width of the border for the Legend. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Fill) - To apply the color for the Legend. -* [LabelDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelDisplayMode) - To customize the display mode for the Legend text. -* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelPosition) - To customize the position of the Legend text. -* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Orientation) - To customize the orientation of the Legend. -* [MapsLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTextStyle.html) - To customize the text style for Legend. -* [MapsLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitle.html) - To apply the title for the Legend. -* [MapsLegendTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitleStyle.html) - To customize the style of the title for the Legend. -* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Height) - To customize the height of the Legend. -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Width) - To customize the width of the Legend. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Opacity) - To apply the opacity to the Legend. +Use the following properties and classes to customize the legend and legend text in Maps. + +* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Background) - Sets the legend background color. +* [MapsLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendBorder.html) - Configures the legend border color and width. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Fill) - Applies a color to the legend. +* [LabelDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelDisplayMode) - Controls how legend text is displayed. +* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelPosition) - Positions legend text. +* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Orientation) - Sets the legend orientation. +* [MapsLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTextStyle.html) - Customizes legend text style. +* [MapsLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitle.html) - Adds a legend title. +* [MapsLegendTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitleStyle.html) - Customizes the legend title style. +* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Height) - Sets the legend height. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Width) - Sets the legend width. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Opacity) - Applies opacity to the legend. ```cshtml + @using Syncfusion.Blazor.Maps @@ -215,33 +222,36 @@ The following properties and classes are available in legend to customize the le -@code{ +@code { public class UNCouncil { public string Country { get; set; } public string Membership { get; set; } } + private List MemberShipDetails = new List { - new UNCouncil { Country= "China", Membership= "Permanent" }, - new UNCouncil { Country= "France",Membership= "Permanent" }, - new UNCouncil { Country= "Russia",Membership= "Permanent" }, - new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" }, - new UNCouncil { Country= "Poland",Membership= "Non-Permanent" }, - new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" } + new UNCouncil { Country = "China", Membership = "Permanent" }, + new UNCouncil { Country = "France", Membership = "Permanent" }, + new UNCouncil { Country = "Russia", Membership = "Permanent" }, + new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" }, + new UNCouncil { Country = "Poland", Membership = "Non-Permanent" }, + new UNCouncil { Country = "Sweden", Membership = "Non-Permanent" } }; } + ``` ![Blazor Maps with Custom Legend](./images/Legend/blazor-maps-custom-legend.png) ### Legend for items excluded from color mapping -The legend can be enabled for items excluded from the color mapping using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). +Enable legends for items excluded from color mapping using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). -In the following example, color mapping is added for the ranges from **0** to **200**. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property alone in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). To enable legend for these items, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +In the following example, color mapping is defined for ranges from **0** to **200**. Records outside this range do not receive color mapping. To color those excluded items, set only the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). To enable legends for these items, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -260,13 +270,14 @@ In the following example, color mapping is added for the ranges from **0** to ** -@code{ +@code { public class PopulationDetail { public string Name { get; set; } public double Population { get; set; } public double Density { get; set; } - }; + } + private List populationDetails = new List { new PopulationDetail { @@ -286,15 +297,17 @@ In the following example, color mapping is added for the ranges from **0** to ** } }; } + ``` ![Blazor Maps Legend for Excluded Color Mapping Range](./images/Legend/blazor-maps-legend-exclude-color-mapping.png) ### Hiding desired legend items -Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide the desired legend items in Maps. If the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property is set to **false**, the legend item will be hidden, otherwise it will be visible. +Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide legend items. If [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) is set to **false**, the legend item is hidden. Otherwise, it is visible. ```cshtml + @using Syncfusion.Blazor.Maps @@ -313,6 +326,7 @@ Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map + ``` N> Refer [code block](#legend-for-items-excluded-from-color-mapping) to know the property value of `PopulationDetails`. @@ -321,9 +335,10 @@ N> Refer [code block](#legend-for-items-excluded-from-color-mapping) to know the ### Hide legend items based on data source value -Depending on the boolean values provided in the data source, the legend items will be hidden or visible. Bind the field name that contains the visibility state in the data source to the [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShowLegendPath) property of the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to achieve this. +Legend item visibility can be driven by boolean values in the data source. Bind the field that contains the visibility state to the [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShowLegendPath) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -337,7 +352,7 @@ Depending on the boolean values provided in the data source, the legend items wi -@code{ +@code { public class PopulationDetail { public string Name { get; set; } @@ -345,12 +360,12 @@ Depending on the boolean values provided in the data source, the legend items wi public double Density { get; set; } public bool LegendVisibility { get; set; } public string Color { get; set; } + } - }; private List populationDetails = new List { new PopulationDetail { - Name ="United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green" + Name = "United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green" }, new PopulationDetail { @@ -358,23 +373,25 @@ Depending on the boolean values provided in the data source, the legend items wi }, new PopulationDetail { - Name="India", Population=1198003000, Density=364, LegendVisibility = true, Color = "blue" + Name = "India", Population = 1198003000, Density = 364, LegendVisibility = true, Color = "blue" }, new PopulationDetail { - Name="China", Population=1389750000, Density=144, LegendVisibility = false, Color = "orange" + Name = "China", Population = 1389750000, Density = 144, LegendVisibility = false, Color = "orange" } }; } + ``` ![Hiding Legends Items based on DataSource in Blazor Maps](./images/Legend/blazor-maps-hide-desired-legend-item.png) ### Binding legend item text from data source -To show the legend text based on the values provided in the data source, use the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ValuePath) property in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). +Display legend text based on values in the data source by using the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ValuePath) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -387,42 +404,45 @@ To show the legend text based on the values provided in the data source, use the -@code{ +@code { public class PopulationDetail { public string Name { get; set; } public double Population { get; set; } public double Density { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { new PopulationDetail { - Name ="United States", Population = 325020000, Density = 33, Color="yellow" + Name = "United States", Population = 325020000, Density = 33, Color = "yellow" }, new PopulationDetail { - Name = "Russia", Population = 142905208, Density = 8.3, Color="red" + Name = "Russia", Population = 142905208, Density = 8.3, Color = "red" }, new PopulationDetail { - Name="India", Population=1198003000, Density=364, Color="blue" + Name = "India", Population = 1198003000, Density = 364, Color = "blue" }, new PopulationDetail { - Name="China", Population=1389750000, Density=144, Color="orange" + Name = "China", Population = 1389750000, Density = 144, Color = "orange" } }; } + ``` ![Binding Legend Item in Blazor Maps](./images/Legend/blazor-maps-bind-legend-item.png) ### Hiding duplicate legend items -To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_RemoveDuplicateLegend) property to **true** in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). +To hide duplicate legend items, set [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_RemoveDuplicateLegend) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -435,14 +455,15 @@ To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](http -@code{ +@code { public class PopulationDetail { public string Name { get; set; } public double Population { get; set; } public double Density { get; set; } public string Color { get; set; } - }; + } + private List populationDetails = new List { new PopulationDetail { @@ -462,22 +483,24 @@ To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](http } }; } + ``` ![Hiding Duplicate Legend Items in Blazor Maps](./images/Legend/blazor-maps-hide-duplicate-legend.png) ### Toggle option in legend -The toggle option has been provided for legend. If the legend can be toggled, the given color will be changed to the corresponding Maps shape item. To enable the toggle options in Legend, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Enable) property of the [MapsToggleLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html) to **true**. +A toggle option is available for legends. When toggled, the specified color is applied to the corresponding Maps shape item. To enable toggle behavior, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Enable) property of [MapsToggleLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html) to **true**. -The following properties and components are available to customize the toggle option in legend. +The following properties and components customize the toggle option: -* [ApplyShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_ApplyShapeSettings) – To apply the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) property value of the shape of the Maps when toggling the legend items. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Fill) - To apply the color to the shape of the Maps for which legend item is toggled. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Opacity) – To customize the transparency for the shapes for which legend item is toggled. -* [MapsToggleLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendBorder.html) – To customize the color and width of the border of the shapes in Maps. +* [ApplyShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_ApplyShapeSettings) – Applies the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) value of the Maps shape when toggling legend items. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Fill) - Sets the color for shapes whose legend item is toggled. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Opacity) – Controls the transparency of toggled shapes. +* [MapsToggleLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendBorder.html) – Customizes the color and width of the shapes' borders. ```cshtml + @using Syncfusion.Blazor.Maps @@ -494,7 +517,7 @@ The following properties and components are available to customize the toggle op -@code{ +@code { public class PopulationDetail { public string Name { get; set; } @@ -503,10 +526,11 @@ The following properties and components are available to customize the toggle op public bool LegendVisibility { get; set; } public string Color { get; set; } }; + private List populationDetails = new List { new PopulationDetail { - Name ="United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green" + Name = "United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green" }, new PopulationDetail { @@ -514,23 +538,25 @@ The following properties and components are available to customize the toggle op }, new PopulationDetail { - Name="India", Population=1198003000, Density=364, LegendVisibility = true, Color = "blue" + Name = "India", Population = 1198003000, Density = 364, LegendVisibility = true, Color = "blue" }, new PopulationDetail { - Name="China", Population=1389750000, Density=144, LegendVisibility = false, Color = "orange" + Name = "China", Population = 1389750000, Density = 144, LegendVisibility = false, Color = "orange" } }; } + ``` ![Customizing Toggle Option in Blazor Maps Legend](./images/Legend/blazor-maps-legend-toggle.gif) ## Enable legend for bubbles -To enable the legend for the bubble by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true** and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Bubbles**. +Enable legends for bubbles by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property to **Bubbles**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -555,31 +581,34 @@ To enable the legend for the bubble by setting the [Visible](https://help.syncfu public double Population { get; set; } public double Density { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { new PopulationDetail { - Name ="United States", Population = 325020000, Density = 33, Color="yellow" + Name = "United States", Population = 325020000, Density = 33, Color = "yellow" }, new PopulationDetail { - Name = "Russia", Population = 142905208, Density = 8.3, Color="red" + Name = "Russia", Population = 142905208, Density = 8.3, Color = "red" }, new PopulationDetail { - Name="India", Population=1198003000, Density=364, Color="blue" + Name = "India", Population = 1198003000, Density = 364, Color = "blue" } }; } + ``` ![Blazor Maps with Bubble and Legend](./images/Bubble/blazor-maps-bubble-legend.png) ## Enable legend for markers -To enable legend for marker by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true** and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Markers**. The [LegendText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LegendText) property in the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) can be used to show the legend text based on values provided in the data source. +Enable legends for markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property to **Markers**. Use the [LegendText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LegendText) property in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to display legend text based on values in the data source. ```cshtml + @using Syncfusion.Blazor.Maps @@ -602,20 +631,22 @@ To enable legend for marker by setting the [Visible](https://help.syncfusion.com public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + private List Cities = new List { - new City { Latitude=35.145083, Longitude=-117.960260, Name= "Californiya" }, - new City { Latitude=40.724546, Longitude=-73.850344, Name="New York" }, - new City { Latitude= 41.657782, Longitude=-91.533857, Name="Iowa" } + new City { Latitude = 35.145083, Longitude = -117.960260, Name = "Californiya" }, + new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" }, + new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" } }; } + ``` ![Blazor Maps Marker with legend](./images/Marker/blazor-maps-marker-legend.png) ### Imitate/Map marker shape to the legend shape -To imitate or map the marker shape with its legend item shape, set the [UseMarkerShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_UseMarkerShape) property to **true** in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) property. +To map the marker shape to the legend item shape, set [UseMarkerShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_UseMarkerShape) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). ```cshtml @@ -653,35 +684,37 @@ To imitate or map the marker shape with its legend item shape, set the [UseMarke public string Continent { get; set; } public string Color { get; set; } public string Shape { get; set; } - }; + } + public List PopulatedCities = new List { - new PopulationCityDetails { Name="Tokyo", Latitude=35.6894875, Longitude=139.6917064, Population=33200000, Country="Japan", Continent="Asia", Color="red", Shape="Pentagon" }, - new PopulationCityDetails { Name="New York", Latitude=40.7127753, Longitude=-74.0059728, Population=17800000,Country="United States", Continent="North America", Color="green",Shape="Diamond" }, - new PopulationCityDetails { Name="Sao Paulo", Latitude=-23.5505199, Longitude=-46.6333094, Population=17700000,Country="Brazil", Continent="South America", Color="orange",Shape="InvertedTriangle" }, - new PopulationCityDetails { Name="Seoul/Incheon", Latitude=37.566535, Longitude=126.9779692, Population=17500000,Country="South Korea", Continent="Asia", Color="red",Shape="Pentagon"}, - new PopulationCityDetails { Name="Mexico City", Latitude=19.2464696, Longitude=-99.1013498, Population=17400000,Country="Mexico", Continent="North America", Color="green",Shape="Diamond"}, - new PopulationCityDetails { Name="Osaka/Kobe/Kyoto", Latitude=35.0212466, Longitude=135.7555968, Population=16425000,Country="Japan", Continent="Asia", Color="red",Shape="Pentagon" }, - new PopulationCityDetails { Name="Manila", Latitude=14.5995124, Longitude=120.9842195, Population=14750000,Country="Philippines", Continent="Asia", Color="red",Shape="Pentagon" }, - new PopulationCityDetails { Name="Mumbai", Latitude=19.0759837, Longitude=72.8776559, Population=14350000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" }, - new PopulationCityDetails { Name="Delhi", Latitude=28.6139391, Longitude=77.2090212, Population=14300000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" }, - new PopulationCityDetails { Name="Jakarta", Latitude=-6.17511, Longitude=106.8650395, Population=14250000,Country="Indonesia", Color="red", Continent="Asia",Shape="Pentagon" }, - new PopulationCityDetails { Name="Lagos", Latitude=6.5243793, Longitude=3.3792057, Population=13400000, Continent="Africa",Country="Nigeria", Color="blue",Shape="Rectangle" }, - new PopulationCityDetails { Name="Kolkata", Latitude=22.572646, Longitude=88.363895, Population=12700000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" }, - new PopulationCityDetails { Name="Cairo", Latitude=30.0444196, Longitude=31.2357116, Population=12200000,Country="Egypt", Continent="Africa", Color="blue",Shape="Rectangle" }, - new PopulationCityDetails { Name="Los Angeles", Latitude=34.0522265, Longitude=-118.2436596, Population=11789000, Continent="North America",Country="United States", Color="green",Shape="Diamond" }, - new PopulationCityDetails { Name="Buenos Aires", Latitude=-34.6036844, Longitude=-58.3815591, Population=11200000,Country="Argentina", Color="orange", Continent="South America",Shape="InvertedTriangle" }, - new PopulationCityDetails { Name="Rio de Janeiro", Latitude=-22.9068467, Longitude=-43.1728965, Population=10800000,Country="Brazil", Color="orange", Continent="South America",Shape="InvertedTriangle" }, - new PopulationCityDetails { Name="Moscow", Latitude=55.755826, Longitude=37.6173, Population=10500000,Country="Russia", Color="yellow", Continent="Europe",Shape="Triangle" }, - new PopulationCityDetails { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021, Population=10000000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" }, - new PopulationCityDetails { Name="Karachi", Latitude=25.0700428, Longitude=67.2847875, Population=9800000,Country="Pakistan", Color="red", Continent="Asia",Shape="Pentagon"}, - new PopulationCityDetails { Name="Paris", Latitude=48.856614, Longitude=2.3522219, Population=9645000,Country="France", Color="yellow", Continent="Europe",Shape="Triangle" }, - new PopulationCityDetails { Name="Istanbul", Latitude=41.0082376, Longitude=28.9783589, Population=9000000,Country="Istanbul", Color="yellow", Continent="Europe",Shape="Triangle" }, - new PopulationCityDetails { Name="Nagoya", Latitude=35.1814464, Longitude=136.906398, Population=9000000,Country="Japan", Color="red", Continent="Asia",Shape="Pentagon" }, - new PopulationCityDetails { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963, Population=8614000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" }, - new PopulationCityDetails { Name="Chicago", Latitude=41.8781136, Longitude=-87.6297982, Population=8308000,Country="United States", Color="green", Continent="North America",Shape="Diamond"}, - new PopulationCityDetails { Name="London", Latitude=51.5073509, Longitude=-0.1277583, Population=8278000,Country="United Kingdom", Color="yellow", Continent="Europe",Shape="Triangle" } + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6894875, Longitude = 139.6917064, Population = 33200000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "New York", Latitude = 40.7127753, Longitude = -74.0059728, Population = 17800000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" }, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.5505199, Longitude = -46.6333094, Population = 17700000, Country = "Brazil", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" }, + new PopulationCityDetails { Name = "Seoul/Incheon", Latitude = 37.566535, Longitude = 126.9779692, Population = 17500000, Country = "South Korea", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.2464696, Longitude = -99.1013498, Population = 17400000, Country = "Mexico", Continent = "North America", Color = "green", Shape = "Diamond" }, + new PopulationCityDetails { Name = "Osaka/Kobe/Kyoto", Latitude = 35.0212466, Longitude = 135.7555968, Population = 16425000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Manila", Latitude = 14.5995124, Longitude = 120.9842195, Population = 14750000, Country = "Philippines", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.0759837, Longitude = 72.8776559, Population = 14350000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.6139391, Longitude = 77.2090212, Population = 14300000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Jakarta", Latitude = -6.17511, Longitude = 106.8650395, Population = 14250000, Country = "Indonesia", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Lagos", Latitude = 6.5243793, Longitude = 3.3792057, Population = 13400000, Country = "Nigeria", Continent = "Africa", Color = "blue", Shape = "Rectangle" }, + new PopulationCityDetails { Name = "Kolkata", Latitude = 22.572646, Longitude = 88.363895, Population = 12700000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Cairo", Latitude = 30.0444196, Longitude = 31.2357116, Population = 12200000, Country = "Egypt", Continent = "Africa", Color = "blue", Shape = "Rectangle" }, + new PopulationCityDetails { Name = "Los Angeles", Latitude = 34.0522265, Longitude = -118.2436596, Population = 11789000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" }, + new PopulationCityDetails { Name = "Buenos Aires", Latitude = -34.6036844, Longitude = -58.3815591, Population = 11200000, Country = "Argentina", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" }, + new PopulationCityDetails { Name = "Rio de Janeiro", Latitude = -22.9068467, Longitude = -43.1728965, Population = 10800000, Country = "Brazil", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" }, + new PopulationCityDetails { Name = "Moscow", Latitude = 55.755826, Longitude = 37.6173, Population = 10500000, Country = "Russia", Continent = "Europe", Color = "yellow", Shape = "Triangle" }, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.2303904, Longitude = 121.4737021, Population = 10000000, Country = "China", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Karachi", Latitude = 25.0700428, Longitude = 67.2847875, Population = 9800000, Country = "Pakistan", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Paris", Latitude = 48.856614, Longitude = 2.3522219, Population = 9645000, Country = "France", Continent = "Europe", Color = "yellow", Shape = "Triangle" }, + new PopulationCityDetails { Name = "Istanbul", Latitude = 41.0082376, Longitude = 28.9783589, Population = 9000000, Country = "Istanbul", Continent = "Europe", Color = "yellow", Shape = "Triangle" }, + new PopulationCityDetails { Name = "Nagoya", Latitude = 35.1814464, Longitude = 136.906398, Population = 9000000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.9041999, Longitude = 116.4073963, Population = 8614000, Country = "China", Continent = "Asia", Color = "red", Shape = "Pentagon" }, + new PopulationCityDetails { Name = "Chicago", Latitude = 41.8781136, Longitude = -87.6297982, Population = 8308000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" }, + new PopulationCityDetails { Name = "London", Latitude = 51.5073509, Longitude = -0.1277583, Population = 8278000, Country = "United Kingdom", Continent = "Europe", Color = "yellow", Shape = "Triangle" } }; } + ``` -![Blazor Maps - Marker shape mapped to legend items shape](./images/Legend/blazor-maps-marker-legend-shape.png) \ No newline at end of file +![Blazor Maps - Marker shape mapped to legend items shape](./images/Legend/blazor-maps-marker-legend-shape.png) diff --git a/blazor/maps/localization.md b/blazor/maps/localization.md index f51d686d8b..1c8d5c6992 100644 --- a/blazor/maps/localization.md +++ b/blazor/maps/localization.md @@ -1,7 +1,7 @@ --- layout: post title: Localization in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about Localization in Syncfusion Blazor Maps component and much more details. +description: Check out and learn here all about Localization in the Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Localization in Blazor Maps Component -The Blazor Maps component supports localization, allowing it to display content in any language by integrating localized text resources. Static text elements, such as zoom toolbar tooltips and placeholder text for tile images that fail to load, can be translated into various languages (e.g., Arabic, German, French) by defining the appropriate locale value. To efficiently manage language-specific content, the localization process can utilize **.resx** files, enabling developers to maintain translations with ease. This feature enhances user experience and accessibility by allowing users to interact with the Maps component in their preferred language while ensuring seamless integration into applications tailored for diverse global audiences. +The Blazor Maps component supports localization to display content in any language by integrating localized text resources. Static text elements, such as zoom toolbar tooltips and placeholder text for tile images that fail to load, can be translated into various languages (for example, Arabic, German, and French) by defining the appropriate locale value. To manage language-specific content efficiently, the localization process can use **.resx** files, enabling consistent maintenance of translations. This feature enhances accessibility by allowing interaction with the Maps component in the preferred language and supports integration in globally targeted applications. -You can add culture-specific resource files using **.resx** files in your application. Please refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for details on localizing Syncfusion® Blazor components. +Culture-specific resource files can be added using **.resx** files in the application. For implementation details, refer to the Blazor Localization topic: [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization). -The table below shows the locale keywords and their corresponding text that can be displayed in the Blazor Maps component. These keywords represent various UI elements, such as tooltips for zoom toolbar including zoom, zoom in/out, pan and reset actions. By defining these locale keys, developers can customize the text displayed to users in different languages. +The table below lists the locale keywords and the corresponding text used in the Blazor Maps component. These keywords represent various UI elements, such as tooltips for the zoom toolbar including zoom, zoom in/out, pan, and reset actions. By defining these locale keys, the text displayed in different languages can be customized. - + @@ -46,11 +46,8 @@ The table below shows the locale keywords and their corresponding text that can
Locale key wordsLocale keywords Text to display
-These translations allow the Maps component to adapt to the user's preferred language, enhancing accessibility and usability. +These translations enable the Maps component to adapt to the preferred language, improving accessibility and usability. -The image below illustrates how the tooltip displays for the zoom toolbar values in different cultures. +The image below illustrates tooltip text for the zoom toolbar in different cultures. ![Blazor Maps with Localization](./images/Localization/blazor-maps-zoom-toolbar-tooltip-with-localization.gif) - - - diff --git a/blazor/maps/maps-event.md b/blazor/maps/maps-event.md index 48ef26a486..759d232ace 100644 --- a/blazor/maps/maps-event.md +++ b/blazor/maps/maps-event.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about the events in Syncfusion Blazor Maps component and much more details. +description: Check out and learn about all available events and event handling in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Events in Blazor Maps Component -This section explains the list of events that will be triggered for appropriate actions in Maps. The events should be provided to the Maps using the [MapsEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html). +This section explains the list of events that will be triggered for appropriate actions in Maps. The events are configured using the [MapsEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html). ## AnimationCompleted -When the animation in the component is completed, the [AnimationCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnimationCompleted) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnimationCompleteEventArgs.html). +When the animation in the component is completed, the [AnimationCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnimationCompleted) event is triggered. For details about the event arguments, see AnimationCompleteEventArgs. [AnimationCompleteEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnimationCompleteEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -33,13 +34,15 @@ When the animation in the component is completed, the [AnimationCompleted](https // Here you can customize your code } } + ``` ## AnnotationRendering -Before the annotation is rendered in the Maps, the [AnnotationRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnnotationRendering) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationRenderingEventArgs.html). +Before an annotation is rendered, the [AnnotationRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnnotationRendering) event is triggered. For details about the event arguments, see [AnnotationRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -66,13 +69,15 @@ Before the annotation is rendered in the Maps, the [AnnotationRendering](https:/ // Here you can customize your code } } + ``` ## BubbleRendering -The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_BubbleRendering) event is triggered before rendering each bubble. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleRenderingEventArgs.html). +The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_BubbleRendering) event is triggered before each bubble is rendered. For details about the event arguments, see [BubbleRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -89,25 +94,26 @@ The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma -@code{ +@code { public class Country { public string Name { get; set; } public double Population { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { - new Country - { - Name ="United States", Population = 325020000, Color = "#b5e485" - }, - new Country - { - Name = "Russia", Population = 142905208, Color = "#7bc1e8" - }, + new Country + { + Name = "United States", Population = 325020000, Color = "#b5e485" + }, + new Country + { + Name = "Russia", Population = 142905208, Color = "#7bc1e8" + }, new Country { - Name="India", Population=1198003000, Color = "#df819c" + Name = "India", Population = 1198003000, Color = "#df819c" } }; @@ -116,13 +122,15 @@ The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma // Here you can customize your code } } + ``` ## DataLabelRendering -The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_DataLabelRendering) event is triggered before rendering each label. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LabelRenderingEventArgs.html). +The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_DataLabelRendering) event is triggered before each data label is rendered. For details about the event arguments, see [LabelRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LabelRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -142,13 +150,15 @@ The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor // Here you can customize your code } } + ``` ## LayerRendering -The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LayerRendering) event is triggered before rendering each layer. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LayerRenderingEventArgs.html). +The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LayerRendering) event is triggered before each layer is rendered. For details about the event arguments, see [LayerRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LayerRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -165,13 +175,15 @@ The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map // Here you can customize your code } } + ``` ## LegendRendering -The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LegendRendering) event is triggered before rendering the legend in the component. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendRenderingEventArgs.html). +The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LegendRendering) event is triggered before the legend is rendered. For details about the event arguments, see [LegendRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -194,14 +206,14 @@ The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma @code { private List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"} + new UNCouncilCountry { Name = "China", Membership = "Permanent" }, + new UNCouncilCountry { Name = "France", Membership = "Permanent" }, + new UNCouncilCountry { Name = "Russia", Membership = "Permanent" }, + new UNCouncilCountry { Name = "Kazakhstan", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "Poland", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "Sweden", Membership = "Non-Permanent" }, + new UNCouncilCountry { Name = "United Kingdom", Membership = "Permanent" }, + new UNCouncilCountry { Name = "United States", Membership = "Permanent" } }; public class UNCouncilCountry @@ -209,18 +221,21 @@ The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma public string Name { get; set; } public string Membership { get; set; } }; + public void LegendRenderingEvent(Syncfusion.Blazor.Maps.LegendRenderingEventArgs args) { // Here you can customize your code } } + ``` ## Loaded -The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Loaded) event is triggered after the Maps component has been loaded. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadedEventArgs.html). +The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Loaded) event is triggered after the Maps component is loaded. For details about the event arguments, see [LoadedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadedEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -237,13 +252,15 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEv // Here you can customize your code } } + ``` ## MarkerRendering -The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerRendering) event is triggered before rendering each marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerRenderingEventArgs.html). +The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerRendering) event is triggered before each marker is rendered. For details about the event arguments, see [MarkerRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -259,33 +276,40 @@ The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List California = new List { - new City {Latitude=35.145083,Longitude=-117.960260} + new City { Latitude = 35.145083, Longitude = -117.960260 } }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City {Latitude= 41.657782, Longitude=-91.533857} + new City { Latitude = 41.657782, Longitude = -91.533857 } }; + public void MarkerRenderingEvent(Syncfusion.Blazor.Maps.MarkerRenderingEventArgs args) { // Here you can customize your code } } + ``` ## MarkerClusterClick -The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterClick) event is triggered after clicking the marker cluster. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs.html). +The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterClick) event is triggered after a marker cluster is clicked. For details about the event arguments, see [MarkerClusterClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -313,28 +337,32 @@ The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor public double Longitude { get; set; } public string Name { get; set; } public double Area { get; set; } - }; + } + private List LargestCities = new List { - 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 } + 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 void MarkerClusterClickEvent(Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs args) { // Here you can customize your code } } + ``` ## MarkerClusterMouseMove -The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event will be triggered when the cursor moves over the marker cluster. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs.html). +The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event is triggered when the cursor moves over a marker cluster. For details about the event arguments, see [MarkerClusterMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -362,28 +390,32 @@ The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl public double Longitude { get; set; } public string Name { get; set; } public double Area { get; set; } - }; + } + private List LargestCities = new List { - 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 } + 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 void MarkerClusterMouseMoveEvent(Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs args) { // Here you can customize your code } } + ``` ## MouseMove -The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MouseMove) event is triggered when the mouse pointer moves over the map. To learn more about the arguments for this event, refer to the documentation [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseMoveEventArgs.html). +The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MouseMove) event is triggered when the mouse pointer moves over the map. For details about the event arguments, see [MouseMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseMoveEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -411,16 +443,18 @@ The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Map public double Longitude { get; set; } public string Name { get; set; } public double Area { get; set; } - }; + } + private List LargestCities = new List { - 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 } + 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 void MouseMoveEvent(Syncfusion.Blazor.Maps.MouseMoveEventArgs args) { // Here you can customize your code @@ -430,9 +464,10 @@ The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Map ## OnBubbleClick -The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event will be triggered when clicking on the bubbles. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleClickEventArgs.html). +The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event is triggered when a bubble is clicked. For details about the event arguments, see [BubbleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleClickEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -449,26 +484,27 @@ The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps -@code{ +@code { public class Country { public string Name { get; set; } public double Population { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { - new Country - { - Name ="United States", Population = 325020000, Color = "#b5e485" - }, - new Country - { - Name = "Russia", Population = 142905208, Color = "#7bc1e8" - }, - new Country - { - Name="India", Population=1198003000, Color = "#df819c" - } + new Country + { + Name = "United States", Population = 325020000, Color = "#b5e485" + }, + new Country + { + Name = "Russia", Population = 142905208, Color = "#7bc1e8" + }, + new Country + { + Name = "India", Population = 1198003000, Color = "#df819c" + } }; public void OnBubbleClickEvent(Syncfusion.Blazor.Maps.BubbleClickEventArgs args) @@ -476,13 +512,15 @@ The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps // Here you can customize your code } } + ``` ## OnBubbleMouseMove -The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnBubbleMouseMove) event will be triggered when the cursor moves over the bubbles. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleMoveEventArgs.html). +The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnBubbleMouseMove) event is triggered when the cursor moves over a bubble. For details about the event arguments, see [BubbleMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleMoveEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -499,39 +537,43 @@ The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. -@code{ +@code { public class Country { public string Name { get; set; } public double Population { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { - new Country - { - Name ="United States", Population = 325020000, Color = "#b5e485" - }, - new Country - { - Name = "Russia", Population = 142905208, Color = "#7bc1e8" - }, - new Country - { - Name="India", Population=1198003000, Color = "#df819c" - } + new Country + { + Name = "United States", Population = 325020000, Color = "#b5e485" + }, + new Country + { + Name = "Russia", Population = 142905208, Color = "#7bc1e8" + }, + new Country + { + Name = "India", Population = 1198003000, Color = "#df819c" + } }; + public void OnBubbleMouseMoveEvent(Syncfusion.Blazor.Maps.BubbleMoveEventArgs args) { // Here you can customize your code } } + ``` ## OnClick -The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnClick) event will be triggered after the Maps is clicked. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). +The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnClick) event is triggered after the map is clicked. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -543,7 +585,6 @@ The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE @code { - public void OnClickEvent(Syncfusion.Blazor.Maps.MouseEventArgs args) { // Here you can customize your code @@ -553,9 +594,10 @@ The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE ## OnDoubleClick -When performing the double click operation on an element in Maps, the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnDoubleClick) will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). +When a double-click operation is performed on an element, the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnDoubleClick) event is triggered. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -572,15 +614,17 @@ When performing the double click operation on an element in Maps, the [OnDoubleC // Here you can customize your code } } + ``` ## OnItemHighlight -The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemHighlight) event occurs when the cursor moves over the shapes. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html). +The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemHighlight) event occurs when the cursor moves over shapes. For details about the event arguments, see [SelectionEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html). @using Syncfusion.Blazor.Maps ```cshtml + @@ -598,13 +642,15 @@ The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma // Here you can customize your code } } + ``` ## OnItemSelect -The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemSelect) event occurs when selecting the shapes in the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html). +The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemSelect) event occurs when shapes are selected. For details about the event arguments, see [SelectionEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -624,14 +670,17 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps. // Here you can customize your code } } + ``` ## OnLoad -[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnLoad) event will be triggered before rendering the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadEventArgs.html). +The [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnLoad) event is triggered before the map is rendered. For details about the event arguments, see [LoadEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps + @@ -646,13 +695,15 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps. // Here you can customize your code } } + ``` ## OnMarkerClick -[OnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerClick) event will be triggered by clicking the markers in the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClickEventArgs.html). +The [OnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerClick) event is triggered when a marker is clicked. For details about the event arguments, see [MarkerClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClickEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -668,21 +719,26 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps. + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List California = new List { - new City {Latitude=35.145083,Longitude=-117.960260} + new City {Latitude = 35.145083, Longitude = -117.960260 } }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City {Latitude= 41.657782, Longitude=-91.533857} + new City {Latitude = 41.657782, Longitude = -91.533857 } }; + public void OnMarkerClickEvent(Syncfusion.Blazor.Maps.MarkerClickEventArgs args) { // Here you can customize your code @@ -692,9 +748,10 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps. ## OnMarkerMouseLeave -The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves away from the marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html). +The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves away from a marker. For details about the event arguments, see [MarkerMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -710,33 +767,40 @@ The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List California = new List { - new City {Latitude=35.145083,Longitude=-117.960260} + new City {Latitude = 35.145083, Longitude = -117.960260 } }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City {Latitude= 41.657782, Longitude=-91.533857} + new City {Latitude = 41.657782, Longitude = -91.533857 } }; + public void OnMarkerMouseLeaveEvent(Syncfusion.Blazor.Maps.MarkerMoveEventArgs args) { // Here you can customize your code } } + ``` ## OnMarkerMouseMove -The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves over the marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html). +The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves over a marker. For details about the event arguments, see [MarkerMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -752,34 +816,42 @@ The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List California = new List { - new City {Latitude=35.145083,Longitude=-117.960260} + new City {Latitude = 35.145083, Longitude = -117.960260} }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City {Latitude= 41.657782, Longitude=-91.533857} + new City {Latitude = 41.657782, Longitude = -91.533857} }; + public void OnMarkerMouseMoveEvent(Syncfusion.Blazor.Maps.MarkerMoveEventArgs args) { // Here you can customize your code } } + ``` ## OnPan -When panning the Maps, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan). +When panning the map, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) event is triggered. For details about the event arguments, see [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) in the MapsEvents API reference to know more about the arguments of this event. ```cshtml + @using Syncfusion.Blazor.Maps + @@ -799,13 +871,15 @@ When panning the Maps, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfus // Here you can customize your code } } + ``` ## OnPanComplete -The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) event will be triggered after panning the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete). +The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) event is triggered after panning completes. For details about the event arguments, see [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) in the MapsEvents API reference to know more about the arguments of this event. ```cshtml + @using Syncfusion.Blazor.Maps @@ -826,13 +900,15 @@ The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps // Here you can customize your code } } + ``` ## OnPrint -The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPrint) event will be triggered before the print operation is started. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PrintEventArgs.html). +The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPrint) event is triggered before a print operation starts. For details about the event arguments, see [PrintEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PrintEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -846,23 +922,27 @@ The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE @code { SfMaps maps; + public async Task PrintMap() { // using Maps component reference call 'Print' method await this.maps.PrintAsync(); } + public void GetGEOLocation(Syncfusion.Blazor.Maps.PrintEventArgs args) { // Here you can customize your code } } + ``` ## OnRightClick -The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnRightClick) event will be triggered when performing the right click operation on an element in Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). +The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnRightClick) event is triggered when a right-click operation is performed on an element. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -874,20 +954,22 @@ The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps. @code { - public void OnRightClickEvent(Syncfusion.Blazor.Maps.MouseEventArgs args) { // Here you can customize your code } } + ``` ## OnZoom -The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoom) event will be triggered before zooming-in or zooming-out the Maps. This event is also triggered when the [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called.To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html). +The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoom) event is triggered before zooming in or out. It is also triggered when [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. For details about the event arguments, see [MapZoomEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps + @@ -907,14 +989,17 @@ The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEv // Here you can customize your code } } + ``` ## OnZoomComplete -The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoomComplete) event will be triggered after performing zooming operation. This event is also triggered when the [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html). +The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoomComplete) event is triggered after a zoom operation completes. It is also triggered when [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. For details about the event arguments, see [MapZoomEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps + @@ -934,14 +1019,17 @@ The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map // Here you can customize your code } } + ``` ## Resizing -The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Resizing) event will be triggered when resizing the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ResizeEventArgs.html). +The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Resizing) event is triggered when the map is resized. For details about the event arguments, see [ResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ResizeEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps + @@ -956,13 +1044,15 @@ The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Maps // Here you can customize your code } } + ``` ## ShapeHighlighted -The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeHighlighted) event is triggered when mouse move on the shape in Maps and before the shape gets highlighted. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html). +The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeHighlighted) event is triggered when the cursor moves over a shape, before it is highlighted. For details about the event arguments, see [ShapeSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -982,13 +1072,15 @@ The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.M // Here you can customize your code } } + ``` ## ShapeRendering -The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeRendering) event will be triggered before rendering a shape of the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeRenderingEventArgs.html). +The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeRendering) event is triggered before a shape is rendered. For details about the event arguments, see [ShapeRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeRenderingEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -1005,13 +1097,15 @@ The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map // Here you can customize your code } } + ``` ## ShapeSelected -The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeSelected) event is triggered when a shape is selected in Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html). +The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeSelected) event is triggered when a shape is selected. For details about the event arguments, see [ShapeSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -1031,13 +1125,16 @@ The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps // Here you can customize your code } } + + ``` ## TooltipRendering -The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_TooltipRendering) event is triggered before the tooltip gets rendered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.TooltipRenderEventArgs.html). +The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_TooltipRendering) event is triggered before a tooltip is rendered. For details about the event arguments, see [TooltipRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.TooltipRenderEventArgs.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -1055,4 +1152,5 @@ The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.M // Here you can customize your code } } + ``` \ No newline at end of file diff --git a/blazor/maps/maps-method.md b/blazor/maps/maps-method.md index 345737856a..40fb21aa0a 100644 --- a/blazor/maps/maps-method.md +++ b/blazor/maps/maps-method.md @@ -1,7 +1,7 @@ --- layout: post title: Methods in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about methods in Syncfusion Blazor Maps component and much more details. +description: Check out and learn about all the available methods and how to utilize those methods in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Methods in Blazor Maps Component -This section explains the methods used in the Maps component. +This section describes the available methods in the Blazor Maps component. ## ShapeSelectionAsync @@ -17,12 +17,13 @@ The [ShapeSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo | Argument name | Description | |----------------------| -----------------------------------------| -| layerIndex | Specifies the index number of layer in which the shape is to be selected. | -| propertyName | Specifies the property path for map shape data to select the shape. | -| name | Specifies the shape data path for the data source of the layer. | -| enable | Specifies whether to select or unselect the shape. | +| layerIndex | Specifies the zero based index of the layer in which the shape is selected. | +| propertyName | Specifies the property path in the map shape data used to locate the shape. | +| name | Specifies the value to match for the given propertyName in the layer data source. | +| enable | Specifies whether to select (true) or unselect (false) the shape. | ```cshtml + @using Syncfusion.Blazor.Maps @@ -38,18 +39,21 @@ The [ShapeSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo @code { SfMaps maps; + public async Task ShapeSelectAsync() { await maps.ShapeSelectionAsync(0, "name", "Argentina"); } } + ``` ## Refresh -The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Refresh) method can be used to change the state of the component and render it again. +The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Refresh) method refreshes the component and renders it again. ```cshtml + @using Syncfusion.Blazor.Maps @@ -64,23 +68,26 @@ The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMap @code { SfMaps maps; + public void Refresh() { maps.Refresh(); } } + ``` ## PanByDirectionAsync -The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#methods)) method pans the Maps dynamically by specifying direction. The following are the arguments for this method. +The [PanByDirectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#methods) method pans the Maps dynamically by specifying a direction. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| -| direction | Specifies to the direction of panning operation. | -| mouseLocation | Specifies the position of the panning within the Maps. | +| direction | Specifies the panning direction. | +| mouseLocation | Specifies the position from which the panning originates within the Maps. | ```cshtml + @using Syncfusion.Blazor.Maps @@ -95,6 +102,7 @@ The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @code { SfMaps maps; + void PanByDirectionAsync() { Syncfusion.Blazor.Maps.Internal.Point position = new Syncfusion.Blazor.Maps.Internal.Point(); @@ -103,18 +111,20 @@ The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz maps.PanByDirectionAsync(Syncfusion.Blazor.Maps.PanDirection.Bottom, position); } } + ``` ## ZoomByPosition -The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) method zooms the Maps by specifying the center position for the map. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method. +The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) method zooms the Maps by specifying the center position. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| -| centerPosition | Specifies the position of the maps. | -| zoomFactor | Specifies the zoom level of maps. | +| centerPosition | Specifies the center position of the map. | +| zoomFactor | Specifies the zoom level of the map. | ```cshtml + @using Syncfusion.Blazor.Maps @@ -129,6 +139,7 @@ The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map @code { SfMaps maps; + public void ZoomByPosition() { MapsCenterPosition centerPosition = new MapsCenterPosition(); @@ -137,11 +148,12 @@ The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map maps.ZoomByPosition(centerPosition, 2); } } + ``` ## ZoomToCoordinates -The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) zooms the map to the center point of the provided minimum and maximum coordinates. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method. +The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) method zooms the map to the center point of the provided minimum and maximum coordinates. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| @@ -151,6 +163,7 @@ The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. | maxLongitude | Specifies the maximum longitude of the coordinate for the zooming operation. | ```cshtml + @using Syncfusion.Blazor.Maps @@ -165,18 +178,21 @@ The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { SfMaps maps; + public void ZoomToCoordinates() { maps.ZoomToCoordinates(0, 0, 100, 100); } } + ``` ## GetMinMaxLatitudeLongitude -The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_GetMinMaxLatitudeLongitude) method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a [MinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MinMaxLatitudeLongitude.html) class object that contains the Maps minimum and maximum latitude and longitude coordinates. +The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_GetMinMaxLatitudeLongitude) method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a [MinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MinMaxLatitudeLongitude.html) class instance that contains the minimum and maximum latitude and longitude coordinates. ```cshtml + @using Syncfusion.Blazor.Maps @using System.Collections.ObjectModel; @@ -192,7 +208,6 @@ The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusio } - @@ -231,4 +246,5 @@ The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusio new MarkerData {Latitude=25.0700428,Longitude=67.2847875} }; } + ``` \ No newline at end of file diff --git a/blazor/maps/markers.md b/blazor/maps/markers.md index 82c7200b37..a5e9261992 100644 --- a/blazor/maps/markers.md +++ b/blazor/maps/markers.md @@ -1,7 +1,7 @@ --- layout: post title: Markers in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about markers in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to configure and customize markers in the Syncfusion Blazor Maps component for effective data visualization. platform: Blazor control: Maps documentation: ug @@ -9,16 +9,17 @@ documentation: ug # Markers in Blazor Maps Component -Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Visible) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **true**. +Markers annotate locations on Maps with symbols. Enable markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Visible) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **true**. ## Adding marker -To add the markers, the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) has a list of objects that contains the data for markers. Using this property, any number of markers can be added to the layers of the Maps. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object should contain the following list of properties. +To add markers, assign a list of objects to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Any number of markers can be added to map layers. By default, markers render at the specified latitude and longitude in the data source. Each data item should include: -* Latitude - Specifies the position of the marker in latitude co-ordinate. -* Longitude - Specifies the position of the marker in longitude co-ordinate. +* Latitude - Specifies the marker position in latitude coordinates. +* Longitude - Specifies the marker position in longitude coordinates. ```cshtml + @using Syncfusion.Blazor.Maps @@ -33,31 +34,37 @@ To add the markers, the [DataSource](https://help.syncfusion.com/cr/blazor/Syncf + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List California = new List { - new City {Latitude=35.145083,Longitude=-117.960260} + new City {Latitude = 35.145083,Longitude = -117.960260} }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City {Latitude= 41.657782, Longitude=-91.533857} + new City {Latitude = 41.657782, Longitude = -91.533857} }; } + ``` ![Blazor Maps with Marker](./images/Marker/blazor-maps-marker.png) ## Adding marker template -The marker can be added as a template in the Maps component. The [MarkerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_MarkerTemplate) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) is used to set HTML element as a template for the marker. +Markers can be rendered using a template. Use the [MarkerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_MarkerTemplate) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to supply an HTML element as the template. ```cshtml + @using Syncfusion.Blazor.Maps @@ -90,40 +97,46 @@ The marker can be added as a template in the Maps component. The [MarkerTemplate + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List Europe = new List { - new City { Latitude=49.95121990866204, Longitude=18.468749999999998 } + new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998 } }; + public List NorthAmerica = new List { - new City { Latitude= 59.88893689676585, Longitude= -109.3359375 } + new City { Latitude = 59.88893689676585, Longitude = -109.3359375 } }; + public List SouthAmerica = new List { - new City { Latitude= -6.64607562172573, Longitude=-55.54687499999999 } + new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999 } }; } + ``` ![Blazor Maps with Marker Template](./images/Marker/blazor-maps-marker-template.PNG) ## Customization -The following properties and class are available in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to customize the markers of the Maps component. +Use the following properties and class in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to customize markers in the Maps component. -* [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html) - To customize the color and width of the border for the markers in Maps. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Fill) - To apply the color for markers in Maps. -* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DashArray) - To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps. -* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Height) - To customize the height of the markers in Maps. -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Width) - To customize the width of the markers in Maps. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Opacity) - To customize the transparency of the markers in Maps. -* [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDelay) - To change the time delay in the transition for markers. -* [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDuration) - To change the time duration of animation for markers. +* [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html) - Customizes the border color and width for markers. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Fill) - Applies a fill color to markers. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DashArray) - Defines the dash pattern for marker outlines. +* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Height) - Sets marker height. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Width) - Sets marker width. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Opacity) - Controls marker transparency. +* [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDelay) - Sets the transition delay for markers. +* [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDuration) - Sets the animation duration for markers. ```cshtml + @using Syncfusion.Blazor.Maps @@ -139,25 +152,28 @@ The following properties and class are available in [MapsMarker](https://help.sy + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List MarkerData = new List { - new City { Latitude=35.145083, Longitude=-117.960260 }, - new City { Latitude=40.724546, Longitude=-73.850344 }, - new City { Latitude= 41.657782, Longitude=-91.533857 } + new City { Latitude = 35.145083, Longitude = -117.960260 }, + new City { Latitude = 40.724546, Longitude = -73.850344 }, + new City { Latitude = 41.657782, Longitude = -91.533857 } }; } + ``` ![Blazor Maps with Custom Marker](./images/Marker/blazor-maps-custom-marker.PNG) ## Marker shapes -The Maps component supports the following marker shapes. To set the shape of the marker, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) is used. +The Maps component supports the following marker shapes. Set the marker shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). * Balloon * Circle @@ -165,16 +181,17 @@ The Maps component supports the following marker shapes. To set the shape of the * Diamond * Image * Rectangle -* Start +* Star * Triangle * VerticalLine * HorizontalLine ### Rendering marker shape as image -To render a marker as an image in Maps, set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) as **Image** and specify the path of the image to [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrl) property. There is another way to render a marker as an image using the [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Bind the field name that contains the path of the image in the data source to the [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property. +To render a marker as an image, set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **Image** and specify the image path in [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrl) property. Alternatively, bind the field containing the image path using [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property. ```cshtml + @using Syncfusion.Blazor.Maps @@ -189,27 +206,31 @@ To render a marker as an image in Maps, set the [Shape](https://help.syncfusion. + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List MarkerData = new List { - new City { Latitude=35.145083,Longitude=-117.960260 }, - new City { Latitude=40.724546, Longitude=-73.850344 }, - new City { Latitude= 41.657782, Longitude=-91.533857 } + new City { Latitude = 35.145083, Longitude = -117.960260 }, + new City { Latitude = 40.724546, Longitude = -73.850344 }, + new City { Latitude = 41.657782, Longitude = -91.533857 } }; } + ``` ![Blazor Maps Marker with Image](./images/Marker/blazor-maps-marker-image.PNG) ## Multiple marker groups -Multiple groups of markers can be added in the Maps by adding multiple [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) in the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and customization for the markers can be done with the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). +Multiple groups of markers can be added by including multiple [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) tags within [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html). Each group can be customized using its corresponding [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -233,18 +254,21 @@ Multiple groups of markers can be added in the Maps by adding multiple [MapsMark public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + private List CitiesInUS = new List { new City { Latitude = 37.0000, Longitude = -120.0000, Name = "California" }, - new City { Latitude= 40.7127, Longitude = -74.0059, Name = "New York" }, + new City { Latitude = 40.7127, Longitude = -74.0059, Name = "New York" }, new City { Latitude = 42, Longitude = -93, Name = "Iowa" } }; + private List CitiesInIndia = new List { - new City { Latitude = 19.228825, Longitude = 72.854118, Name= "Mumbai" }, - new City { Latitude = 28.610001, Longitude = 77.230003, Name= "Delhi" }, - new City { Latitude = 13.067439, Longitude = 80.237617, Name= "Chennai" } + new City { Latitude = 19.228825, Longitude = 72.854118, Name = "Mumbai" }, + new City { Latitude = 28.610001, Longitude = 77.230003, Name = "Delhi" }, + new City { Latitude = 13.067439, Longitude = 80.237617, Name = "Chennai" } }; } + ``` ![Blazor Maps with Multiple Marker Group](./images/Marker/blazor-maps-multiple-marker-group.png) @@ -253,9 +277,10 @@ Multiple groups of markers can be added in the Maps by adding multiple [MapsMark ### Bind different colors and shapes to the marker from data source -Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties, the color and shape of the marker can be applied from the given data source. Bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and set the field names that contains the shape and color values in the data source to the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties. +Using [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties, color and shape can be bound from the data source. Bind the data source to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) and set field names containing shape and color values to `ShapeValuePath` and `ColorValuePath`. ```cshtml + @using Syncfusion.Blazor.Maps @@ -268,6 +293,7 @@ Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz + @code { public class MapMarkerDataSource { @@ -276,22 +302,25 @@ Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz public string name { get; set; } public string color { get; set; } public string shape { get; set; } - }; + } + public List MarkerDataSource = new List { - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe", color="red", shape="Triangle" }, - new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America", color="blue", shape="Pentagon" }, - new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America", color="green", shape="InvertedTriangle" } + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe", color = "red", shape = "Triangle" }, + new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America", color = "blue", shape = "Pentagon" }, + new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America", color = "green", shape = "InvertedTriangle" } }; } + ``` ![Blazor Maps with Custom Marker Shape](./images/Marker/blazor-maps-custom-marker-shape.PNG) ### Setting value path from the data source -The latitude and longitude values are used to determine the location of each marker in the Maps. The [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties. +Latitude and longitude determine the location of each marker. Use [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties to specify the corresponding fields in the marker data source. ```cshtml + @using Syncfusion.Blazor.Maps @@ -305,27 +334,31 @@ The latitude and longitude values are used to determine the location of each mar + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } - }; + } + public List MarkerData = new List { - new City { Latitude=35.145083, Longitude=-117.960260 }, - new City { Latitude=40.724546, Longitude=-73.850344 }, - new City { Latitude= 41.657782, Longitude=-91.533857 } + new City { Latitude = 35.145083, Longitude = -117.960260 }, + new City { Latitude = 40.724546, Longitude = -73.850344 }, + new City { Latitude = 41.657782, Longitude = -91.533857 } }; } + ``` ![Setting Value Path from DataSource in Blazor Maps Marker](./images/Marker/blazor-maps-marker.PNG) ### Setting different sizes for markers individually -The size of the markers in a marker group can be customized using the [WidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_WidthValuePath) and [HeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_HeightValuePath) properties, which allow the user to change the width and height of the markers based on values from the given data source. Bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) tag, and specify the field names containing the width and height values in the data source for the `WidthValuePath` and `HeightValuePath` properties. +Marker sizes within a group can vary using [WidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_WidthValuePath) and [HeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_HeightValuePath) properties, which read width and height from the data source. Bind the data source to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource), and provide the width and height field names. ```cshtml + @using Syncfusion.Blazor.Maps @@ -339,6 +372,7 @@ The size of the markers in a marker group can be customized using the [WidthValu + @code { public class City { @@ -346,20 +380,22 @@ The size of the markers in a marker group can be customized using the [WidthValu public double Longitude { get; set; } public double Width {get; set; } public double Height {get; set; } - }; + } + public List MarkerData = new List { - new City { Latitude=49.95121990866204, Longitude=18.468749999999998, Width=30, Height=30 }, - new City { Latitude=59.88893689676585, Longitude=-109.3359375 , Width=20, Height=20 }, - new City { Latitude=-6.64607562172573, Longitude=-55.54687499999999 , Width=10, Height=10} + new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Width = 30, Height = 30 }, + new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Width = 20, Height = 20 }, + new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Width = 10, Height = 10 } }; } + ``` ![Setting different sizes for markers from DataSource in Blazor Maps Marker](./images/Marker/blazor-maps-marker-sizes.PNG) ## Repositioning the marker using drag and drop -The markers on the map can be dragged and dropped to change their position. To enable marker drag and drop, set the [EnableDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_EnableDrag) property to **true** in the `MapsMarker` setting. +Markers can be repositioned by dragging and dropping. Enable drag-and-drop by setting [EnableDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_EnableDrag) property to **true** in the `MapsMarker` settings. ```cshtml @@ -385,33 +421,35 @@ The markers on the map can be dragged and dropped to change their position. To e public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + public List MarkerDataSource = new List { - new City {Latitude=49.95121990866204,Longitude=18.468749999999998, Name = "Marker 1"}, - new City {Latitude=59.88893689676585,Longitude= -109.3359375, Name = "Marker 2"}, - new City {Latitude=-6.64607562172573,Longitude=-55.54687499999999, Name = "Marker 3"}, - new City {Latitude=23.644385824912135,Longitude=77.83189239539234, Name = "Marker 4"}, - new City {Latitude=63.66569332894224,Longitude= 98.2225173953924, Name = "Marker 5"} + new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Name = "Marker 1" }, + new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Name = "Marker 2" }, + new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Name = "Marker 3" }, + new City { Latitude = 23.644385824912135, Longitude = 77.83189239539234, Name = "Marker 4" }, + new City { Latitude = 63.66569332894224, Longitude = 98.2225173953924, Name = "Marker 5" } }; } + ``` ![Marker with drag and drop functionality in Blazor Maps](./images/Marker/marker-drag-and-drop.gif) -The data of the drag and dropped marker in the marker data source can be customized using the [OnMarkerDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragStart) and [OnMarkerDragEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragEnd) events. When you change the appropriate marker data, the tooltip and legend item text of that marker are automatically updated. The following properties are available in the event argument of the marker drag events. +The marker data can be updated during drag operations using the [OnMarkerDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragStart) and [OnMarkerDragEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragEnd) events. Updating the relevant marker data automatically refreshes tooltip and legend text for that marker. The following properties are available in the event arguments: | Argument Name | Description | |----------------------| --------------------------------------------| -| DataIndex | It represents the index of the data of the dragged marker in the marker data source. | -| Latitude | It represents the latitude coordinate point of the dragged marker. | -| Longitude | It represents the longitude coordinate point for the dragged marker. | -| MarkerIndex | It represents the index of the marker setting. | -| LayerIndex | It represents the index of the layer in which the marker belongs. | -| EventName | It represents the name of the event. | -| X | It represents the horizontal location of the mouse pointer on the map when the drag action is performed. | -| Y | It represents the vertical location of the mouse pointer on the map when the drag action is performed. | +| DataIndex | Index of the dragged marker data in the marker data source. | +| Latitude | Latitude coordinate of the dragged marker. | +| Longitude | Longitude coordinate of the dragged marker. | +| MarkerIndex | Index of the marker setting. | +| LayerIndex | Index of the layer containing the marker. | +| EventName | Name of the event. | +| X | Horizontal mouse position on the map during drag. | +| Y | Vertical mouse position on the map during drag. | -The following example shows how to use marker drag events to customize the data of the drag and dropped marker in the marker data source. +The example below demonstrates customizing marker data in response to drag events. ```cshtml @@ -433,25 +471,30 @@ The following example shows how to use marker drag events to customize the data + @code { public SfMaps maps; + public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + public List MarkerDataSource = new List { - new City {Latitude=49.95121990866204,Longitude=18.468749999999998, Name = "Europe"}, - new City {Latitude=59.88893689676585,Longitude= -109.3359375, Name = "North America"}, - new City {Latitude=-6.64607562172573,Longitude=-55.54687499999999, Name = "Sout America"}, - new City {Latitude=23.644385824912135,Longitude=77.83189239539234, Name = "India"}, - new City {Latitude=63.66569332894224,Longitude= 98.2225173953924, Name = "China"} + new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Name = "Europe" }, + new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Name = "North America" }, + new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Name = "Sout America" }, + new City { Latitude = 23.644385824912135, Longitude = 77.83189239539234, Name = "India" }, + new City { Latitude = 63.66569332894224, Longitude = 98.2225173953924, Name = "China" } }; + public void MarkerDragStartEvent(MarkerDragStartEventArgs args) { // When the marker begins to move on the map, the event is triggered. } + public void MarkerDragEndEvent(MarkerDragEndEventArgs args) { // When the marker on the map stops dragging, the event is triggered. @@ -459,15 +502,17 @@ The following example shows how to use marker drag events to customize the data maps.Refresh(); } } + ``` ![Marker customization using marker drag events in Blazor Maps](./images/Marker/marker-drag-events.gif) ## Marker zooming -The Maps can be initially scaled to the center value based on the marker distance. This can be achieved by setting the [ShouldZoomInitially](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ShouldZoomInitially) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) as **true**. +Maps can initially zoom based on marker distribution by setting [ShouldZoomInitially](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ShouldZoomInitially) property to **true** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -484,28 +529,32 @@ The Maps can be initially scaled to the center value based on the marker distanc + @code { public class MapMarkerDataSource { public double latitude { get; set; } public double longitude { get; set; } public string name { get; set; } - }; + } + public List MarkerDataSource = new List { - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" }, - new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" } + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" }, + new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" } }; } + ``` ![Blazor Maps Marker with Zooming](./images/Marker/blazor-maps-marker-zooming.PNG) ## Disabling Zoom on Marker Click -Maps typically zoom in when you click or double-click on them. This zooming also occurs when you click on a marker. To prevent zooming when clicking on a marker, you can set [ZoomOnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnMarkerClick) to **false** in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). This setting disables zooming specifically for marker clicks. By default, `ZoomOnMarkerClick` is set to **true**. +Maps typically zoom on click or double-click, including when clicking a marker. To disable zooming for marker clicks, set [ZoomOnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnMarkerClick) to **false** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). By default, `ZoomOnMarkerClick` is **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -522,30 +571,34 @@ Maps typically zoom in when you click or double-click on them. This zooming also + @code { public class MapMarkerDataSource { public double latitude { get; set; } public double longitude { get; set; } public string name { get; set; } - }; + } + public List MarkerDataSource = new List { - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" }, - new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" } + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" }, + new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" } }; } + ``` ![Disabling Zoom on Marker Click in Blazor Maps](./images/Marker/blazor-maps-disabling-zooming-on-marker-click.gif) ## Marker clustering -Maps support hiding and clustering markers when they overlap. The number on a cluster indicates how many overlapping markers it contains. When zooming into any cluster location on the map, the number on the cluster decreases, and individual markers become visible. When zooming out, the overlapping markers increase, causing them to cluster again, which increases the count on the cluster. +Maps support clustering of overlapping markers. A cluster displays the count of contained markers. Zooming into a cluster location reduces the count and reveals individual markers; zooming out increases overlap and re-forms clusters. -To enable clustering for markers within a layer, set the [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property of [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **true**. Customization of clustering can be done using the `MapsMarkerClusterSettings` property. +To enable clustering within a layer, set [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property to **true** in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) on the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). Customize clustering using the corresponding `MapsMarkerClusterSettings` properties. ```cshtml + @using Syncfusion.Blazor.Maps @@ -572,38 +625,41 @@ To enable clustering for markers within a layer, set the [AllowClustering](https public double Longitude { get; set; } public string Name { get; set; } public double Area { get; set; } - }; + } + private List LargestCities = new List { - 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 } + 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 } }; } + ``` ![Blazr Maps Marker with Clustering](./images/Marker/blazor-maps-marker-clustering.png) ### Customization of marker cluster -The following properties and classes are available to customize the marker clustering in the Maps component. +The following properties and classes are available to customize marker clustering in the Maps component. -* [MapsLayerMarkerClusterBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterBorder.html) - To customize the color and width of the border of cluster in Maps. -* [MapsLayerMarkerClusterConnectorLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterConnectorLineSettings.html) - To customize the connector line in cluster separating the markers. -* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_DashArray) - To customize the dash array for the marker cluster in Maps. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Fill) - Applies the color of the cluster in Maps. -* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Height) - To customize the height of the marker cluster in Maps. -* [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_ImageUrl) - To customize the URL path for the marker cluster when the cluster shape is set as image in Maps. -* [MapsLayerMarkerClusterLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterLabelStyle.html) - To customize the text in marker cluster. -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Offset) - To customize the offset position for the marker cluster in Maps. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Opacity) - To customize the opacity of the marker cluster. -* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Shape) - To customize the shape for the cluster of markers. -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Width) - To customize the width of the marker cluster in Maps. +* [MapsLayerMarkerClusterBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterBorder.html) - Customizes the border color and width of clusters. +* [MapsLayerMarkerClusterConnectorLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterConnectorLineSettings.html) - Customizes connector lines separating markers in an expanded cluster. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_DashArray) - Sets the dash array for cluster outlines. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Fill) - Applies the cluster fill color. +* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Height) - Sets cluster height. +* [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_ImageUrl) - Sets the image URL when the cluster shape is an image. +* [MapsLayerMarkerClusterLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterLabelStyle.html) - Customizes cluster text. +* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Offset) - Adjusts the cluster offset. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Opacity) - Controls cluster opacity. +* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Shape) - Sets the cluster shape. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Width) - Sets cluster width. ```cshtml + @using Syncfusion.Blazor.Maps @@ -632,7 +688,8 @@ The following properties and classes are available to customize the marker clust public double Longitude { get; set; } public string Name { get; set; } public double Area { get; set; } - }; + } + private List LargestCities = new List { 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 }, @@ -643,15 +700,17 @@ The following properties and classes are available to customize the marker clust new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 } }; } + ``` ![Blazor Maps Marker with Custom Cluster](./images/Marker/blazor-maps-custom-cluster.png) ### Expanding the marker cluster -The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) as **true** to expand the identical markers. If zooming is performed in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again. +Clusters group identical and non-identical markers in nearby locations. Enable expansion by setting [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property to **true** in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html). Zooming in reduces cluster counts and reveals individual markers; zooming out increases counts and re-forms clusters. ```cshtml + @using Syncfusion.Blazor.Maps @@ -667,82 +726,87 @@ The cluster is formed by grouping an identical and non-identical marker from the + @code { public class MapMarkerDataSource { public double latitude { get; set; } public double longitude { get; set; } public string name { get; set; } - }; + } + public List MarkerDataSource = new List { - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" }, - new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" }, - new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" } + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" }, + new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" }, + new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" } }; } + ``` ![Expanding Marker Cluster in Blazor Maps](./images/Marker/blazor-maps-marker-expand-cluster.PNG) ### Clustering markers within each marker group -Marker clustering can be enabled for each marker group in the map by using the [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) tag within the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) of the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) tag. This allows for individual customization of clusters for each marker group which group markers that are located near each other to reduce clutter and improve readability. When the [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property is set to **true**, the markers within each group are clustered and visually represented as separate clusters. As users zoom in, the clusters expand to reveal individual markers, enabling more detailed exploration. Clusters can also be expanded manually by setting the [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property to **true**. The appearance of the clusters and their expansion behavior can be customized using the `MapsMarkerClusterSettings` property, similar to the `MapsMarkerClusterSettings` property, as explained in the sections above. +Clustering can be enabled per marker group by placing [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) inside each [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) within a [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). This enables individual customization of clusters for each group, reducing clutter and improving readability. When [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property is **true**, markers in that group are clustered and can expand on zoom. Manual expansion can be enabled using [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property. Appearance and behavior can be customized using the same `MapsMarkerClusterSettings` options described above. -N> When the `MapsMarkerClusterSettings` tag is enabled for a specific marker group, the `MapsMarkerClusterSettings` tag within the layers becomes ineffective. +N> When `MapsMarkerClusterSettings` is enabled for a specific marker group, the `MapsMarkerClusterSettings` defined within the layer does not take effect. ```cshtml + @using Syncfusion.Blazor.Maps - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @code { public class City { @@ -752,36 +816,41 @@ N> When the `MapsMarkerClusterSettings` tag is enabled for a specific marker gro public string State { get; set; } public string Country { get; set; } } + private List MarkerDataFrance = new List { - new City { Latitude= 48.8584, Longitude= 2.2945, Name= "Eiffel Tower", State= "Paris", Country= "France" }, - new City { Latitude= 48.8606, Longitude= 2.3376, Name= "Louvre Museum", State= "Paris", Country= "France" }, - new City { Latitude= 48.8529, Longitude= 2.3500, Name= "Notre-Dame Cathedral", State= "Paris", Country= "France" }, - new City { Latitude= 48.6360, Longitude= 1.5115, Name= "Mont Saint-Michel", State= "Normandy", Country= "France" } + new City { Latitude = 48.8584, Longitude = 2.2945, Name = "Eiffel Tower", State = "Paris", Country = "France" }, + new City { Latitude = 48.8606, Longitude = 2.3376, Name = "Louvre Museum", State = "Paris", Country = "France" }, + new City { Latitude = 48.8529, Longitude = 2.3500, Name = "Notre-Dame Cathedral", State = "Paris", Country = "France" }, + new City { Latitude = 48.6360, Longitude = 1.5115, Name = "Mont Saint-Michel", State = "Normandy", Country = "France" } }; + private List MarkerDataUSA = new List { - new City { Latitude= 35.019028, Longitude= -85.339439, Name= "Ruby Falls", State= "Tennessee", Country= "United States of America" }, - new City { Latitude= 35.654613, Longitude= -105.996979, Name= "Meow Wolf Santa Fe", State= "New Mexico", Country= "United States of America" }, - new City { Latitude= 36.107216, Longitude= -115.175804, Name= "City Center of Las Vegas", State= "Nevada", Country= "United States of America" }, - new City { Latitude= 36.879047, Longitude= -111.510498, Name= "Horseshoe Bend", State= "Arizona", Country= "United States of America" }, - new City { Latitude= 36.011955, Longitude= -113.810951, Name= "Grand Canyon West Skywalk", State= "Arizona", Country= "United States of America" } + new City { Latitude = 35.019028, Longitude = -85.339439, Name = "Ruby Falls", State = "Tennessee", Country = "United States of America" }, + new City { Latitude = 35.654613, Longitude = -105.996979, Name = "Meow Wolf Santa Fe", State = "New Mexico", Country = "United States of America" }, + new City { Latitude = 36.107216, Longitude = -115.175804, Name = "City Center of Las Vegas", State = "Nevada", Country = "United States of America" }, + new City { Latitude = 36.879047, Longitude = -111.510498, Name = "Horseshoe Bend", State = "Arizona", Country = "United States of America" }, + new City { Latitude = 36.011955, Longitude = -113.810951, Name = "Grand Canyon West Skywalk", State = "Arizona", Country = "United States of America" } }; + private List MarkerDataIndia = new List { - new City { Latitude= 26.985901, Longitude= 75.850700, Name= "Amber Fort, Amer", State= "Rajastan", Country= "India" }, - new City { Latitude= 22.957390, Longitude= 77.625275, Name= "Bhimbetka, Raisen District", State= "Madhya Pradesh", Country= "India" }, - new City { Latitude= 26.809330, Longitude= 75.540527, Name= "Bagru Fort, Bagru", State= "Rajasthan", Country= "India" }, - new City { Latitude= 25.489504, Longitude= 80.330116, Name= "Kalinjar Fort, Banda", State= "Uttar Pradesh", Country= "India" }, - new City { Latitude= 27.988890, Longitude= 76.388336, Name= "Neemrana", State= "Rajasthan", Country= "India" } + new City { Latitude = 26.985901, Longitude = 75.850700, Name = "Amber Fort, Amer", State = "Rajastan", Country = "India" }, + new City { Latitude = 22.957390, Longitude = 77.625275, Name = "Bhimbetka, Raisen District", State = "Madhya Pradesh", Country = "India" }, + new City { Latitude = 26.809330, Longitude = 75.540527, Name = "Bagru Fort, Bagru", State = "Rajasthan", Country = "India" }, + new City { Latitude = 25.489504, Longitude = 80.330116, Name = "Kalinjar Fort, Banda", State = "Uttar Pradesh", Country = "India" }, + new City { Latitude = 27.988890, Longitude = 76.388336, Name = "Neemrana", State = "Rajasthan", Country = "India" } }; } + ``` ![Clustering Marker Within Each Marker Group in Blazor Maps](./images/Marker/blazor-maps-marker-cluster-for-specific-markergroup.PNG) ## Tooltip for marker -Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) to **true**. The [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property in the [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) takes the field name that presents in data source and displays that value as tooltip text. +A tooltip displays additional information about a marker on mouseover or touch end. Enable it by setting [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). Set [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property to the field name in the data source to display as tooltip text. ```cshtml + @using Syncfusion.Blazor.Maps @@ -804,11 +873,13 @@ Tooltip is used to display more information about a marker on mouse over or touc public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + public List HighestPopulation = new List { new City { Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" } }; } + ``` ![Blazor Maps with Marker Tooltip](./images/blazor-maps-marker-tooltip.png) diff --git a/blazor/maps/navigation-line.md b/blazor/maps/navigation-line.md index 0d609bbbbb..854dfccd13 100644 --- a/blazor/maps/navigation-line.md +++ b/blazor/maps/navigation-line.md @@ -1,7 +1,7 @@ --- layout: post title: Navigation Lines in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about navigation lines in Syncfusion Blazor Maps component and much more. +description: Check out and learn how to configure and customize navigation lines in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -9,22 +9,23 @@ documentation: ug # Navigation Lines in Blazor Maps Component -The navigation lines are used to denote the path between two locations. This feature can be used to draw flight or sea routes. Navigation lines are enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Visible) property of the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to **true**. +Navigation lines denote the path between two locations and can represent flight or sea routes. Enable navigation lines by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Visible) property of [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to **true**. ## Customization -The following properties and classes are available in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to customize the navigation line of the Maps component. +The following properties and classes in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) customize navigation lines in Maps: -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color) - To apply the color for navigation lines in Maps. -* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray) - To define the pattern of dashes and gaps that is applied to the outline of the navigation lines. -* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width) - To customize the width of the navigation lines. -* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Angle) - To customize the angle of the navigation lines. -* [MapsNavigationLineHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineHighlightSettings.html) - To customize the highlight settings of the navigation line. -* [MapsNavigationLineSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineSelectionSettings.html) - To customize the selection settings of the navigation line. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color) – Applies the line color. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray) – Defines dash and gap patterns for the line stroke. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width) – Sets the line width. +* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Angle) – Adjusts the curvature angle of the line. +* [MapsNavigationLineHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineHighlightSettings.html) – Configures highlight settings. +* [MapsNavigationLineSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineSelectionSettings.html) – Configures selection settings. -To navigate the line between two cities on the world map, [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Longitude) values are used to indicate the start and end points of navigation lines drawn on Maps. +To draw a line between two cities on the world map, use [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Longitude) values to specify start and end points. ```cshtml + @using Syncfusion.Blazor.Maps @@ -38,20 +39,22 @@ To navigate the line between two cities on the world map, [Latitude](https://hel + ``` ![Blazor Maps with Navigation Lines](./images/NavigationLine/blazor-maps-navigation-line.png) ## Enabling the arrows -To enable the arrow in the navigation line, set the [ShowArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_ShowArrow) property of [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to **true**. The following properties are available in [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to customize the arrow of the navigation lines. +Enable an arrow on the navigation line by setting the [ShowArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_ShowArrow) property of [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to true. Customize arrow appearance with the following properties: -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Color) - To apply the color for arrow of the navigation line. -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_OffSet) - To customize the offset position of the arrow of the navigation line. -* [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Position) - To customize the position of the arrow in navigation line. The possible values can be [**Start**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) and [**End**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_End). -* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Size) - To customize the size of the arrow in pixels. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Color) – Applies the arrow color. +* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_OffSet) – Sets the arrow offset along the line. +* [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) – Positions the arrow on the line. Possible values: [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_End). +* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Size) – Sets the arrow size in pixels. ```cshtml + @using Syncfusion.Blazor.Maps @@ -67,6 +70,7 @@ To enable the arrow in the navigation line, set the [ShowArrow](https://help.syn + ``` -![Blazor Maps with Navigation Line Arrow](./images/NavigationLine/blazor-maps-navigation-line-arrow.PNG) \ No newline at end of file +![Blazor Maps with Navigation Line Arrow](./images/NavigationLine/blazor-maps-navigation-line-arrow.PNG) diff --git a/blazor/maps/polygon.md b/blazor/maps/polygon.md index 1f65684da1..de5daf91fb 100644 --- a/blazor/maps/polygon.md +++ b/blazor/maps/polygon.md @@ -1,7 +1,7 @@ --- layout: post title: Polygon shape in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about polygon shape in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to add, configure and customize polygon shape in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -9,25 +9,26 @@ documentation: ug # Polygon shape in Blazor Maps Component -The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. This section describes how to add polygon shape to the map and customize them. +The Maps component supports adding polygon shapes to a geometry map or an online map using the properties of the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. This section explains how to add polygon shapes to the map and customize them. ## Adding polygon shape -The polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag in the Maps component. The `Points` property uses a collection of latitude and longitude values to define the polygon shape. +A polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag in the Maps component. The `Points` property uses a collection of latitude and longitude values to define the polygon shape. -The `MapsPolygon` tag provides the following properties for customizing the polygon shape of the Maps component. +The `MapsPolygon` tag provides the following properties for customizing polygon shapes in the Maps component. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape. -* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape. -* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape. -* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderOpacity) - It is used to change the opacity of the border in the polygon shape. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Fill) - Changes the color of the polygon shape. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Opacity) - Changes the opacity of the polygon shape. +* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderColor) - Changes the color of the polygon border. +* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderWidth) - Changes the width of the polygon border. +* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderOpacity) - Changes the opacity of the polygon border. -> You can also include **"n"** polygon shapes inside the [MapsPolygons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygons.html) tag. +> Multiple polygon shapes can be included inside the [MapsPolygons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygons.html) tag. -The following example shows how to customize the polygon shape over the geometry map. +The following example shows how to customize a polygon shape on a geometry map. ```cshtml + @using Syncfusion.Blazor.Maps @@ -42,6 +43,7 @@ The following example shows how to customize the polygon shape over the geometry @code { List Points = new List(); + protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); @@ -92,30 +94,31 @@ The following example shows how to customize the polygon shape over the geometry Points.Add(new Coordinate() { Longitude = 34.88539587371454, Latitude = 28.181421087099537 }); } } + ``` ![Blazor Maps with polygon shape](./images/Polygon/blazor-map-polygon-shape-on-maps-layer.png) ## Tooltip -Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Visible) property to **true** in the [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html). Additionally, you need to set the desired content as a value to the [TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipText) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag to show the tooltip. If you add 'n' numbers of polygon shapes, you can add the `TooltipText` property to each polygon, which will display the tooltip for the associated polygon shape. +A tooltip displays additional information about a polygon shape during mouse or touch interaction. Enable the tooltip or tooltip template by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Visible) property to `true` in [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html). Additionally, set the desired content to the [TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipText) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag to show the tooltip. When multiple polygon shapes are added, the `TooltipText` property can be set for each polygon to display the corresponding tooltip. ### Tooltip customization -The following properties are available in the [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html) to customize the appearance of the tooltip. - -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Fill) - Applies the color of the tooltip in the polygon shape. -* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderColor) - To change the color of the border of the tooltip in the polygon shape. -* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderWidth) - To change the width of the border of the tooltip in the polygon shape. -* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderOpacity) - To change the opacity of the border of the tooltip in the polygon shape. -* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontFamily) - To change the font family of the text in the tooltip of the polygon shape. -* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontWeight) - To change the font weight of the text in the tooltip of the polygon shape. -* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontStyle) - To change the font style of the text in the tooltip of the polygon shape. -* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontColor) - To change the font color of the text in the tooltip of the polygon shape. -* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontSize) - To change the font size of the text in the tooltip of the polygon shape. -* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontOpacity) - To change the opacity of the text in the tooltip of the polygon shape. +The following properties in [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html) customize the appearance of the tooltip. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Fill) - Applies the tooltip background color. +* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderColor) - Changes the tooltip border color. +* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderWidth) - Changes the tooltip border width. +* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderOpacity) - Changes the tooltip border opacity. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontFamily) - Changes the tooltip text font family. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontWeight) - Changes the tooltip text weight. +* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontStyle) - Changes the tooltip text style. +* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontColor) - Changes the tooltip text color. +* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontSize) - Changes the tooltip text size. +* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontOpacity) - Changes the tooltip text opacity. ```cshtml + @using Syncfusion.Blazor.Maps @@ -133,6 +136,7 @@ The following properties are available in the [MapsPolygonTooltipSettings](https @code { List Points = new List(); + protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); @@ -190,9 +194,10 @@ The following properties are available in the [MapsPolygonTooltipSettings](https ### Tooltip template -Any HTML element can be rendered in the tooltip of the polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipTemplate) property of the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html). If you add 'n' numbers of polygon shapes, you can add the `TooltipTemplate` property to each polygon, which will display the tooltip for the associated polygon shape. +Any HTML element can be rendered in the tooltip of polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipTemplate) property of [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html). When multiple polygon shapes are added, the `TooltipTemplate` property can be set for each polygon to display the corresponding tooltip. ```cshtml + @using Syncfusion.Blazor.Maps @@ -268,11 +273,12 @@ Any HTML element can be rendered in the tooltip of the polygon shapes using the ## Changing a Polygon Shape to a Line -The rendered polygon shape can be changed to a line shape by setting the [ShapeType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_ShapeType) property to [LineString](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PolygonShapeType.html#Syncfusion_Blazor_Maps_PolygonShapeType_LineString). +A rendered polygon shape can be changed to a line shape by setting the [ShapeType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_ShapeType) property to [LineString](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PolygonShapeType.html#Syncfusion_Blazor_Maps_PolygonShapeType_LineString). -The following example demonstrates how to customize a line shape on an online map, display a tooltip for the line shape, highlight the line shape, and select the line shape on the map. In this example, latitude and longitude values are extracted from coordinates in a JSON file and assigned to the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property within the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. +The following example demonstrates how to customize a line shape on an online map, display a tooltip for the line shape, highlight it, and select it on the map. In this example, latitude and longitude values are extracted from coordinates in a JSON file and assigned to the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property within the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. ```cshtml + @using Syncfusion.Blazor.Maps @inject NavigationManager NavigationManager @inject HttpClient Http; @@ -305,11 +311,11 @@ The following example demonstrates how to customize a line shape on an online ma - } @code { public List Coordinates = new List(); + protected override async Task OnInitializedAsync() { string path = NavigationManager.BaseUri + "line.json"; @@ -342,7 +348,8 @@ The following example demonstrates how to customize a line shape on an online ma public List> Coordinates { get; set; } } } + ``` -> Note: Refer the content of the JSON file [line.json](https://www.syncfusion.com/downloads/support/directtrac/general/ze/line140125043) here. +> Note: Refer to the content of the JSON file [line.json](https://www.syncfusion.com/downloads/support/directtrac/general/ze/line140125043). ![Blazor Maps with line shape](./images/Polygon/blazor-map-line-shape-on-tile-images.gif) diff --git a/blazor/maps/populate-data.md b/blazor/maps/populate-data.md index 0ce20c30d3..f9ac0d69dc 100644 --- a/blazor/maps/populate-data.md +++ b/blazor/maps/populate-data.md @@ -1,7 +1,7 @@ --- layout: post title: Populate Data in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about populate data in Syncfusion Blazor Maps component and much more details. +description: Learn how to provide shape data, bind statistical data and fetch JSON data to populate the Syncfusion Blazor Maps component, with examples. platform: Blazor control: Maps documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Populate Data in Blazor Maps Component -This section explains how to populate data inputs and provide it to the Maps component. +This section explains how to supply data inputs and provide them to the Maps component. ## Geometry types -GeoJSON data contains geometry objects with properties such as geometry types and coordinates. The geometry types are the values present in the geometry objects of the GeoJSON data that specify the type of shape to be rendered, as well as the coordinates that help to draw the shape's boundary line. The supportive geometry types are: +GeoJSON data contains geometry objects with properties such as geometry types and coordinates. Geometry types specify the shape to render, and coordinates define the shape's boundary. The supported geometry types are: | **Shapes** | **Supported** | | --- | --- | @@ -27,15 +27,16 @@ GeoJSON data contains geometry objects with properties such as geometry types an ## Shape data -The shape data collection describes geographical shape information that is available in GeoJSON format. The Map shapes are rendered with this data. The custom shapes such as seat selection in bus, seat selection in a cricket stadium and more useful information can be also added as [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The shape data collection describes geographic shape information in GeoJSON format. Map shapes are rendered from this data. Custom shapes, such as seat selections in a bus or a cricket stadium, can also be added as [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). ## Data source -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component, and it accepts a collection of values as input. For example, a list of objects as input can be provided to the data source. This data source will be used to color the map, display data labels, and display tooltip, among other things. +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property represents statistical data for the Maps component and accepts a collection of values. For example, a list of objects can be provided. This data source is used to color shapes, display data labels, show tooltips, and more. -The data source is populated with list of objects relative to shape data. In the following example, **PopulationDetails** can be used as data source in Maps. +The data source is populated with a list of objects related to the shape data. In the following example, **PopulationDetails** is used as the data source for Maps. ```cshtml + @code{ public class PopulationDetail { @@ -69,20 +70,22 @@ The data source is populated with list of objects relative to shape data. In the } }; } + ``` ## Data binding -The following properties in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) are used for binding data in the Maps component. Both the properties are related to each other. +The following properties in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) are used to bind data in the Maps component. These properties work together. * ShapePropertyPath * ShapeDataPath ### ShapePropertyPath -The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property is used to refer the field name in the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property of shape layers to identify the shape. When the values of [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property from the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property and [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property from the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property match, then the associated object from the data source is bound to the corresponding shape. +The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property refers to the field name in the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) of shape layers used to identify a shape. When the values of [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property from the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) and [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property from the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) match, the associated object from the data source is bound to the corresponding shape. ```cshtml + @using Syncfusion.Blazor.Maps @@ -92,11 +95,13 @@ The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. + ``` -N>`world-map.json` file contains following data and its field **name** value is used to map the corresponding shape with the provided data source. +N> The `world-map.json` file contains the following data, and the **name** field value is used to map the corresponding shape with the provided data source. ```json + [ { "type": "Feature", @@ -109,13 +114,15 @@ N>`world-map.json` file contains following data and its field **name** value is }, ... ] + ``` ### ShapeDataPath -The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property is similar to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property, but it refers to the field name in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property. For example, following population data contains field **Name**, **Population** and **Density**. Here the **Name** field is set to the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to map the corresponding value of field name in shape data. +The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property is similar to [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath), but it refers to the field name in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource). In the following population data, the fields are **Name**, **Population**, and **Density**. The **Name** field is set to [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property to map the corresponding value of the field name in shape data. ```cshtml + @using Syncfusion.Blazor.Maps @@ -134,6 +141,7 @@ The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps public double Population { get; set; } public double Density { get; set; } }; + private List PopulationDetails = new List { new PopulationDetail { Name= "Afghanistan", @@ -143,11 +151,13 @@ The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps ... }; } + ``` -In the above example, both **name** fields contain the same value as **Afghanistan**, this value is matched in both shape data and data source, so that the details associated with **Afghanistan** will be mapped to the corresponding shape and used to color the corresponding shape, display data labels, display tooltips, and more. +In the above example, both **name** fields contain the value **Afghanistan**. This value is matched in both shape data and the data source, so the details associated with **Afghanistan** are mapped to the corresponding shape and used to color the shape, display data labels, and display tooltips. ```cshtml + @using Syncfusion.Blazor.Maps @@ -162,7 +172,7 @@ In the above example, both **name** fields contain the same value as **Afghanist -@code{ +@code { public class PopulationDetail { public string Code { get; set; } @@ -171,6 +181,7 @@ In the above example, both **name** fields contain the same value as **Afghanist public double Population { get; set; } public double Density { get; set; } }; + private List PopulationDetails = new List { new PopulationDetail { Code = "AF", @@ -195,19 +206,21 @@ In the above example, both **name** fields contain the same value as **Afghanist } }; } + ``` ![Blazor Maps with Data Binding](./images/populatedata/blazor-map-data-binding.png) ## Fetching data from JSON file -To retrieve data from a JSON file, you can create a Blazor WebAssembly App or a Blazor Server App. The data from the JSON file is then read, convert it to a C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property. +To retrieve data from a JSON file, create a Blazor WebAssembly app or a Blazor Server app. Read the data from the JSON file, convert it to a C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property. ### Fetching data from JSON file using Blazor WebAssembly App -The **Http.GetFromJsonAsync** is used in the **OnInitializedAsync** lifecycle method to load JSON file data. As this will be executed asynchronously, check whether **populationDensity** is available, render the Maps component, or display the loading statement. +The **Http.GetFromJsonAsync** method is used in the **OnInitializedAsync** lifecycle method to load JSON data. Because this executes asynchronously, check whether **PopulationDensity** is available; then render the Maps component or display a loading message. ```cshtml + @inject HttpClient Http; @using Syncfusion.Blazor.Maps @inject NavigationManager NavigationManager @@ -229,8 +242,10 @@ else } -@code{ + +@code { PopulationData[] PopulationDensity; + protected override async Task OnInitializedAsync() { PopulationDensity = await Http.GetFromJsonAsync(NavigationManager.Uri + "sample-data/PopulationDensity.json"); @@ -245,11 +260,13 @@ else public float Density { get; set; } } } + ``` -Here, the `PopulationDensity.json` file contains following data. +Here, the `PopulationDensity.json` file contains the following data. ```json + [ { "code": "AF", @@ -273,16 +290,18 @@ Here, the `PopulationDensity.json` file contains following data. "density": 15 } ] + ``` ![Blazor Maps with JSON Data Source using WASM App](./images/populatedata/blazor-map-data-binding.png) ### Fetching data from JSON file using Blazor Server App -The **Http.GetAsync** is used in the **OnInitializedAsync** lifecycle method to get the JSON file data and read the JSON file as a string. Then, the GeoJSON data in the string can be converted as a deserialized object list and set in the **DataSource** property of the Maps component. As this will be executed asynchronously, check whether **populationDensity** is available, render the Maps component, or display the loading statement. +The **Http.GetAsync** method is used in the **OnInitializedAsync** lifecycle method to get the JSON file as a response and read it as a string. Then, the JSON data is deserialized to a list of objects and assigned to the **DataSource** property of the Maps component. Because this executes asynchronously, check whether **PopulationDensity** is available; then render the Maps component or display a loading message. ```cshtml + @inject HttpClient Http; @using Syncfusion.Blazor.Maps @using System.Net.Http.Json @@ -290,7 +309,6 @@ The **Http.GetAsync** is used in the **OnInitializedAsync** lifecycle method to @using Newtonsoft.Json; @inject NavigationManager NavigationManager - @if (PopulationDensity == null) {

Loading Maps component...

@@ -308,7 +326,8 @@ else } -@code{ + +@code { public List PopulationDensity; public string result; @@ -330,6 +349,7 @@ else public float Density { get; set; } } } + ``` -![Blazor Maps with JSON Data Source using Blazor Server App](./images/populatedata/blazor-map-data-binding.png) \ No newline at end of file +![Blazor Maps with JSON Data Source using Blazor Server App](./images/populatedata/blazor-map-data-binding.png) diff --git a/blazor/maps/print-and-export.md b/blazor/maps/print-and-export.md index 0ba1eff3a0..4f56d7b520 100644 --- a/blazor/maps/print-and-export.md +++ b/blazor/maps/print-and-export.md @@ -1,7 +1,7 @@ --- layout: post title: Print and export in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about print and export in Syncfusion Blazor Maps component and much more. +description: Check out and learn how to configure print and export feature in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -11,9 +11,10 @@ documentation: ug ## Print -The rendered Maps can be printed directly from the browser by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_PrintAsync) method. To use the print functionality, set the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPrint) property to **true**. +The rendered Maps component can be printed directly from the browser by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_PrintAsync) method. Enable printing by setting the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPrint) property to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -28,12 +29,14 @@ The rendered Maps can be printed directly from the browser by calling the [Print @code { SfMaps maps; + public async Task PrintMap() { // using Maps component reference call 'Print' method await this.maps.PrintAsync(); } } + ``` ![Printing in Blazor Maps](./images/Print/blazor-maps-printing.png) @@ -42,13 +45,14 @@ The rendered Maps can be printed directly from the browser by calling the [Print ### Image Export -To use the image export functionality, set the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowImageExport) property as **true**. The rendered Maps can be exported as an image using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The method requires two parameters: image type and file name. The Maps can be exported as an image in the following formats. +Enable image export by setting the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowImageExport) property to **true**. Export the rendered Maps as an image using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The method accepts the image type and file name. Supported formats: * JPEG * PNG * SVG ```cshtml + @using Syncfusion.Blazor.Maps @@ -61,20 +65,23 @@ To use the image export functionality, set the [AllowImageExport](https://help.s @code { SfMaps Maps; + public async Task ExportMap() { await this.Maps.ExportAsync(ExportType.PNG, "Maps"); } } + ``` ![Exporting in Blazor Maps](./images/Print/blazor-maps-exporting.png) ### PDF Export -To use the PDF export functionality, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPdfExport) property as **true**. The rendered Maps can be exported as PDF using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method requires three parameters: file type, file name and orientation of the PDF document. The orientation of the PDF document can be set as **0** or **1**. **0** indicates the **portrait** and **1** indicates **landscape**. +Enable PDF export by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPdfExport) property to **true**. Export the rendered Maps to PDF using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. This method requires the file type, file name, and the PDF orientation. The orientation value can be set as **0** (portrait) or **1** (landscape). ```cshtml + @using Syncfusion.Blazor.Maps @@ -87,20 +94,23 @@ To use the PDF export functionality, set the [AllowPdfExport](https://help.syncf @code { SfMaps Maps; + public async Task ExportMap() { await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0); } } + ``` ![Blazor Maps with PDF Export](./images/Print/blazor-maps-exporting.png) ### Exporting Maps as base64 string of the file -The image can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Maps can be exported to image as base64 string using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The arguments that are required for this method is image type, file name, orientation of the exported PDF document which must be set as **null** for image export and **0** or **1** for the PDF export and finally **allowDownload** which should be set as **false** to return base64 string. +An image or PDF can be exported as a base64 string for JPEG, PNG, and PDF formats. Export the rendered Maps to a base64 string using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. Provide the image type, file name, orientation (set **null** for image export and **0** or **1** for PDF), and set **allowDownload** to **false** to return a base64 string. ```cshtml + @using Syncfusion.Blazor.Maps @@ -114,12 +124,14 @@ The image can be exported as base64 string for the JPEG, PNG and PDF formats. Th @code { SfMaps Maps; string exportString; + public async Task export() { exportString = await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0, false); Console.WriteLine(exportString); } } + ``` N>Add the below service in Program.cs file if the size of the Maps is too large. @@ -127,13 +139,14 @@ builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMess ### Export the tile Maps -The rendered Maps with providers such as OSM, Bing and other map providers can be exported using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. It supports the following export formats. +Maps using tile providers such as OSM, Bing, and other providers can be exported using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. Supported export formats: * JPEG * PNG * PDF ```cshtml + @using Syncfusion.Blazor.Maps @@ -146,11 +159,13 @@ The rendered Maps with providers such as OSM, Bing and other map providers can b @code { SfMaps Maps; + public async Task ExportMap() { await this.Maps.ExportAsync(ExportType.PNG, "OSM Map"); } } + ``` -![Blazor Maps with OSM Export](./images/Print/blazor-maps-osm-export.png) \ No newline at end of file +![Blazor Maps with OSM Export](./images/Print/blazor-maps-osm-export.png) diff --git a/blazor/maps/providers/azure-maps.md b/blazor/maps/providers/azure-maps.md index 30153ddb4a..5cd67046fd 100644 --- a/blazor/maps/providers/azure-maps.md +++ b/blazor/maps/providers/azure-maps.md @@ -1,7 +1,7 @@ --- layout: post title: Azure Maps in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about Azure Maps in the Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to use Azure Maps in the Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,15 +9,16 @@ documentation: ug # Azure Maps in Blazor Maps Component -Azure Maps is yet another online Maps provider, owned by Microsoft. As like OSM and Bing Maps, it provides Maps tile images based on our requests and combines those images into a single one to display Maps area. +Azure Maps is an online map tile provider from Microsoft. Similar to OSM and Bing Maps, it serves map tile images on request and composites them to display the map area. ## Adding Azure Maps -The Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by online map providers. In the meantime, a subscription key is required for Azure Maps. Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then added the key to the URL. +Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by the online map provider. A subscription key is required for Azure Maps. Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then add the key to the URL. N>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/legal/). ```cshtml + @using Syncfusion.Blazor.Maps @@ -26,15 +27,17 @@ N>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/lega + ``` ![Blazor Azure Maps](../images/MapProviders/blazor-azure-map.png) ## Enable zooming and panning -The Azure Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area. +The Azure Maps layer supports zooming and panning. Zooming provides a closer view of a specific area for detailed analysis, and panning moves the map to focus on a targeted area. ```cshtml + @using Syncfusion.Blazor.Maps @@ -50,15 +53,17 @@ The Azure Maps layer can be zoomed and panned. Zooming helps to get a closer loo + ``` ![Blazor Azure Maps with zooming and panning](../images/MapProviders/blazor-azure-map-zooming.png) ## Adding markers and navigation line -Markers can be added to the layers of Azure Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of the Azure Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). +Markers can be added to Azure Maps layers by providing latitude and longitude coordinates in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be drawn over the Azure Maps layer to highlight paths between locations by providing latitude and longitude coordinates in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). ```csharp + @using Syncfusion.Blazor.Maps @@ -81,27 +86,30 @@ Markers can be added to the layers of Azure Maps by setting the corresponding lo -@code{ +@code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } + private List Cities = new List { new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} }; } + ``` ![Blazor Azure Maps with markers and navigation line](../images/MapProviders/blazor-azure-map-marker-and-line.png) ## Adding sublayer -Any GeoJSON shape can be rendered as a sublayer on top of the Azure Maps layer for highlighting a particular continent or country in Azure maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. +Any GeoJSON shape can be rendered as a sublayer over the Azure Maps layer to highlight a continent or country. Add another layer and set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -115,15 +123,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the Azure Maps layer f + ``` ![Blazor Azure Maps with sublayer](../images/MapProviders/blazor-azure-map-sublayer.png) ## Enable legend -The legend can be added to the Azure Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend can be added to Azure Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -151,7 +161,7 @@ The legend can be added to the Azure Maps by setting the [Visible](https://help. -@code{ +@code { public class PopulationCityDetails { public string Name { get; set; } @@ -160,20 +170,21 @@ The legend can be added to the Azure Maps by setting the [Visible](https://help. public double Population { get; set; } public string Color { get; set; } }; + public List PopulatedCities = new List { - new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"}, - new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"}, - new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"}, - new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"}, - new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"}, - new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"}, - new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"}, - new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"}, - new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"}, - new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"} + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" }, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" }, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" }, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" }, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" }, + new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" }, + new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" }, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" }, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" }, + new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" } }; } ``` -![Blazor Azure Maps with legend](../images/MapProviders/blazor-azure-map-legend.png) \ No newline at end of file +![Blazor Azure Maps with legend](../images/MapProviders/blazor-azure-map-legend.png) diff --git a/blazor/maps/providers/bing-maps.md b/blazor/maps/providers/bing-maps.md index 6f9504a488..8069b81a46 100644 --- a/blazor/maps/providers/bing-maps.md +++ b/blazor/maps/providers/bing-maps.md @@ -9,13 +9,14 @@ documentation: ug # Bing Maps in Blazor Maps Component -Bing Maps is an online Maps provider, owned by Microsoft, for accessing the external geospatial imagery services for deep-zoom satellite view which is supported in the Blazor Maps component. This provides the ability to visualize satellite, aerial, and street Maps without using any external shape files. As like OSM, it provides Maps tile images based on the requests and combines those images into a single one to display Maps area. +Bing Maps is an online map provider from Microsoft that offers external geospatial imagery services for deep-zoom satellite views supported by the Blazor Maps component. It enables visualization of satellite, aerial, and street maps without external shapefiles. Similar to OSM, it supplies map tile images based on requests and combines them to display the required map area. ## Adding Bing Maps -The Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the URL generated from the `GetBingUrlTemplate` method in the Maps component. The format of the required URL of Bing Maps varies from other map providers. As a result, a built-in `GetBingUrlTemplate` method has been included that returns the URL in a generic format. In the meantime, a subscription key is required for Bing Maps. Follow the steps in this [link](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key) to generate an API key, then append it to the Bing Maps URL before passing it to the `GetBingUrlTemplate` method. The URL returned by this method must be passed to the `UrlTemplate` property. +Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the URL generated from the `GetBingUrlTemplate` method in the Maps component. The required Bing Maps URL format differs from other providers; therefore, the built-in `GetBingUrlTemplate` method returns a URL in a generic format. A subscription key is required for Bing Maps. Follow the steps in the Bing Maps key creation page to generate an API key, then append it to the Bing Maps URL before passing it to the `GetBingUrlTemplate` method. The URL returned by this method must be assigned to the `UrlTemplate` property. ```cshtml + @using Syncfusion.Blazor.Maps @@ -26,11 +27,13 @@ The Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusi @code { public string UrlTemplate; + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key="); } } + ``` N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key. @@ -39,18 +42,19 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing ## Types of Bing Maps -Bing Maps provides different types of Maps and it can be viewed in the Maps component. +Bing Maps provides multiple map types that can be displayed in the Maps component. -* **Aerial** - Displays satellite images to highlight roads and major landmarks for easy identification. -* **AerialWithLabelsOnDemand** - Displays aerial Maps with labels for the continent, country, ocean, etc. -* **Road** - Displays the default Maps view of roads, buildings, and geography. -* **CanvasDark** - Displays dark version of the road Maps. -* **CanvasLight** - Displays light version of the road Maps. -* **CanvasGray** - Displays grayscale version of the road Maps. +* **Aerial** - Displays satellite imagery highlighting roads and major landmarks for easy identification. +* **AerialWithLabelsOnDemand** - Displays aerial maps with labels for continents, countries, oceans, and more. +* **Road** - Displays the default view of roads, buildings, and geography. +* **CanvasDark** - Displays a dark-themed version of the road map. +* **CanvasLight** - Displays a light-themed version of the road map. +* **CanvasGray** - Displays a grayscale version of the road map. -The above types can also be rendered in the Maps component by specifying their URL in the `UrlTemplate` property in the `MapsLayer` class. You can learn more about the available types and the URL for it by visiting the official websites of Bing Maps. +These types can be rendered by specifying their URLs in the `UrlTemplate` property of the `MapsLayer` class. For available types and corresponding URLs, refer to the official Bing Maps documentation. ```cshtml + @using Syncfusion.Blazor.Maps @@ -61,11 +65,13 @@ The above types can also be rendered in the Maps component by specifying their U @code { public string UrlTemplate; + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/CanvasGray?output=json&uriScheme=https&key="); } } + ``` N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key. @@ -74,9 +80,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing ## Enable zooming and panning -Bing Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area. +The Bing Maps layer supports zooming and panning. Zooming provides a closer view of a specific region for detailed analysis. Panning moves the map to focus on the target area. ```cshtml + @using Syncfusion.Blazor.Maps @@ -94,11 +101,13 @@ Bing Maps layer can be zoomed and panned. Zooming helps to get a closer look at @code { public string UrlTemplate; + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key="); } } + ``` N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key. @@ -107,9 +116,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing ## Adding markers and navigation line -Markers can be added to the layers of Bing Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of an Bing Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). +Markers can be added to Bing Maps layers by setting the location coordinates (latitude and longitude) using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be drawn on top of a Bing Maps layer to highlight a path between locations by setting the location coordinates in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -133,22 +143,27 @@ Markers can be added to the layers of Bing Maps by setting the corresponding loc @code { + public string UrlTemplate; + public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } + private List Cities = new List { new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} }; - public string UrlTemplate; + + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key="); } } + ``` N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key. @@ -157,9 +172,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing ## Adding sublayer -Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer for highlighting a particular continent or country in Bing Maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. +Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer to highlight a specific continent or country by adding another layer and setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -175,11 +191,13 @@ Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer fo @code { public string UrlTemplate; + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/CanvasGray?output=json&uriScheme=https&key="); } } + ``` N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key. @@ -188,9 +206,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing ## Enable legend -The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend can be added to tile maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -218,7 +237,9 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s -@code{ +@code { + public string UrlTemplate; + public class PopulationCityDetails { public string Name { get; set; } @@ -227,19 +248,20 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s public double Population { get; set; } public string Color { get; set; } }; + public List PopulatedCities = new List { - new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"}, - new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"}, - new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"}, - new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"}, - new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"}, - new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"}, - new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"}, - new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"}, - new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"}, - new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"} + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" }, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" }, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" }, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" }, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" }, + new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" }, + new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" }, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" }, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" }, + new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" } }; - public string UrlTemplate; + protected override async Task OnInitializedAsync() { UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key="); @@ -248,4 +270,4 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s ``` -![Blazor Bing Maps with Legend](../images/MapProviders/blazor-bing-map-legend.png) \ No newline at end of file +![Blazor Bing Maps with Legend](../images/MapProviders/blazor-bing-map-legend.png) diff --git a/blazor/maps/providers/google-maps.md b/blazor/maps/providers/google-maps.md index d3c2234edf..4a4dbe0683 100644 --- a/blazor/maps/providers/google-maps.md +++ b/blazor/maps/providers/google-maps.md @@ -1,7 +1,7 @@ --- layout: post title: Google Maps in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about displaying Google Maps in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to display Google Maps tiles in the Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,32 +9,32 @@ documentation: ug # Google Maps in Blazor Maps component -Google Maps is an online maps provider owned by Google. It provides map tile images based on user requests. The Syncfusion® Blazor Maps component combines these images into a single view to display the map. You can display Google Maps by specifying their tile service URL in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. +Google Maps is an online map provider owned by Google. It provides map tile images based on requests. The Syncfusion® Blazor Maps component composes these tiles into a single view to render the map. Google Maps tiles can be displayed by specifying the tile service URL in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. ## Displaying Google Maps -The Google Map tile service can be accessed using the following URL: +The Google Maps tile service can be accessed using the following URL: https://tile.googleapis.com/v1/2dtiles/z/x/y?session=YOUR_SESSION_TOKEN&key=YOUR_API_KEY -In the above URL template, +In this URL template: -* {z} - It represents the zoom level of the map. -* {x} - It represents the horizontal position of the tile. -* {y} - It represents the vertical position of the tile. +* {z} - Represents the map zoom level. +* {x} - Represents the horizontal tile index. +* {y} - Represents the vertical tile index. -These placeholders are replaced by **level**, **tileX**, and **tileY**, respectively, to retrieve the correct map tile. +These placeholders map to **level**, **tileX**, and **tileY**, respectively, to fetch the correct map tile. -N>You can refer this documentation [link](https://developers.google.com/maps/documentation/tile/roadmap) for the latest URL template for Google Maps. +N> Refer to the Google documentation at https://developers.google.com/maps/documentation/tile/roadmap for the latest Google Maps URL template. -Below are the outlined steps to integrate Google Maps tiles into the Syncfusion® Maps component. +Below are the steps to integrate Google Maps tiles into the Syncfusion® Maps component. -1. Generate an API key from the Google Cloud Platform. -2. Generate a session token to retrieve Google Map tiles. -3. Initialize the Syncfusion® Maps component using the Google Maps tile service URL, including the generated session token and API key. +1. Generate an API key from Google Cloud Platform. +2. Generate a session token to retrieve Google Maps tiles. +3. Initialize the Syncfusion® Maps component using the Google Maps tile service URL, including the session token and API key. -Here's a step-by-step explanation of how to integrate Google Maps tiles into the Syncfusion® Maps component using the provided code: +The following walkthrough explains how to integrate Google Maps tiles into the Syncfusion® Maps component using the provided code. -**STEP 1**: Generate an API key from the Google Cloud Platform by enabling the necessary APIs, such as the Google Maps Tile API and Google Maps API. This key is crucial for authentication and must be included in every API call. Follow the steps in [this link](https://developers.google.com/maps/documentation/tile/get-api-key) to generate an API key. +**STEP 1**: Generate an API key from Google Cloud Platform by enabling the necessary APIs, such as the Google Maps Tile API and Google Maps API. This key is required for authentication and must be included in each API call. Follow the steps in https://developers.google.com/maps/documentation/tile/get-api-key to generate an API key. ```cshtml @@ -57,7 +57,7 @@ protected override async Task OnInitializedAsync() ``` -**STEP 2**: The **FetchSessionToken** function generates a session token, which is needed to retrieve Google Map tiles, by sending a POST request to the **createSession** endpoint of the Google Maps Tile API. +**STEP 2**: The **FetchSessionToken** method generates a session token for retrieving Google Maps tiles by sending a POST request to the **createSession** endpoint of the Google Maps Tile API. ```cshtml @@ -123,7 +123,7 @@ private class ErrorDetails ``` -**STEP 3**: To initialize the Syncfusion® Maps component, the **FetchSessionToken** function is invoked in the **OnInitializedAsync** method. After retrieving the session token, both the session token and the API key are appended to the `UrlTemplate` property of the Maps component. This ensures secure authentication and proper access to the map tiles, allowing the Syncfusion® Maps component to display the map with the appropriate data. +**STEP 3**: To initialize the Syncfusion® Maps component, invoke **FetchSessionToken** in **OnInitializedAsync**. After retrieving the session token, append both the session token and the API key to the `UrlTemplate` property of the Maps component. This enables authenticated access to map tiles, allowing the Syncfusion® Maps component to render the map with the required data. ```cshtml @@ -136,7 +136,7 @@ private class ErrorDetails ``` -In the following example, the Google maps is displayed by setting the `UrlTemplate` property with its tile server URL. +In the following example, Google Maps tiles are displayed by setting the `UrlTemplate` property with the tile server URL. ```cshtml @@ -239,9 +239,10 @@ In the following example, the Google maps is displayed by setting the `UrlTempla ## Enable zooming and panning -The Google Maps layer supports both zooming and panning. Zooming allows you to closely examine a particular area on the map for in-depth analysis, while panning enables you to navigate around the map to focus on the desired area. To enable zooming and panning, set the `Enable` property to **true** in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). +The Google Maps layer supports both zooming and panning. Zooming provides a closer view of a specific area for detailed analysis, while panning enables navigation across the map to focus on the desired area. To enable zooming and panning, set the `Enable` property to **true** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -261,13 +262,14 @@ The Google Maps layer supports both zooming and panning. Zooming allows you to c ![Blazor Google Maps with Zooming and Panning](../images/MapProviders/Google-maps/blazor-google-maps-zooming.png) -N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps). +N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section. ## Adding markers and navigation line -Markers can be added to the Google Maps layer by setting the latitude and longitude coordinates of the desired location using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Additionally, navigation lines can be added on top of the Google Maps layer to highlight paths between various places by specifying the corresponding latitude and longitude coordinates in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). +Markers can be added to the Google Maps layer by setting the latitude and longitude of the location using the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be overlaid on the Google Maps layer to highlight paths between locations by providing the corresponding latitude and longitude values in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -290,29 +292,32 @@ Markers can be added to the Google Maps layer by setting the latitude and longit -@code{ +@code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } + private List Cities = new List { - new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, - new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} + new City { Latitude = 34.060620, Longitude = -118.330491, Name = "California" }, + new City{ Latitude = 40.724546, Longitude = -73.850344, Name = "New York"} }; } + ``` ![Blazor Google Maps with Markers and Navigation Line](../images/MapProviders/Google-maps/blazor-google-maps-marker-and-line.png) -N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps). +N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section. ## Adding sublayer -A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to highlight a specific continent or country. This is achieved by adding another layer using [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and setting its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property to **SubLayer**. +A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to highlight a specific continent or country. This is done by adding another layer using [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and setting its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property to **SubLayer**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -326,19 +331,21 @@ A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to + ``` ![Blazor Google Maps with Sublayer](../images/MapProviders/Google-maps/blazor-google-maps-sublayer.png) -N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps). +N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section. ## Enable legend -The legend can be added to the Google Maps layer by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend can be added to the Google Maps layer by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. -In the example below, the legend is added to the markers on the Google Maps layer. +In the following example, the legend is associated with markers on the Google Maps layer. ```cshtml + @using Syncfusion.Blazor.Maps @@ -366,7 +373,7 @@ In the example below, the legend is added to the markers on the Google Maps laye -@code{ +@code { public class PopulationCityDetails { public string Name { get; set; } @@ -375,17 +382,18 @@ In the example below, the legend is added to the markers on the Google Maps laye public double Population { get; set; } public string Color { get; set; } }; + public List PopulatedCities = new List { - new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"}, - new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"}, - new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"}, - new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"}, - new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"}, - new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"}, - new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"}, - new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"}, - new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"}, - new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"} + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" }, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" }, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" }, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" }, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" }, + new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" }, + new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" }, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" }, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" }, + new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" } }; } @@ -393,4 +401,4 @@ In the example below, the legend is added to the markers on the Google Maps laye ![Blazor Google Maps with Legend](../images/MapProviders/Google-maps/blazor-google-maps-legend.png) -N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps). \ No newline at end of file +N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section. diff --git a/blazor/maps/providers/openstreetmap.md b/blazor/maps/providers/openstreetmap.md index 2b99cd273d..b5580fddc8 100644 --- a/blazor/maps/providers/openstreetmap.md +++ b/blazor/maps/providers/openstreetmap.md @@ -1,7 +1,7 @@ --- layout: post title: OpenStreetMap in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about OpenStreetMap in Syncfusion Blazor Maps component and much more details. +description: Check out and learn here all about OpenStreetMap in Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,13 +9,14 @@ documentation: ug # OpenStreetMap in Blazor Maps Component -The OpenStreetMap (OSM) is the online Maps provider built by a community of developers. It is free to use under an open license. It allows to view geographical data in a collaborative way from anywhere on the earth. The OSM map provides small tile images based on the requests and combines those images into a single image to display the map area in the Maps component. +OpenStreetMap (OSM) is a collaborative map provider that offers free, openly licensed map tiles. It serves small tile images based on requests and combines them to render the visible map area in the Maps component. ## Adding OpenStreetMap -The OSM Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the OSM tile server URL. For more details about the OSM tile server, refer [here](https://wiki.openstreetmap.org/wiki/Tiles). +Render OSM tiles by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property to the OSM tile server URL. For details about OSM tile servers, see the OpenStreetMap tiles documentation. ```cshtml + @using Syncfusion.Blazor.Maps @@ -23,15 +24,17 @@ The OSM Maps can be rendered by setting the [UrlTemplate](https://help.syncfusio + ``` ![Blazor OpenStreetMap](../images/MapProviders/blazor-open-sreet-map.png) ## Enable zooming and panning -The OSM Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area. +The OSM layer supports zooming and panning. Zooming provides a closer view of specific regions for detailed analysis, and panning moves the map to focus on a target area. ```cshtml + @using Syncfusion.Blazor.Maps @@ -46,15 +49,17 @@ The OSM Maps layer can be zoomed and panned. Zooming helps to get a closer look + ``` ![Blazor OpenStreetMap with zooming](../images/MapProviders/blazor-open-street-map-zooming.png) ## Adding markers and navigation line -Markers can be added to the layers of OSM Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of an OSM Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). +Markers can be added to OSM layers by providing latitude and longitude for each location using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). A navigation line can be drawn to highlight a path between locations by supplying coordinate arrays in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -77,27 +82,30 @@ Markers can be added to the layers of OSM Maps by setting the corresponding loca -@code{ +@code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } + private List Cities = new List { - new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, - new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} + new City { Latitude = 34.060620, Longitude = -118.330491, Name = "California" }, + new City{ Latitude = 40.724546, Longitude = -73.850344, Name = "New York"} }; } + ``` ![Blazor OpenStreetMap with Markers and Navigation Line](../images/MapProviders/blazor-open-street-map-marker-and-line.png) ## Adding sublayer -Any GeoJSON shape can be rendered as a sublayer on top of the OSM Maps layer for highlighting a particular continent or country in the OSM map by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. +Any GeoJSON shape can be rendered as a sublayer on top of the OSM layer to emphasize a specific continent or country. Add another layer and set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -111,15 +119,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the OSM Maps layer for + ``` ![Blazor OpenStreetMap with SubLayer](../images/MapProviders/blazor-open-street-map-sublayer.png) ## Enable legend -The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend can be added to tile maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -147,7 +157,7 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s -@code{ +@code { public class PopulationCityDetails { public string Name { get; set; } @@ -156,20 +166,21 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s public double Population { get; set; } public string Color { get; set; } }; + public List PopulatedCities = new List { - new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"}, - new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"}, - new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"}, - new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"}, - new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"}, - new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"}, - new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"}, - new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"}, - new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"}, - new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"} + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8"}, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4"}, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082"}, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67"}, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3"}, + new PopulationCityDetails { Name = "Cairo ", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0"}, + new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647"}, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF"}, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD"}, + new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E"} }; } ``` -![Blazor OpenStreetMap with Legend](../images/MapProviders/blazor-open-street-map-legend.png) \ No newline at end of file +![Blazor OpenStreetMap with Legend](../images/MapProviders/blazor-open-street-map-legend.png) diff --git a/blazor/maps/providers/other-maps.md b/blazor/maps/providers/other-maps.md index d09a1f85d1..588e9c2c29 100644 --- a/blazor/maps/providers/other-maps.md +++ b/blazor/maps/providers/other-maps.md @@ -1,7 +1,7 @@ --- layout: post title: Other Maps in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about other maps in Syncfusion Blazor Maps component and much more details. +description: Check out and learn here all about other maps in Syncfusion Blazor Maps component and much more details. platform: Blazor control: Maps documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Other Maps in Blazor Maps Component -Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion® Blazor Maps component. +Apart from OpenStreetMap and Bing Maps, maps from other online providers can be rendered by assigning the provider’s tile URL to the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. The URL template design supports any provider that follows the standard tile format shown below. Sample Template: https://< domain_name >/maps/basic/{z}/{x}/{y}.png @@ -17,11 +17,12 @@ Sample Template: https://< domain_name >/maps/basic/{z}/{x}/{y}.png * "${x}" - It indicates tile image x-position (tileX). * "${y}" - It indicates tile image y-position (tileY). -In this case, the key generated for those online map service providers can also be appended to the URL. This allows to create personalized Maps with your own content and imagery. +If an access key is required by the provider, append it to the URL to load personalized maps with custom content and imagery. -Following is an example of how to add a TomTom map. You can generate an API key by following the steps in this [link](https://developer.tomtom.com/map-display-api/documentation/product-information/introduction) and then adding the key to the URL. +The following example shows how to add a TomTom map. Generate an API key using the steps in the TomTom documentation and append the key to the URL. ```cshtml + @using Syncfusion.Blazor.Maps @@ -30,15 +31,17 @@ Following is an example of how to add a TomTom map. You can generate an API key + ``` ![Blazor TomTom Maps](../images/MapProviders/blazor-tomtom-maps.png) **Enable zooming and panning** -Tile Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area. +Tile map layers support zooming and panning. Zooming provides a closer view for detailed analysis. Panning moves the map to focus on a specific area. ```cshtml + @using Syncfusion.Blazor.Maps @@ -54,15 +57,17 @@ Tile Maps layer can be zoomed and panned. Zooming helps to get a closer look at + ``` ![Blazor TomTom Maps with Zooming and Panning](../images/MapProviders/blazor-tomtom-maps-zooming.png) **Adding markers and navigation line** -Markers can be added to the layers of tile Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be added on top of the tile Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). +Markers can be added to tile layers by providing the latitude and longitude for each location using the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be drawn to highlight a path between locations using [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html). ```csharp + @using Syncfusion.Blazor.Maps @@ -85,27 +90,30 @@ Markers can be added to the layers of tile Maps by setting the corresponding loc -@code{ +@code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } + private List Cities = new List { new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} }; } + ``` ![Blazor TomTom Maps with Markers and Navigation Line](../images/MapProviders/blazor-tomtom-maps-marker-and-line.png) **Adding sublayer** -Any GeoJSON shape can be rendered as a sublayer on top of the tile Maps layer for highlighting a particular continent or country in tile maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. +Any GeoJSON shape can be rendered as a sublayer on top of the tile layer to highlight a continent or country by adding another layer and setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -119,15 +127,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the tile Maps layer fo + ``` ![Blazor TomTom Maps with Sublayer](../images/MapProviders/blazor-tomtom-map-sublayer.png) **Enable legend** -The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. +A legend can be added to a tile map by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -155,7 +165,7 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s -@code{ +@code { public class PopulationCityDetails { public string Name { get; set; } @@ -164,17 +174,18 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s public double Population { get; set; } public string Color { get; set; } }; + public List PopulatedCities = new List { - new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"}, - new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"}, - new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"}, - new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"}, - new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"}, - new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"}, - new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"}, - new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"}, - new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"}, - new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"} + new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" }, + new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" }, + new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" }, + new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" }, + new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" }, + new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" }, + new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" }, + new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" }, + new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" }, + new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E"} }; } @@ -184,12 +195,13 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s ## Other supportive online map service providers -The Maps component can also render the following online map service providers, which are listed below. +The Maps component can render maps from the following online providers: -* MapBox -* ESRI +- MapBox +- ESRI ```cshtml + @using Syncfusion.Blazor.Maps @@ -202,6 +214,7 @@ The Maps component can also render the following online map service providers, w --> + ``` -![Blazor MapBox Map](../images/MapProviders/blazor-mapbox-map.png) \ No newline at end of file +![Blazor MapBox Map](../images/MapProviders/blazor-mapbox-map.png) diff --git a/blazor/maps/shapefile.md b/blazor/maps/shapefile.md index 9a218146b8..c659b70cbd 100644 --- a/blazor/maps/shapefile.md +++ b/blazor/maps/shapefile.md @@ -1,7 +1,7 @@ --- layout: post title: Shapefile in Blazor Maps component | Syncfusion -description: Checkout and learn here all about to view shapefile in Syncfusion Blazor Maps component and much more details. +description: Check out and learn how to view and work with shapefiles in the Syncfusion Blazor Maps component for better map rendering. platform: Blazor control: Maps documentation: ug @@ -9,15 +9,16 @@ documentation: ug # Shapefile in Blazor Maps Component -The shapefile is a popular geospatial vector data format for storing location-based information such as shapes, spatial locations, and pertinent properties of geographic landmarks. +A shapefile is a widely used geospatial vector data format for storing geographic features, their spatial locations, and associated attribute data. ## Importing and viewing shapefile -The shapefile can be used to render vector shape map in the Maps component by specifying the shapefile's remotely hosted file path in the [MapsLayer's](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property. +A shapefile can render a vector shape map in the Maps component by providing the remotely hosted file path in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property. -> Only shapefiles hosted on a remote server are currently supported by our Maps component. +> Only shapefiles hosted on a remote server are currently supported by the Maps component. ```cshtml + @using Syncfusion.Blazor.Maps
@@ -52,35 +53,38 @@ The shapefile can be used to render vector shape map in the Maps component by sp public string Name { get; set; } public string Color { get; set; } }; + public List TopUniversities = new List { - new TopUniversitiesDetails { Name="University of Washington", Latitude=47.655548, Longitude=-122.303200 , Color = "#623e8c" }, - new TopUniversitiesDetails { Name="CUNY Brooklyn College", Latitude=40.631920, Longitude= -73.952904, Color="#45738a" }, - new TopUniversitiesDetails { Name="Purdue University", Latitude=40.425869, Longitude=-86.908066, Color="#5fb8ad" }, - new TopUniversitiesDetails { Name="University of Florida", Latitude=29.643946, Longitude=-82.355659, Color="#5fb87b" }, - new TopUniversitiesDetails { Name="Oklahoma State University", Latitude=35.471901, Longitude=-97.581794, Color="#99b85f" }, - new TopUniversitiesDetails { Name="University of North Carolina at Chapel Hill", Latitude=35.904613, Longitude=-79.046761, Color="#a1931a" }, - new TopUniversitiesDetails { Name="California State University-Long Beach", Latitude=33.783823, Longitude=-118.114090, Color="#a1501a" }, - new TopUniversitiesDetails { Name="California State University-Los Angeles", Latitude=34.022415, Longitude=-118.285530, Color="#db4040" }, - new TopUniversitiesDetails { Name="Indiana University-Bloomington", Latitude=39.168804, Longitude=-86.536659, Color="#e227e8" }, - new TopUniversitiesDetails { Name="University of Illinois at Chicago", Latitude=41.789722, Longitude=-87.599724, Color="#0dff00" } + new TopUniversitiesDetails { Name = "University of Washington", Latitude = 47.655548, Longitude = -122.303200 , Color = "#623e8c" }, + new TopUniversitiesDetails { Name = "CUNY Brooklyn College", Latitude = 40.631920, Longitude = -73.952904, Color = "#45738a" }, + new TopUniversitiesDetails { Name = "Purdue University", Latitude = 40.425869, Longitude = -86.908066, Color = "#5fb8ad" }, + new TopUniversitiesDetails { Name = "University of Florida", Latitude = 29.643946, Longitude = -82.355659, Color = "#5fb87b" }, + new TopUniversitiesDetails { Name = "Oklahoma State University", Latitude = 35.471901, Longitude = -97.581794, Color = "#99b85f" }, + new TopUniversitiesDetails { Name = "University of North Carolina at Chapel Hill", Latitude = 35.904613, Longitude = -79.046761, Color = "#a1931a" }, + new TopUniversitiesDetails { Name = "California State University-Long Beach", Latitude = 33.783823, Longitude = -118.114090, Color = "#a1501a" }, + new TopUniversitiesDetails { Name = "California State University-Los Angeles", Latitude = 34.022415, Longitude = -118.285530, Color = "#db4040" }, + new TopUniversitiesDetails { Name = "Indiana University-Bloomington", Latitude = 39.168804, Longitude = -86.536659, Color = "#e227e8" }, + new TopUniversitiesDetails { Name = "University of Illinois at Chicago", Latitude = 41.789722, Longitude = -87.599724, Color = "#0dff00" } }; } + ``` ![Shapefile rendered in Blazor Maps](./images/Shapefile/blazor-shapefile.png) ## Multilayer -The shapefile map, like GeoJSON map, can be rendered in a multilayer structure, as described in [this section](https://blazor.syncfusion.com/documentation/maps/layers#multilayer). The shapefile map can be added to different layers in the ways listed below. +A shapefile map, like a GeoJSON map, can be rendered using a multilayer structure, as described in [this section](https://blazor.syncfusion.com/documentation/maps/layers#multilayer). A shapefile map can be added to different layers in the following ways: -1. The shapefile map can be displayed as a sublayer over the online map providers. -2. The shapefile map can be displayed as a sublayer above the GeoJSON map. -3. The GeoJSON map can be displayed as a sublayer over the shapefile map. -4. Shapefiles can be displayed as both main and sublayer layers. +1. Display the shapefile map as a sublayer over online map providers. +2. Display the shapefile map as a sublayer above the GeoJSON map. +3. Display the GeoJSON map as a sublayer over the shapefile map. +4. Use shapefiles as both main and sublayer. -The following example demonstrates how to display the shapefile map as a sublayer above the GeoJSON map. +The following example demonstrates a shapefile map as a sublayer above the GeoJSON map. ```cshtml + @using Syncfusion.Blazor.Maps; @@ -99,13 +103,13 @@ The following example demonstrates how to display the shapefile map as a sublaye ## Customization -The characteristics of the shapes in the shapefile map, such as fill color, border, projection type, and so on, can be modified. This [link](https://blazor.syncfusion.com/documentation/maps/customization) will teach you more about customizing shapes in the Maps component. +Shape characteristics in a shapefile map—such as fill color, border, and projection—can be customized. For details, see the [Maps customization](https://blazor.syncfusion.com/documentation/maps/customization) documentation. -> All of the functions listed in the link above will be demonstrated using the GeoJSON file. Replace the GeoJSON file path with the shapefile's file path to see a demonstration of these functions. +> The examples in the linked topic use a GeoJSON file. Replace the GeoJSON file path with the shapefile path to view the same behavior with shapefiles. ## Other supportive features -The shapefile map supports the feature sets listed below, and you can learn more about them by following the links. +A shapefile map supports the following feature sets. Refer to the topics below to learn more. 1. [Color mapping](https://blazor.syncfusion.com/documentation/maps/color-mapping) 2. [Data labels](https://blazor.syncfusion.com/documentation/maps/data-labels) @@ -118,4 +122,4 @@ The shapefile map supports the feature sets listed below, and you can learn more 9. [User interactions](https://blazor.syncfusion.com/documentation/maps/user-interactions) 10. [Print and Export](https://blazor.syncfusion.com/documentation/maps/print-and-export) -> All of the functions listed in the links above will be demonstrated using the GeoJSON file. Replace the GeoJSON file path with the shapefile's file path to see a demonstration of these functions. \ No newline at end of file +> The examples in the linked topics use a GeoJSON file. Replace the GeoJSON file path with the shapefile path to demonstrate the same features with shapefiles. diff --git a/blazor/maps/state-persistence.md b/blazor/maps/state-persistence.md index 91cf72aeb5..088ee46da4 100644 --- a/blazor/maps/state-persistence.md +++ b/blazor/maps/state-persistence.md @@ -1,7 +1,7 @@ --- layout: post title: State Persistence in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about state persistence in Syncfusion Blazor Maps component and much more. +description: Check out and learn how to enable and use state persistence in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -11,9 +11,10 @@ documentation: ug ## State Persistence -State persistence allows the Maps to retain the current model value in the browser cookies for state maintenance. This action is handled through the `enablePersistence` property which is set to **false** by default. When it is set to **true**, some of the Maps component model values will be retained even after refreshing the page. +State persistence retains selected Maps model values in browser storage for state maintenance. This behavior is controlled by the `EnablePersistence` property, which is set to **false** by default. When set to **true**, selected Maps component model values are retained after refreshing the page. ```cshtml + @using Syncfusion.Blazor.Maps @@ -23,4 +24,5 @@ State persistence allows the Maps to retain the current model value in the brows + ``` \ No newline at end of file diff --git a/blazor/maps/user-interactions.md b/blazor/maps/user-interactions.md index 030917aa4d..f38bc0f494 100644 --- a/blazor/maps/user-interactions.md +++ b/blazor/maps/user-interactions.md @@ -1,7 +1,7 @@ --- layout: post title: User Interactions in Blazor Maps Component | Syncfusion -description: Checkout and learn here all about user interactions in Syncfusion Blazor Maps component and much more. +description: Check out and learn here all about user interactions with customization options in the Syncfusion Blazor Maps component. platform: Blazor control: Maps documentation: ug @@ -11,13 +11,14 @@ 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. +Zooming provides in-depth visualization by scaling the map view. 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 zoom factor increases or decreases based on zoom-in and zoom-out interactions. Enable zooming -Zooming of Maps is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**. +Enable zooming by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -27,15 +28,17 @@ Zooming of Maps is enabled by setting the [Enable](https://help.syncfusion.com/c + ``` ![Blazor Maps with Zooming](./images/UserInteraction/blazor-maps-zooming.png) Enable panning -To enable the panning feature, set the [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**. +Enable panning by setting the [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -45,27 +48,29 @@ To enable the panning feature, set the [EnablePanning](https://help.syncfusion.c + ``` ### Various types of zooming -Zooming can be performed in the following types: +Zooming supports the following types: #### Zooming toolbar -A toolbar is available in the Maps component to perform zooming and panning operation. The zooming toolbar appears when the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) is set to **true**. +A built-in toolbar supports zooming and panning. It appears when the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property is set to **true**. -The following options are available in toolbar. +The toolbar includes the following options: 1. Zoom - Performs selection zooming. -2. Zoom In - Zooms in the Maps. -3. Zoom Out - Zooms out the Maps. +2. Zoom In - Zooms in the map. +3. Zoom Out - Zooms out the map. 4. Pan - Switches to panning if selection zoom is enabled. -5. Reset - Restores the Maps to the default view. +5. Reset - Restores the default view. -By default, the toolbar is rendered with **Zoom In**, **Zoom Out**, and **Reset** options. +By default, the toolbar renders with **Zoom In**, **Zoom Out**, and **Reset**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -76,13 +81,15 @@ By default, the toolbar is rendered with **Zoom In**, **Zoom Out**, and **Reset* + ``` #### Pinch zooming -To enable or disable the pinch zooming, use the [PinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_PinchZooming) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). +Enable or disable pinch zooming using the [PinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_PinchZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -92,13 +99,15 @@ To enable or disable the pinch zooming, use the [PinchZooming](https://help.sync + ``` #### Single-click zooming -To enable or disable the single-click zooming using mouse, use the [ZoomOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnClick) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). +Enable or disable single-click zooming using the [ZoomOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnClick) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -108,13 +117,15 @@ To enable or disable the single-click zooming using mouse, use the [ZoomOnClick] + ``` #### Double-click zooming -To enable or disable the double-click zooming using mouse, use the [DoubleClickZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_DoubleClickZoom) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). +Enable or disable double-click zooming using the [DoubleClickZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_DoubleClickZoom) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -124,13 +135,15 @@ To enable or disable the double-click zooming using mouse, use the [DoubleClickZ + ``` #### Mouse wheel zooming -To enable or disable mouse wheel zooming, use the [MouseWheelZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MouseWheelZoom) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). +Enable or disable mouse wheel zooming using the [MouseWheelZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MouseWheelZoom) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -140,13 +153,15 @@ To enable or disable mouse wheel zooming, use the [MouseWheelZoom](https://help. + ``` #### Selection zooming -To enable or disable selection zooming, use the [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnableSelectionZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property must be set to **false** to enable the selection zooming in Maps. +Enable or disable selection zooming using the [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnableSelectionZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). To enable selection zooming, set [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) to **false**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -161,13 +176,15 @@ To enable or disable selection zooming, use the [EnableSelectionZooming](https:/ + ``` ### Setting minimum and maximum values for zoom factor -The zoom factor range can be adjusted using the [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) and [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) properties in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) value is set to 1 by default, and the [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) value is set to 10. +Adjust the zoom range using [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) and [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) properties in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The default values are **1** for MinZoom and **10** for MaxZoom. ```cshtml + @using Syncfusion.Blazor.Maps @@ -177,13 +194,15 @@ The zoom factor range can be adjusted using the [MinZoom](https://help.syncfusio + ``` ### Zooming with layer animation -To zoom in and zoom out the shape maps with animation, set the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) with duration value in milliseconds. Most importantly, the animation for the layer works when the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) is set for the base layer of the Maps and not the sublayer. +Apply animated zooming for shape layers using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). The animation applies to the base layer when the duration is set on that layer. ```cshtml + @using Syncfusion.Blazor.Maps @@ -195,21 +214,23 @@ To zoom in and zoom out the shape maps with animation, set the [AnimationDuratio + ``` ### Customizing the zoom toolbar -The [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html) can be used to customize the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarSettings`. +Use [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html) to customize the zoom toolbar. The following properties are available: -* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_Orientation) - To customize the orientation (horizontal\vertical) of the zoom toolbar. -* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_HorizontalAlignment) - To customize the position of the zoom toolbar in near, far, and center positions, during horizontal orientation. -* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_VerticalAlignment) - To customize the position of the zoom toolbar in near, far, and center positions, during vertical orientation. -* [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BackgroundColor) - To customize the background color of the zoom toolbar. -* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderColor) - To apply the border color to the zoom toolbar. -* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderWidth) - To set the width to the border of the zoom toolbar. -* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderOpacity) - To set the opacity to the border of the zoom toolbar. +* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_Orientation) - Sets the toolbar orientation (horizontal or vertical). +* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_HorizontalAlignment) - Positions the toolbar for horizontal orientation (near, center, far). +* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_VerticalAlignment) - Positions the toolbar for vertical orientation (near, center, far). +* [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BackgroundColor) - Sets the toolbar background color. +* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderColor) - Sets the toolbar border color. +* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderWidth) - Sets the toolbar border width. +* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderOpacity) - Sets the toolbar border opacity. ```cshtml + @using Syncfusion.Blazor.Maps @@ -225,27 +246,29 @@ The [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.B + ``` ![Blazor Maps with custom zoom toolbar](./images/UserInteraction/blazor-maps-custom-zooming-toolbar.png) **Customizing the buttons in the zoom toolbar** -The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html) can be used to customize the buttons in the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarButton`. +Use [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html) to customize the toolbar buttons. The following properties are available: -* [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_ToolbarItems) - To customize the items that are to be shown in the zoom toolbar. -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Color) - To apply the color to the icons in the buttons in the zoom toolbar. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Fill) - To apply the fill color to the buttons in the zoom toolbar. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Opacity) - To apply the opacity for the buttons in the zoom toolbar. -* [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_HighlightColor) - To apply the color for the button in the zoom toolbar, when the mouse has hovered on the appropriate button. -* [SelectionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_SelectionColor) - To apply the color for the button in the zoom toolbar, when clicking the same. -* [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Radius) - To set the radius for the buttons in the zoom toolbar. -* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Padding) - To set the spacing between the buttons in the zoom toolbar. -* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderColor) - To set the color of the border of the buttons in the zoom toolbar. -* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderOpacity) - To set the opacity of the border of the buttons in the zoom toolbar. -* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderWidth) - To set the width of the border of the buttons in the zoom toolbar. +* [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_ToolbarItems) - Configures the items displayed in the toolbar. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Color) - Sets the icon color. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Fill) - Sets the button fill color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Opacity) - Sets the button opacity. +* [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_HighlightColor) - Sets the hover color. +* [SelectionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_SelectionColor) - Sets the active state color. +* [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Radius) - Sets the button corner radius. +* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Padding) - Sets the spacing between buttons. +* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderColor) - Sets the border color. +* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderOpacity) - Sets the border opacity. +* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderWidth) - Sets the border width. ```cshtml + @using Syncfusion.Blazor.Maps @@ -262,27 +285,29 @@ The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla + ``` ![Blazor Maps with custom zoom toolbar buttons](./images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png) **Customizing the tooltip of the zoom toolbar** -The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html) can be used to customize the tooltip of the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarTooltipSettings`. +Use [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html) to customize the toolbar tooltip. The following properties are available: -* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Visible) - To enable or disable the tooltip in the zoom toolbar. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Fill) - To set the fill color to the tooltip in the zoom toolbar. -* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderColor) - To set the color of the border of the tooltip in the zoom toolbar. -* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderOpacity) - To set the opacity of the border of the tooltip in the zoom toolbar. -* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderWidth) - To set the width of the border of the tooltip in the zoom toolbar. -* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontColor) - To set the text color in the tooltip of the zoom toolbar. -* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontFamily) - To set the font family in the tooltip of the zoom toolbar. -* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontStyle) - To set the font style in the tooltip of the zoom toolbar. -* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontWeight) - To set the font weight in the tooltip of the zoom toolbar. -* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontSize) - To set the font size in the tooltip of the zoom toolbar. -* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontOpacity) - To set the font opacity in the tooltip of the zoom toolbar. +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Visible) - Enables or disables the tooltip. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Fill) - Sets the tooltip background color. +* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderColor) - Sets the tooltip border color. +* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderOpacity) - Sets the tooltip border opacity. +* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderWidth) - Sets the tooltip border width. +* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontColor) - Sets the tooltip text color. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontFamily) - Sets the tooltip font family. +* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontStyle) - Sets the tooltip font style. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontWeight) - Sets the tooltip font weight. +* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontSize) - Sets the tooltip font size. +* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontOpacity) - Sets the tooltip font opacity. ```cshtml + @using Syncfusion.Blazor.Maps @@ -300,22 +325,24 @@ The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncf + ``` ![Blazor Maps with custom tooltip in zoom toolbar](./images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png) ## Selection -Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html) to **true**. +Shapes can be selected and deselected during interaction. Enable selection by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html) to **true**. -The following properties and class are available to customize the selection of Maps elements such as shapes, bubbles and markers. +The following properties and class customize selection for shapes, bubbles, and markers: -* [MapsLayerSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionBorder.html) - To customize the color and width of the border of which element is selected in Maps. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Fill) - Applies the color for the element that is selected. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Opacity) - To customize the transparency for the element that is selected. -* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_EnableMultiSelect) - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps. +* [MapsLayerSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionBorder.html) - Configures the selected element border color and width. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Fill) - Sets the selected element color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Opacity) - Sets the selected element opacity. +* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_EnableMultiSelect) - Enables selection of multiple shapes, markers, or bubbles. ```cshtml + @using Syncfusion.Blazor.Maps @@ -327,13 +354,15 @@ The following properties and class are available to customize the selection of M + ``` ![Blazor Maps with Shape Selection](./images/UserInteraction/blazor-maps-shape-selection.png) -By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa. +Selecting a legend item selects the shapes bound to that legend, and selecting a shape highlights the corresponding legend. ```cshtml + @using Syncfusion.Blazor.Maps @@ -354,12 +383,13 @@ By tapping on the specific legend, the shapes which are bounded to the selected -@code{ +@code { public class UNCouncil { public string Country { get; set; } public string Membership { get; set; } - }; + } + private List CouncilMemberdetails = new List{ new UNCouncil { Country= "China", Membership= "Permanent" }, new UNCouncil { Country= "France",Membership= "Permanent" }, @@ -369,15 +399,17 @@ By tapping on the specific legend, the shapes which are bounded to the selected new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" } }; } + ``` ![Blazor Maps with Shape Selection using Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png) ### Enable selection for bubbles -To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) as **true**. +Enable bubble selection by configuring [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -395,13 +427,14 @@ To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSetting -@code{ +@code { public class Country { public string Name { get; set; } public double Population { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { new Country { @@ -417,15 +450,17 @@ To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSetting } }; } + ``` ![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG) ### Enable selection for markers -To enable the selection for markers in Maps, set the [MapsMarkerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSelectionSettings.html) in the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html#Syncfusion_Blazor_Maps_MapsLayerSelectionSettings_Enable) property of the [MapsLayerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html) as **true**. +Enable marker selection by configuring [MapsMarkerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSelectionSettings.html) in [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html#Syncfusion_Blazor_Maps_MapsLayerSelectionSettings_Enable) property to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -446,38 +481,44 @@ To enable the selection for markers in Maps, set the [MapsMarkerSelectionSetting + @code { public class City { public double Latitude { get; set; } public double Longitude { get; set; } }; + public List California = new List { - new City { Latitude=35.145083,Longitude=-117.960260 } + new City { Latitude = 35.145083, Longitude = -117.960260 } }; + public List NewYork = new List { - new City { Latitude=40.724546, Longitude=-73.850344 } + new City { Latitude = 40.724546, Longitude = -73.850344 } }; + public List Iowa = new List { - new City { Latitude= 41.657782, Longitude=-91.533857 } + new City { Latitude = 41.657782, Longitude = -91.533857 } }; } + ``` ![Enabling Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG) ### Enable selection for polygons -When the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Enable) property of [MapsPolygonSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html) is set to **true**, the polygon shapes can be selected via user interaction. The following properties and a class are available in `MapsPolygonSelectionSettings` to customize the polygon shape when it is selected. +Enable polygon selection by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Enable) property of [MapsPolygonSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html) to **true**. The following properties and class customize selected polygon shapes: -* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Fill) - It is used to change the color of the selected polygon shape. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape. -* [MapsPolygonSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionBorder.html) - This class is used to change the color, width, and opacity of the border of the selected polygon shape. +* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_EnableMultiSelect) - Enables selection of multiple polygons. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Fill) - Sets the selected polygon color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Opacity) - Sets the selected polygon opacity. +* [MapsPolygonSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionBorder.html) - Configures the border color, width, and opacity. -The following example shows how to select the polygon shape in the geometry map. +The following example demonstrates selecting a polygon in a geometry map. ```cshtml + @using Syncfusion.Blazor.Maps @@ -495,6 +536,7 @@ The following example shows how to select the polygon shape in the geometry map. @code { List Brazil = new List(); + protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); @@ -534,46 +576,54 @@ The following example shows how to select the polygon shape in the geometry map. Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 }); } } + ``` ![Blazor Maps with selected polygon shape](./images/Polygon/blazor-map-polygon-shape-selected.gif) ### Public method for the shape selection -The [ShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ShapeSelection_System_Int32_System_String_System_String_System_Boolean_) method can be used to select each shape in the Maps. **layerIndex**, **propertyName**, **shapeDataPath**, and **isSelect** boolean value to select or deselect the shape are the input parameters for this method. +Use the [ShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ShapeSelection_System_Int32_System_String_System_String_System_Boolean_) method to select a shape programmatically. Input parameters are the **layerIndex**, **propertyName**, **shapeDataPath**, and the **isSelect** boolean to select or deselect the shape. ```cshtml + @using Syncfusion.Blazor.Maps -
- - - - - - - - - -
- - -@code{ + +
+ + + + + + + + + +
+ + + +@code { SfMaps mapsref; + public void Select() { mapsref.ShapeSelectionAsync(0, "continent", "Asia", true); } + public void Unselect() { mapsref.ShapeSelectionAsync(0, "continent", "Asia", false); } } + ``` ![Blazor Maps Marker with Cluster](./images/Marker/blazor-maps-marker-cluster.PNG) ### Initial shape selection -The shape is initially selected using the [MapsInitialShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html), and the values are mapped to the [ShapePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapePath) and [ShapeValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapeValue). +Initialize selection using [MapsInitialShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html) by mapping values to [ShapePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapePath) and [ShapeValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapeValue). ```cshtml + @@ -587,15 +637,17 @@ The shape is initially selected using the [MapsInitialShapeSelection](https://he + ``` ![Blazor Maps with Initial Shape Selection](./images/Marker/blazor-maps-initial-shape-selection.PNG) ### Initial marker selection -Using the [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html), the marker shape can be selected initially. Markers render based on the [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Longitude) values. +Select markers initially using [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html). Markers render based on [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Longitude). ```cshtml + @using Syncfusion.Blazor.Maps @@ -620,30 +672,33 @@ Using the [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfus public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + private List Cities = new List { - new City {Latitude=35.145083,Longitude=-117.960260, Name= "Californiya"}, - new City { Latitude=40.724546, Longitude=-73.850344, Name="New York"}, - new City {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa"} + new City { Latitude = 35.145083, Longitude = -117.960260, Name = "Californiya" }, + new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" }, + new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" } }; } + ``` ![Blazor Maps with Initial Marker Selection](./images/UserInteraction/blazor-maps-marker-selection.PNG) ## Highlight -Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html) to **true**. +Shapes can be highlighted on mouse hover, including shapes, bubbles, markers, and legends. Enable highlight by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html) to **true**. -The following properties and classes are available to customize the highlight of Maps elements such as shapes, bubbles and markers. +The following properties and classes customize highlight behavior for shapes, bubbles, and markers: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Fill) - Applies the color for the element that is highlighted. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Opacity) - To customize the transparency for the element that is highlighted. -* [MapsLayerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerHighlightBorder.html) - To customize the color and width of the border of the layer when that is highlighted. -* [MapsBubbleHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightBorder.html) - To customize the color and width of the border of the bubble when that is highlighted. -* [MapsMarkerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightBorder.html) - To customize the color and width of the border of the marker when that is highlighted. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Fill) - Sets the highlight color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Opacity) - Sets the highlight opacity. +* [MapsLayerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerHighlightBorder.html) - Configures the layer border during highlight. +* [MapsBubbleHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightBorder.html) - Configures the bubble border during highlight. +* [MapsMarkerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightBorder.html) - Configures the marker border during highlight. ```cshtml + @using Syncfusion.Blazor.Maps @@ -655,13 +710,15 @@ The following properties and classes are available to customize the highlight of + ``` ![Highlighting Blazor Maps Shape](./images/UserInteraction/blazor-maps-highlight-shape.png) -Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa. +Hovering over a legend highlights the shapes bound to that legend, and hovering over a shape highlights the corresponding legend. ```cshtml + @using Syncfusion.Blazor.Maps @@ -682,30 +739,32 @@ Hovering on the specific legend, the shapes which are bounded to the selected le -@code{ +@code { public class UNCouncil { public string Country { get; set; } public string Membership { get; set; } - }; + } + private List CouncilMemberDetails = new List{ - new UNCouncil { Country= "China", Membership= "Permanent"}, - new UNCouncil { Country= "France",Membership= "Permanent" }, - new UNCouncil { Country= "Russia",Membership= "Permanent"}, - new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent"}, - new UNCouncil { Country= "Poland",Membership= "Non-Permanent"}, - new UNCouncil { Country= "Sweden",Membership= "Non-Permanent"} + new UNCouncil { Country = "China", Membership = "Permanent" }, + new UNCouncil { Country = "France", Membership = "Permanent" }, + new UNCouncil { Country = "Russia", Membership = "Permanent" }, + new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" }, + new UNCouncil { Country = "Poland", Membership = "Non-Permanent" } }; } + ``` ![Highlighting Blazor Maps Shape with Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png) ### Enable highlight for bubbles -To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) as **true**. +Enable bubble highlight by configuring [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -725,17 +784,18 @@ To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSet -@code{ +@code { public class Country { public string Name { get; set; } public double Population { get; set; } public string Color { get; set; } - }; + } + private List PopulationDetails = new List { new Country { - Name ="United States", Population = 325020000, Color = "#b5e485" + Name = "United States", Population = 325020000, Color = "#b5e485" }, new Country { @@ -743,19 +803,21 @@ To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSet }, new Country { - Name="India", Population=1198003000, Color = "#df819c" + Name = "India", Population = 1198003000, Color = "#df819c" } }; } + ``` ![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG) ### Enable highlight for markers -To enable the highlight for markers in Maps, set the [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) as **true**. +Enable marker highlight by configuring [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property to **true**. ```cshtml + @using Syncfusion.Blazor.Maps @@ -777,28 +839,31 @@ To enable the highlight for markers in Maps, set the [MapsMarkerHighlightSetting public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } - }; + } + private List Cities = new List { - new City { Latitude=35.145083,Longitude=-117.960260, Name= "California" }, - new City { Latitude=40.724546, Longitude=-73.850344, Name="New York" }, - new City { Latitude= 41.657782, Longitude=-91.533857, Name="Iowa" } + new City { Latitude = 35.145083, Longitude = -117.960260, Name = "California" }, + new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" }, + new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" } }; } + ``` ![Highlighting Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG) ### Enable highlight for polygons -The polygon shapes can be highlighted via user interaction if the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Enable) property of [MapsPolygonHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html) is set to **true**. The following properties and a class are available in `MapsPolygonHighlightSettings` to customize the polygon shape when it is highlighted. +Enable polygon highlight by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Enable) property of [MapsPolygonHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html) to **true**. The following properties and class customize the highlighted polygon: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape. -* [MapsPolygonHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightBorder.html) - This class is used to change the color, width, and opacity of the border of the highlighted polygon shape. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Fill) - Sets the highlight color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Opacity) - Sets the highlight opacity. +* [MapsPolygonHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightBorder.html) - Configures the border color, width and opacity. -The following example shows how to highlight a polygon shape on a geometry map. +The following example illustrates highlighting a polygon on a geometry map. ```cshtml + @using Syncfusion.Blazor.Maps @@ -816,6 +881,7 @@ The following example shows how to highlight a polygon shape on a geometry map. @code { List Brazil = new List(); + protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); @@ -855,18 +921,20 @@ The following example shows how to highlight a polygon shape on a geometry map. Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 }); } } + ``` ![Blazor Maps with highlighted polygon shape](./images/Polygon/blazor-map-polygon-shape-highlight.gif) ## Tooltip -On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html) or [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html) or [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) respectively. The [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) is set to **MouseMove**. +Tooltips display additional information for layers, bubbles, or markers on mouse over or touch end. Enable tooltips using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html), [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html), or [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). Use [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) property to change when the tooltip is shown. The available modes are: * MouseMove * Click * DoubleClick ```cshtml + @using Syncfusion.Blazor.Maps @@ -877,18 +945,20 @@ On mouse over or touch end event, the tooltip is used to get more information ab + ``` ![Blazor Maps with Tooltip](./images/UserInteraction/blazor-maps-tooltip.PNG) ### Customization -The following properties are available to customize the tooltip of the Maps component. +Use the following properties to customize tooltips: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Fill) - Applies the color of the tooltip in layers, markers, and bubbles of Maps. -* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Format) - To customize the format of the tooltip in layers, markers, and bubbles of Maps. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Fill) - Sets the tooltip background color for layers, markers, and bubbles. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Format) - Configures the tooltip format for layers, markers, and bubbles. ```cshtml + @using Syncfusion.Blazor.Maps @@ -912,21 +982,6 @@ The following properties are available to customize the tooltip of the Maps comp @code { - public List PerformanceReport = new List { - new Country { CountryName="India", Name="India", Finalist="3", Winner="2" }, - new Country { CountryName="United Kingdom", Name="United Kingdom", Finalist="4", Winner="1" }, - new Country { CountryName="Australia", Name="Australia", Finalist="7", Winner="5" }, - new Country { CountryName="Sri Lanka", Name="Sri Lanka", Finalist="3", Winner="1"}, - new Country { CountryName="Pakistan", Name="Pakistan", Finalist="2", Winner="1" }, - new Country { CountryName="New Zealand", Name="New Zealand", Finalist="1", Winner="0"}, - new Country { CountryName="West Indies", Name="Dominican Rep", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies", Name="Cuba", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies", Name="Jamaica", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies", Name="Haiti", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies",Name="Gayana", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies", Name="Suriname", Finalist="3", Winner="2"}, - new Country { CountryName="West Indies", Name="Trinidad and Tobago", Finalist="3", Winner="2"} - }; public class Country { public string Name { get; set; } @@ -934,16 +989,34 @@ The following properties are available to customize the tooltip of the Maps comp public string Finalist { get; set; } public string CountryName { get; set; } } + + public List PerformanceReport = new List { + new Country { CountryName = "India", Name = "India", Finalist = "3", Winner = "2" }, + new Country { CountryName = "United Kingdom", Name = "United Kingdom", Finalist = "4", Winner = "1" }, + new Country { CountryName = "Australia", Name = "Australia", Finalist = "7", Winner = "5" }, + new Country { CountryName = "Sri Lanka", Name = "Sri Lanka", Finalist = "3", Winner = "1" }, + new Country { CountryName = "Pakistan", Name = "Pakistan", Finalist = "2", Winner = "1" }, + new Country { CountryName = "New Zealand", Name = "New Zealand", Finalist = "1", Winner = "0" }, + new Country { CountryName = "West Indies", Name = "Dominican Rep", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Cuba", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Jamaica", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Haiti", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Gayana", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Suriname", Finalist = "3", Winner = "2" }, + new Country { CountryName = "West Indies", Name = "Trinidad and Tobago", Finalist = "3", Winner = "2" } + }; } + ``` ![Blazor Maps with Custom Tooltip](./images/UserInteraction/blazor-maps-custom-tooltip.png) ### Tooltip template -The HTML element can be rendered in the tooltip of the Maps using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html#Syncfusion_Blazor_Maps_MapsLayerTooltipSettings_TooltipTemplate) property of the [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). +Render HTML in tooltips using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html#Syncfusion_Blazor_Maps_MapsLayerTooltipSettings_TooltipTemplate) property of [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). ```cshtml + @using Syncfusion.Blazor.Maps @@ -988,27 +1061,14 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe + @code { public string[] ShapePropertyPath = { "name" }; public string[] ShapeColorOne = { "#b3daff" }; public string[] ShapeColorTwo = { "#80c1ff" }; public string[] ShapeColorThree = { "#1a90ff" }; public string[] ShapeColorFour = { "#005cb3" }; - public List PerformanceReport = new List { - new Country { Name="India", Winner="3", Runner="2", City="India" }, - new Country { Name="Dominican Rep.", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Cuba", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Jamaica", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Haiti", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Guyana", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Suriname", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Trinidad and Tobago", Winner="3", Runner="2", City="West Indies" }, - new Country { Name="Sri Lanka", Winner="3", Runner="1", City="Sri Lanka" }, - new Country { Name="United Kingdom", Winner="3", Runner="0", City="England" }, - new Country { Name="Pakistan", Winner="2", Runner="1", City="Pakistan" }, - new Country { Name="New Zealand", Winner="1", Runner="0", City="New Zealand" }, - new Country { Name="Australia", Winner="7", Runner="5", City="Australia" } - }; + public class Country { public string Name { get; set; } @@ -1016,7 +1076,24 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe public string Runner { get; set; } public string City { get; set; } } + + public List PerformanceReport = new List { + new Country { Name = "India", Winner = "3", Runner = "2", City = "India" }, + new Country { Name = "Dominican Rep.", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Cuba", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Jamaica", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Haiti", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Guyana", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Suriname", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Trinidad and Tobago", Winner = "3", Runner = "2", City = "West Indies" }, + new Country { Name = "Sri Lanka", Winner = "3", Runner = "1", City = "Sri Lanka" }, + new Country { Name = "United Kingdom", Winner = "3", Runner = "0", City = "England" }, + new Country { Name = "Pakistan", Winner = "2", Runner = "1", City = "Pakistan" }, + new Country { Name = "New Zealand", Winner = "1", Runner = "0", City = "New Zealand" }, + new Country { Name = "Australia", Winner = "7", Runner = "5", City = "Australia" } + }; } + + ``` ![Blazor Maps with Tooltip Template](./images/UserInteraction/blazor-maps-tooltip-template.PNG) ### Changing duration in mobile devices -To change the duration of the tooltips on mobile devices, you can use the [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Duration) property in the tooltip settings for features such as layers, markers, bubbles, polygons, and more. By default, this property is set to **2000** milliseconds. Setting the value to **0** will keep the tooltip visible indefinitely, removing it only on the next interaction. If it is greater than **0**, the tooltip will be removed after the specified time. +Control tooltip lifetime on mobile devices using [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Duration) property in the tooltip settings for layers, markers, bubbles, polygons, and more. The default is **2000** milliseconds. A value of **0** keeps the tooltip visible until the next interaction; values greater than **0** remove the tooltip after the specified time. -In the following example, we demonstrate how to change the duration of the tooltip in mobile devices for layers in the Maps component. +The following example changes tooltip duration for layer tooltips in the Maps component. ```cshtml + @using Syncfusion.Blazor.Maps