Skip to content

Commit 6818122

Browse files
sabari-senthamaraikannansabari-senthamaraikannan
authored
Merge pull request #4837 from syncfusion-content/903039-BlazMapsDocs
903039: added new contents in the UG docs for Volume 3.
2 parents daf691c + ef4e83d commit 6818122

11 files changed

+412
-41
lines changed

‎blazor/heatmap-chart/events.md‎

Lines changed: 221 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,62 +13,127 @@ This section describes the events that will be triggered for appropriate actions
1313

1414
## CellClicked
1515

16-
When you click on a HeatMap cell, the [CellClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html#Syncfusion_Blazor_HeatMap_HeatMapEvents_CellClicked) event is triggered. More information about the arguments in this event can be found [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.CellClickEventArgs.html).
16+
When you click on a HeatMap cell, the [CellClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html#Syncfusion_Blazor_HeatMap_HeatMapEvents_CellClicked) event is triggered. More information about the arguments in this event can be found [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.CellClickEventArgs.html). When you right-click on a HeatMap cell, the `CellClicked` event will be triggered, and the `HasRightClicked` property in the event argument will be set to **true**.
1717

18-
The following example demonstrates how to use the `CellClicked` event to retrieve the value of the clicked cell as well as its x-axis and y-axis labels.
18+
The following example demonstrates how to use the `CellClicked` event. In this example, content will be displayed when you click on a HeatMap cell. Additionally, a dialog box showing the cell value, x-axis label, and y-axis label of the current cell will appear only when you right-click on the HeatMap cell.
1919

2020
```cshtml
2121
@using Syncfusion.Blazor.HeatMap
22+
@using Syncfusion.Blazor.Popups
2223
23-
@if(IsVisible) {
24-
<div>
25-
<span> X-Label : <b> @XLabel </b> </span> <br />
26-
<span> Y-Label : <b> @YLabel </b> </span> <br />
27-
<span> CellValue : <b> @CellValue </b> </span>
28-
</div>
24+
@if (IsCellClicked)
25+
{
26+
<div>@CellClicked</div>
2927
}
3028
3129
<SfHeatMap DataSource="@dataSource">
32-
<HeatMapEvents CellClicked="@CellClicked" />
33-
<HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)" />
34-
<HeatMapXAxis Labels="@xAxisLabels" />
35-
<HeatMapYAxis Labels="@yAxisLabels" />
30+
<HeatMapEvents CellClicked="CellClick"></HeatMapEvents>
31+
<HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
32+
<HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
33+
<HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
34+
</HeatMapTitleSettings>
35+
<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
36+
<HeatMapCellBorder Width="1" Radius="4" Color="White"></HeatMapCellBorder>
37+
</HeatMapCellSettings>
38+
<HeatMapLegendSettings ShowLabel="true"></HeatMapLegendSettings>
3639
</SfHeatMap>
3740
41+
42+
@if (this.ShowButton)
43+
{
44+
<SfDialog ResizeHandles="@DialogResizeDirections" AllowDragging="true" Height="200px" Width="300px" EnableResize="true" ShowCloseIcon="true" @bind-Visible="Visibility">
45+
<DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
46+
<DialogEvents Closed="@DialogClose"></DialogEvents>
47+
<DialogTemplates>
48+
<Header>HeatMap Cell Values</Header>
49+
<Content>
50+
<table class="styled-table">
51+
<thead>
52+
<tr>
53+
<th>X-axis Label</th>
54+
<th>Y-axis Label</th>
55+
<th>Current Cell Value</th>
56+
</tr>
57+
</thead>
58+
<tbody>
59+
<tr>
60+
<td>@xLabel</td>
61+
<td>@yLabel</td>
62+
<td>@cellValue</td>
63+
</tr>
64+
</tbody>
65+
</table>
66+
</Content>
67+
</DialogTemplates>
68+
</SfDialog>
69+
}
70+
71+
<style>
72+
.styled-table {
73+
width: 100%;
74+
border-collapse: collapse;
75+
}
76+
77+
.styled-table th, .styled-table td {
78+
border: 1px solid black;
79+
padding: 10px;
80+
text-align: left;
81+
}
82+
83+
.styled-table thead {
84+
background-color: #f2f2f2;
85+
}
86+
</style>
87+
3888
@code {
39-
public bool IsVisible = false;
40-
public string XLabel { get; set; }
41-
public string YLabel { get; set; }
42-
public double CellValue { get; set; }
43-
private void CellClicked(CellClickEventArgs args)
89+
public bool IsCellClicked = false;
90+
public string CellClicked;
91+
public bool ShowButton { get; set; } = false;
92+
public bool Visibility { get; set; } = false;
93+
public ResizeDirection[] DialogResizeDirections { get; set; } = new ResizeDirection[] { ResizeDirection.All };
94+
string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
95+
string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
96+
public string xLabel { get; set; }
97+
public string yLabel { get; set; }
98+
public double cellValue { get; set; }
99+
public string Xvalue { get; set; }
100+
public string Yvalue { get; set; }
101+
102+
int[,] dataSource = new int[,]
44103
{
45-
IsVisible = true;
46-
XLabel = args.XLabel;
47-
YLabel = args.YLabel;
48-
CellValue = args.Value;
104+
{73, 39, 26, 39, 94, 0},
105+
{93, 58, 53, 38, 26, 68},
106+
{99, 28, 22, 4, 66, 90},
107+
{14, 26, 97, 69, 69, 3},
108+
{7, 46, 47, 47, 88, 6},
109+
{41, 55, 73, 23, 3, 79},
110+
};
111+
112+
public void CellClick(Syncfusion.Blazor.HeatMap.CellClickEventArgs args)
113+
{
114+
if (args.HasRightClicked)
115+
{
116+
Xvalue = args.X;
117+
Yvalue = args.Y;
118+
ShowButton = true;
119+
Visibility = true;
120+
xLabel = args.XLabel;
121+
yLabel = args.YLabel;
122+
cellValue = args.Value;
123+
} else {
124+
IsCellClicked = true;
125+
CellClicked = "The cell clicked event has been triggered!!";
126+
}
49127
}
50-
public double[,] dataSource = new double[,]
128+
129+
private void DialogClose(Object args)
51130
{
52-
{ 73, 39, 26, 39, 94, 0 },
53-
{ 93, 58, 53, 38, 26, 68 },
54-
{ 99, 28, 22, 4, 66, 90 },
55-
{ 14, 26, 97, 69, 69, 3 },
56-
{ 7, 46, 47, 47, 88, 6 },
57-
{ 41, 55, 73, 23, 3, 79 },
58-
{ 56, 69, 21, 86, 3, 33 },
59-
{ 45, 7, 53, 81, 95, 79 },
60-
{ 60, 77, 74, 68, 88, 51 },
61-
{ 25, 25, 10, 12, 78, 14 },
62-
{ 25, 56, 55, 58, 12, 82 },
63-
{ 74, 33, 88, 23, 86, 59 }
64-
};
65-
public string[] xAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven",
66-
"Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
67-
public string[] yAxisLabels = new string[] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
131+
ShowButton = false;
132+
}
68133
}
69134
```
70-
![CellClicked event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-cell-clicked-event.gif)
71135

136+
![CellClicked event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-cell-clicked-event.gif)
72137

73138
## CellRendering
74139

@@ -401,4 +466,120 @@ The following example demonstrates how to use the `TooltipRendering` event to cu
401466
public string[] yAxisLabels = new string[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
402467
}
403468
```
404-
![TooltipRendering event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-tooltip-render-event.png)
469+
![TooltipRendering event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-tooltip-render-event.png)
470+
471+
## CellDoubleClicked
472+
473+
When you double-click on a HeatMap cell, the [CellDoubleClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html#Syncfusion_Blazor_HeatMap_HeatMapEvents_CellDoubleClicked) event is triggered. To learn more about the arguments for this event, refer to the documentation [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.CellDoubleClickEventArgs.html).
474+
475+
The following example demonstrates how to use the `CellDoubleClicked` event to retrieve the value of a cell, as well as its x-axis and y-axis labels, by performing a double-click action.
476+
477+
```cshtml
478+
@using Syncfusion.Blazor.HeatMap
479+
480+
@if(IsVisible) {
481+
<div>
482+
<span> X-Label : <b> @XLabel </b> </span> <br />
483+
<span> Y-Label : <b> @YLabel </b> </span> <br />
484+
<span> CellValue : <b> @CellValue </b> </span>
485+
</div>
486+
}
487+
488+
<SfHeatMap DataSource="@dataSource">
489+
<HeatMapEvents CellDoubleClicked="@CellDoubleClicked" />
490+
<HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)" />
491+
<HeatMapXAxis Labels="@xAxisLabels" />
492+
<HeatMapYAxis Labels="@yAxisLabels" />
493+
</SfHeatMap>
494+
495+
@code {
496+
public bool IsVisible = false;
497+
public string XLabel { get; set; }
498+
public string YLabel { get; set; }
499+
public double CellValue { get; set; }
500+
private void CellDoubleClicked(CellDoubleClickEventArgs args)
501+
{
502+
IsVisible = true;
503+
XLabel = args.XLabel;
504+
YLabel = args.YLabel;
505+
CellValue = args.Value;
506+
}
507+
public double[,] dataSource = new double[,]
508+
{
509+
{ 73, 39, 26, 39, 94, 0 },
510+
{ 93, 58, 53, 38, 26, 68 },
511+
{ 99, 28, 22, 4, 66, 90 },
512+
{ 14, 26, 97, 69, 69, 3 },
513+
{ 7, 46, 47, 47, 88, 6 },
514+
{ 41, 55, 73, 23, 3, 79 },
515+
{ 56, 69, 21, 86, 3, 33 },
516+
{ 45, 7, 53, 81, 95, 79 },
517+
{ 60, 77, 74, 68, 88, 51 },
518+
{ 25, 25, 10, 12, 78, 14 },
519+
{ 25, 56, 55, 58, 12, 82 },
520+
{ 74, 33, 88, 23, 86, 59 }
521+
};
522+
public string[] xAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven",
523+
"Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
524+
public string[] yAxisLabels = new string[] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
525+
}
526+
```
527+
![CellDoubleClicked event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-cell-double-clicked-event.gif)
528+
529+
## LegendRendering
530+
531+
The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html#Syncfusion_Blazor_HeatMap_HeatMapEvents_LegendRendering) event is triggered before each legend item is rendered. To learn more about the arguments for this event, refer to the documentation [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.LegendRenderEventArgs.html).
532+
533+
The following example demonstrates how to use the `LegendRendering` event to customize the value of the text in the legend.
534+
535+
```cshtml
536+
@using Syncfusion.Blazor.HeatMap
537+
538+
<SfHeatMap DataSource="@HeatMapData">
539+
<HeatMapEvents LegendRendering="@LegendRender" />
540+
<HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
541+
</HeatMapTitleSettings>
542+
<HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
543+
<HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
544+
<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
545+
<HeatMapPaletteSettings Type="PaletteType.Gradient">
546+
<HeatMapPalettes>
547+
<HeatMapPalette Value="0" Color="#C2E7EC"></HeatMapPalette>
548+
<HeatMapPalette Value="10" Color="#AEDFE6"></HeatMapPalette>
549+
<HeatMapPalette Value="20" Color="#9AD7E0"></HeatMapPalette>
550+
<HeatMapPalette Value="30" Color="#72C7D4"></HeatMapPalette>
551+
<HeatMapPalette Value="40" Color="#5EBFCE"></HeatMapPalette>
552+
<HeatMapPalette Value="50" Color="#4AB7C8"></HeatMapPalette>
553+
<HeatMapPalette Value="60" Color="#309DAE"></HeatMapPalette>
554+
<HeatMapPalette Value="70" Color="#2B8C9B"></HeatMapPalette>
555+
<HeatMapPalette Value="80" Color="#257A87"></HeatMapPalette>
556+
<HeatMapPalette Value="90" Color="#15464D"></HeatMapPalette>
557+
<HeatMapPalette Value="100" Color="#000000"></HeatMapPalette>
558+
</HeatMapPalettes>
559+
</HeatMapPaletteSettings>
560+
<HeatMapLegendSettings Visible="true"></HeatMapLegendSettings>
561+
</SfHeatMap>
562+
563+
564+
@code {
565+
public int[,] HeatMapData = new int[,]
566+
{
567+
{73, 39, 26, 39, 94, 0},
568+
{93, 58, 53, 38, 26, 68},
569+
{99, 28, 22, 4, 66, 90},
570+
{14, 26, 97, 69, 69, 3},
571+
{7, 46, 47, 47, 88, 6},
572+
{41, 55, 73, 23, 3, 79}
573+
};
574+
public string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };
575+
public string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
576+
private void LegendRender(Syncfusion.Blazor.HeatMap.LegendRenderEventArgs args)
577+
{
578+
if (args.Text != "0")
579+
{
580+
args.Text = "";
581+
}
582+
}
583+
}
584+
```
585+
![LegendRendering event in Blazor HeatMap Chart](images/events/blazor-heatmap-chart-legendrendering-event.png)

‎blazor/heatmap-chart/images/events/blazor-heatmap-chart-cell-clicked-event.gif‎

68.6 KB
Loading

‎blazor/heatmap-chart/images/events/blazor-heatmap-chart-cell-double-clicked-event.gif‎

226 KB
Loading

‎blazor/heatmap-chart/images/events/blazor-heatmap-chart-legendrendering-event.png‎

22.1 KB
Loading

‎blazor/maps/images/Marker/blazor-maps-disabling-zooming-on-marker-click.gif‎

225 KB
Loading

‎blazor/maps/images/Polygon/blazor-map-line-shape-on-tile-images.gif‎

94.3 KB
Loading

‎blazor/maps/images/UserInteraction/blazor-maps-tooltip-duration.gif‎

42.8 KB
Loading

‎blazor/maps/maps-event.md‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,55 @@ The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
379379
}
380380
```
381381

