Skip to content

Commit 22571a1

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6871 from syncfusion-content/985588-MapsUG
985588: Updated the UG content and examples changes in the Maps control.
2 parents 1ca1fc2 + 6e830c2 commit 22571a1

29 files changed

+1779
-1265
lines changed

‎blazor/maps/accessibility.md‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
33
title: Accessibility in Blazor Maps Component | Syncfusion
4-
description: Checkout and learn here all about accessibility in Syncfusion Blazor Maps component and much more details.
4+
description: Check out and learn here all about accessibility in the Syncfusion Blazor Maps component and much more details.
55
platform: Blazor
66
control: Maps
77
documentation: ug
88
---
99

1010
# Accessibility in Blazor Maps Component
1111

12-
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).
12+
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).
1313

14-
The accessibility compliance for the Blazor Maps component is outlined below.
14+
The accessibility compliance for the Blazor Maps component is summarized below.
1515

1616
| Accessibility Criteria | Compatibility |
1717
| -- | -- |
@@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Maps component is outlined below.
2121
| [Right-To-Left Support](../common/accessibility) | Not Applicable |
2222
| [Color Contrast](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2323
| [Mobile Device Support](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24-
| [Keyboard Navigation Support](../common/accessibility) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24+
| [Keyboard Navigation Support](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2525
| [Axe-core Accessibility Validation](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2626

2727
<style>
@@ -39,50 +39,50 @@ The accessibility compliance for the Blazor Maps component is outlined below.
3939

4040
## WAI-ARIA attributes
4141

42-
To meet accessibility standards, the Blazor Maps component follows to the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns. In the Maps component, the following `WAI-ARIA` attributes are used:
42+
To meet accessibility standards, the Blazor Maps component adheres to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns. The following `WAI-ARIA` attributes are used in the Maps component:
4343

4444
| Attributes | Purpose |
4545
| --- | --- |
46-
| `role=region` | It specifies the Maps areas that do not support interactive functions like selection and highlight. |
47-
| `role=button` | It specifies the Maps areas where interactive functions such as selection and highlight are available. |
48-
| `aria-label` | Provides an accessible name for Maps elements such as geometric map shapes, title, subtitle, legend title, legend item labels, data labels, and so on. To learn more, see the next topic. |
46+
| `role=region` | Identifies map areas that do not support interactive functions such as selection and highlighting. |
47+
| `role=button` | Identifies map areas where interactive functions such as selection and highlighting are available. |
48+
| `aria-label` | Provides accessible names for map elements including geometric shapes, title, subtitle, legend title, legend item labels, and data labels. See the next section for details. |
4949

5050
## Screen reading in Maps
5151

52-
Accessibility in the Blazor Maps component ensures that all users, regardless of ability or disability, can use screen reading. The following Map elements will be read aloud using screen reading software, such as Narrator for Windows.
52+
Accessibility in the Blazor Maps component ensures compatibility with screen readers. The following map elements are announced by screen readers such as Narrator on Windows.
5353

5454
| Elements | Description |
5555
| --- | --- |
56-
| Shapes in the layer | Reads the names of the geographical shapes (such as countries, states, and regions) that appear on the Maps. |
57-
| Title | Reads the title content in the Maps. |
58-
| Subtitle | Reads the title below the main title content in the Maps. |
59-
| Legend title | Reads the contents of the legend's title as specified in Maps. |
60-
| Legend item label | Reads the label of a legend item in Maps. |
61-
| Data label | Reads the label specified for the shapes in the Maps layer. |
62-
| Annotation | Reads the content specified in the annotation. |
63-
| Marker template | Reads the content provided in the marker template. |
64-
| Tooltip template | Reads the content provided in the tooltip template. |
65-
| Data label template | Reads the content provided in the data label template. |
56+
| Shapes in the layer | Announces the names of the geographical shapes (such as countries, states, and regions) displayed on the map. |
57+
| Title | Announces the map title. |
58+
| Subtitle | Announces the subtitle that appears below the main title. |
59+
| Legend title | Announces the legend title as configured in the map. |
60+
| Legend item label | Announces the label of each legend item. |
61+
| Data label | Announces the label specified for shapes in the map layer. |
62+
| Annotation | Announces the content defined in the annotation. |
63+
| Marker template | Announces the content provided in the marker template. |
64+
| Tooltip template | Announces the content provided in the tooltip template. |
65+
| Data label template | Announces the content provided in the data label template. |
6666

6767
## Keyboard Navigation
6868

69-
All the Blazor Maps actions can be controlled via keyboard keys. The applicable key combinations and their relative functionalities are listed below for the appropriate UI features available in the component.
69+
All Blazor Maps actions can be controlled using the keyboard. The following key combinations apply to the available UI interactions.
7070

7171
| Windows | Mac | Description|
7272
|-----|-----|----|
73-
|<kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves to the next focusable element on the map, such as the legend or shape.|
74-
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves to the previous focusable element on the map, such as the legend or shape.|
75-
|<kbd> + </kbd> | <kbd>+</kbd> |When zooming is enabled, zoom in operation can be performed.|
76-
|<kbd> - </kbd> | <kbd>-</kbd> |When zooming is enabled, zoom out operation can be performed.|
77-
|<kbd>←</kbd> | <kbd>←</kbd> |When zoomed in, the map can be scrolled to the left.|
78-
|<kbd>→</kbd> | <kbd>→</kbd> |When zoomed in, the map can be scrolled to the right.|
79-
|<kbd>↑</kbd> | <kbd>↑</kbd> |When zoomed in, the map can be scrolled upward.|
80-
|<kbd>↓</kbd> | <kbd>↓</kbd> |When zoomed in, the map can be scrolled downward.|
81-
|<kbd> R </kbd> | <kbd>R</kbd> |When zooming is enabled, reset operation can be performed.|
82-
|<kbd>Enter</kbd> | <kbd>Enter</kbd> |The page can be navigated to the next and previous states in legend. Similarly, the selection can be made while navigating over the shape.|
73+
|<kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves focus to the next focusable element on the map, such as the legend or a shape.|
74+
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves focus to the previous focusable element on the map, such as the legend or a shape.|
75+
|<kbd> + </kbd> | <kbd>+</kbd> |Performs zoom in when zooming is enabled.|
76+
|<kbd> - </kbd> | <kbd>-</kbd> |Performs zoom out when zooming is enabled.|
77+
|<kbd>←</kbd> | <kbd>←</kbd> |When zoomed in, scrolls the map to the left.|
78+
|<kbd>→</kbd> | <kbd>→</kbd> |When zoomed in, scrolls the map to the right.|
79+
|<kbd>↑</kbd> | <kbd>↑</kbd> |When zoomed in, scrolls the map upward.|
80+
|<kbd>↓</kbd> | <kbd>↓</kbd> |When zoomed in, scrolls the map downward.|
81+
|<kbd> R </kbd> | <kbd>R</kbd> |Performs reset when zooming is enabled.|
82+
|<kbd>Enter</kbd> | <kbd>Enter</kbd> |Navigates through legend items and confirms selection when focusing a shape.|
8383

8484
## Ensuring accessibility
8585

86-
The Blazor Maps component's accessibility levels are ensured using an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
86+
Accessibility compliance for the Blazor Maps component is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
8787

88-
The accessibility compliance of the Maps component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/maps) in a new window to evaluate the accessibility of the Maps component with accessibility tools.
88+
The component’s accessibility compliance is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/maps) in a new window to evaluate the component with accessibility tools.

‎blazor/maps/annotations.md‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
---
22
layout: post
33
title: Annotations in Blazor Maps Component | Syncfusion
4-
description: Checkout and learn here all about annotations in Blazor Maps component of Syncfusion, and more details.
4+
description: Check out and learn how to add, configure and personalize annotations in the Syncfusion Blazor Maps component.
55
platform: Blazor
66
control: Maps
77
documentation: ug
88
---
99

1010
# Annotations in Blazor Maps component
1111

12-
Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.
12+
Annotations mark areas of interest on the map using text, shapes, or images. Any number of annotations can be added to the Maps component.
1313

1414
## Annotation
1515

16-
By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html), text content or an HTML element can be specified to render a new HTML element in Maps.
16+
Use the `ContentTemplate` property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) to render text content or an HTML element as an annotation in Maps.
1717