382+
## MouseMove
383+
384+
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).
385+
386+
```cshtml
387+
@using Syncfusion.Blazor.Maps
388+
389+
<SfMaps>
390+
<MapsEvents MouseMove="@MouseMoveEvent"></MapsEvents>
391+
<MapsZoomSettings Enable="true"></MapsZoomSettings>
392+
<MapsLayers>
393+
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
394+
<MapsMarkerSettings>
395+
<MapsMarker Visible="true" DataSource="LargestCities" Height="25" Width="15" TValue="City">
396+
</MapsMarker>
397+
</MapsMarkerSettings>
398+
<MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Circle" Fill="#008CFF" Height="25" Width="25">
399+
<MapsLayerMarkerClusterLabelStyle Color="white"></MapsLayerMarkerClusterLabelStyle>
400+
</MapsMarkerClusterSettings>
401+
<MapsShapeSettings Fill="lightgray">
402+
</MapsShapeSettings>
403+
</MapsLayer>
404+
</MapsLayers>
405+
</SfMaps>
406+
407+
@code {
408+
public class City
409+
{
410+
public double Latitude { get; set; }
411+
public double Longitude { get; set; }
412+
public string Name { get; set; }
413+
public double Area { get; set; }
414+
};
415+
private List<City> LargestCities = new List<City> {
416+
new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
417+
new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
418+
new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
419+
new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
420+
new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
421+
new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
422+
new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
423+
};
424+
public void MouseMoveEvent(Syncfusion.Blazor.Maps.MouseMoveEventArgs args)
425+
{
426+
// Here you can customize your code
427+
}
428+
}
429+
```
430+
382431
## OnBubbleClick
383432

384433
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).
@@ -1006,4 +1055,4 @@ The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.M
10061055
// Here you can customize your code
10071056
}
10081057
}
1009-
```
1058+
```

‎blazor/maps/markers.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,44 @@ The Maps can be initially scaled to the center value based on the marker distanc
465465

466466
![Blazor Maps Marker with Zooming](./images/Marker/blazor-maps-marker-zooming.PNG)
467467

468+
## Disabling Zoom on Marker Click
469+
470+
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` to **false** in the `MapsZoomSettings`. This setting disables zooming specifically for marker clicks. By default, `ZoomOnMarkerClick` is set to **true**.
471+
472+
```cshtml
473+
@using Syncfusion.Blazor.Maps
474+
475+
<SfMaps>
476+
<MapsLayers>
477+
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
478+
<MapsMarkerSettings>
479+
<MapsMarker Visible='true' Width="20" Height="20" AnimationDuration="0" DataSource='MarkerDataSource' TValue="MapMarkerDataSource">
480+
</MapsMarker>
481+
</MapsMarkerSettings>
482+
</MapsLayer>
483+
</MapsLayers>
484+
<MapsZoomSettings Enable='true' ZoomOnClick="true" ZoomOnMarkerClick="false">
485+
<MapsZoomToolbarSettings HorizontalAlignment="Alignment.Far">
486+
</MapsZoomToolbarSettings>
487+
</MapsZoomSettings>
488+
</SfMaps>
489+
@code {
490+
public class MapMarkerDataSource
491+
{
492+
public double latitude { get; set; }
493+
public double longitude { get; set; }
494+
public string name { get; set; }
495+
};
496+
public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
497+
new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
498+
new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
499+
new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
500+
};
501+
}
502+
```
503+
504+
![Disabling Zoom on Marker Click in Blazor Maps](./images/Marker/blazor-maps-disabling-zooming-on-marker-click.gif)
505+
468506
## Marker clustering
469507

470508
Maps provide support to cluster the markers when they overlap each other. The number on a cluster indicates how many overlapped markers it contains. If zooming is performed on any of the cluster locations in Maps, the number on the cluster will decrease, and the individual markers will be seen on the map. When zooming out, the overlapping marker will increase. So that it can cluster again and increase the count over the cluster.

0 commit comments

Comments
 (0)