1818
```cshtml
19+
1920
@using Syncfusion.Blazor.Maps
2021
2122
<SfMaps>
@@ -34,6 +35,7 @@ By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfus
3435
</MapsLayer>
3536
</MapsLayers>
3637
</SfMaps>
38+
3739
```
3840

3941
![Blazor Maps with Annotation](./images/Annotation/blazor-maps-annotation.PNG)
@@ -42,9 +44,10 @@ By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfus
4244

4345
### Changing the z-index
4446

45-
The stack order of an annotation element can be changed using the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_ZIndex) property in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
47+
Change the stacking order of an annotation element using the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_ZIndex) property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
4648

4749
```cshtml
50+
4851
@using Syncfusion.Blazor.Maps
4952
5053
<SfMaps>
@@ -63,15 +66,17 @@ The stack order of an annotation element can be changed using the [ZIndex](http
6366
</MapsLayer>
6467
</MapsLayers>
6568
</SfMaps>
69+
6670
```
6771

6872
![Changing ZIndex in Blazor Maps Annotation](./images/Annotation/blazor-maps-annotation-zindex.PNG)
6973

7074
### Positioning an annotation
7175

72-
Annotations can be placed anywhere in the Maps by specifying percentage values to the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_Y) properties in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
76+
Place annotations anywhere on the map by specifying percentage values for the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_Y) properties of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
7377

7478
```cshtml
79+
7580
@using Syncfusion.Blazor.Maps
7681
7782
<SfMaps>
@@ -90,15 +95,17 @@ Annotations can be placed anywhere in the Maps by specifying percentage values t
9095
</MapsLayer>
9196
</MapsLayers>
9297
</SfMaps>
98+
9399
```
94100

95101
![Changing Annotation Position in Blazor Maps](./images/Annotation/blazor-maps-annotation-position.PNG)
96102

97103
### Alignment of an annotation
98104

99-
Annotations can be aligned using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_VerticalAlignment) properties in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html). The possible values can be [**Center**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Center), [**Far**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Far), [**Near**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Near) and [**None**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_None).
105+
Align annotations using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_VerticalAlignment) properties of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html). Possible values: [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Far), [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Near) and [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_None).
100106

101107
```cshtml
108+
102109
@using Syncfusion.Blazor.Maps
103110
104111
<SfMaps>
@@ -117,15 +124,17 @@ Annotations can be aligned using the [HorizontalAlignment](https://help.syncfusi
117124
</MapsLayer>
118125
</MapsLayers>
119126
</SfMaps>
127+
120128
```
121129

122130
![Changing Alignment of Blazor Maps Annotation](./images/Annotation/blazor-maps-annotation-alignment.PNG)
123131

124132
## Multiple Annotation
125133

126-
Multiple annotations can be added to the Maps by adding multiple [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) in the [MapsAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotations.html) and customization for the annotations can be done with the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
134+
Add multiple annotations by including multiple [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) elements within [MapsAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotations.html). Customize each annotation using the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) properties.
127135

128136
```cshtml
137+
129138
@using Syncfusion.Blazor.Maps
130139
131140
<SfMaps>
@@ -151,6 +160,7 @@ Multiple annotations can be added to the Maps by adding multiple [MapsAnnotation
151160
</MapsLayer>
152161
</MapsLayers>
153162
</SfMaps>
163+
154164
```
155165

156-
![Blazor Maps with Multiple Annotation](./images/Annotation/blazor-maps-multiple-annotation.PNG)
166+
![Blazor Maps with Multiple Annotation](./images/Annotation/blazor-maps-multiple-annotation.PNG)

0 commit comments

Comments
 (0)