Skip to content

Commit 2f4f30a

Browse files
xristianstefanovxristianstefanov
authored
docs(map):added documentation for the map component (#704)
* docs(map):added documentation for the map component * docs(map):fixes as per comments * docs(map):changed name of the zoom section * docs(map):reversed sentences * docs(map):fixes as per last comments * docs(map):reduced json * docs(map):rewording in layer sections
1 parent 0355178 commit 2f4f30a

File tree

15 files changed

+1069
-0
lines changed

15 files changed

+1069
-0
lines changed

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,9 @@ navigation:
326326
title: "LoaderContainer"
327327
"*map":
328328
title: "Map"
329+
"*layers":
330+
title: "Layers"
331+
position: 10
329332
"*maskedtextbox":
330333
title: "MaskedTextBox"
331334
"*mediaplayer":

‎components/map/events.md‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
---
2+
title: Events
3+
page_title: Map - Events
4+
description: Discover the Blazor Map events and explore the examples.
5+
slug: components/map/events
6+
tags: telerik,blazor,map,events,event
7+
published: true
8+
position: 11
9+
---
10+
11+
# Map Events
12+
13+
This article explains the available events for the Telerik Map for Blazor:
14+
15+
* [OnClick](#onclick)
16+
* [OnMarkerClick](#onmarkerclick)
17+
* [OnShapeClick](#onshapeclick)
18+
19+
## OnClick
20+
21+
The `OnClick` event fires when the user clicks on the map. Its `EventCallback<MapClickEventArgs>` gives:
22+
* `MapClickEventArgs.EventArgs` - provides the native DOM event (browser event).
23+
* `MapClickEventArgs.Location` - provides the location of the click on the map (`MapLocation` has `Latitude` and `Longitude` props).
24+
25+
>caption Handle OnClick.
26+
27+
````CSHTML
28+
@* This code snippet showcases an example of how to handle the OnClick event. *@
29+
30+
<TelerikMap Center="@Center"
31+
Zoom="3"
32+
OnClick="@OnMapClick">
33+
<MapLayers>
34+
<MapLayer Type="@MapLayersType.Tile"
35+
Attribution="@Attribution"
36+
Subdomains="@Subdomains"
37+
UrlTemplate="@UrlTemplate">
38+
</MapLayer>
39+
40+
<MapLayer Type="@MapLayersType.Bubble"
41+
Data="@BubbleData"
42+
LocationField="@nameof(BubbleModel.LatLng)"
43+
ValueField="@nameof(BubbleModel.Revenue)">
44+
<MapLayerBubbleSettings>
45+
<MapLayerBubbleSettingsStyle>
46+
<MapLayerBubbleSettingsStyleFill Color="#0000ff"></MapLayerBubbleSettingsStyleFill>
47+
<MapLayerBubbleSettingsStyleStroke Color="#000000"></MapLayerBubbleSettingsStyleStroke>
48+
</MapLayerBubbleSettingsStyle>
49+
</MapLayerBubbleSettings>
50+
</MapLayer>
51+
52+
<MapLayer Type="@MapLayersType.Marker"
53+
Data="@MarkerData1"
54+
LocationField="@nameof(MarkerModel.LatLng)"
55+
TitleField="@nameof(MarkerModel.Title)">
56+
</MapLayer>
57+
</MapLayers>
58+
</TelerikMap>
59+
60+
<strong>@EventResult</strong>
61+
62+
@code {
63+
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
64+
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
65+
public string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
66+
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
67+
public string EventResult { get; set; }
68+
69+
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
70+
{
71+
new MarkerModel()
72+
{
73+
LatLng = new double[] { 30.268107, -97.744821 },
74+
Title = "Austin, TX"
75+
}
76+
};
77+
78+
public List<BubbleModel> BubbleData { get; set; } = new List<BubbleModel>()
79+
{
80+
new BubbleModel()
81+
{
82+
LatLng = new double[] { 37.7749, -122.4194 },
83+
Revenue = 1000
84+
},
85+
new BubbleModel()
86+
{
87+
LatLng = new double[] { 41.8781, -87.6298 },
88+
Revenue = 200
89+
}
90+
};
91+
92+
public void OnMapClick(MapClickEventArgs args)
93+
{
94+
var location = args.Location;
95+
var eventArgs = args.EventArgs as MouseEventArgs;
96+
97+
LogToConsole(
98+
$"map click: location = [{location.Latitude}, {location.Longitude}]," +
99+
$"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}");
100+
}
101+
102+
public void LogToConsole(string text)
103+
{
104+
EventResult = text;
105+
}
106+
107+
public class MarkerModel
108+
{
109+
public double[] LatLng { get; set; }
110+
public string Title { get; set; }
111+
}
112+
113+
public class BubbleModel
114+
{
115+
public double[] LatLng { get; set; }
116+
public int Revenue { get; set; }
117+
}
118+
}
119+
````
120+
121+
## OnMarkerClick
122+
123+
The `OnMarkerClick` event fires when the user clicks on a marker. Its `EventCallback<MapMarkerClickEventArgs>` gives:
124+
* `MapMarkerClickEventArgs.DataItem` - provides the data item (object) of the bound marker.
125+
* `MapMarkerClickEventArgs.EventArgs` - provides the native DOM event (browser event).
126+
127+
>caption Handle OnMarkerClick.
128+
129+
````CSHTML
130+
@* This code snippet showcases an example of how to handle the OnMarkerClick event. *@
131+
132+
<TelerikMap Center="@Center"
133+
Zoom="3"
134+
OnMarkerClick="@OnMarkerClick">
135+
<MapLayers>
136+
<MapLayer Type="@MapLayersType.Tile"
137+
Attribution="@Attribution"
138+
Subdomains="@Subdomains"
139+
UrlTemplate="@UrlTemplate">
140+
</MapLayer>
141+
142+
<MapLayer Type="@MapLayersType.Bubble"
143+
Data="@BubbleData"
144+
LocationField="@nameof(BubbleModel.LatLng)"
145+
ValueField="@nameof(BubbleModel.Revenue)">
146+
<MapLayerBubbleSettings>
147+
<MapLayerBubbleSettingsStyle>
148+
<MapLayerBubbleSettingsStyleFill Color="#0000ff"></MapLayerBubbleSettingsStyleFill>
149+
<MapLayerBubbleSettingsStyleStroke Color="#000000"></MapLayerBubbleSettingsStyleStroke>
150+
</MapLayerBubbleSettingsStyle>
151+
</MapLayerBubbleSettings>
152+
</MapLayer>
153+
154+
<MapLayer Type="@MapLayersType.Marker"
155+
Data="@MarkerData1"
156+
LocationField="@nameof(MarkerModel.LatLng)"
157+
TitleField="@nameof(MarkerModel.Title)">
158+
</MapLayer>
159+
</MapLayers>
160+
</TelerikMap>
161+
162+
<strong>@EventResult</strong>
163+
164+
@code {
165+
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
166+
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
167+
public string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
168+
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
169+
public string EventResult { get; set; }
170+
171+
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
172+
{
173+
new MarkerModel()
174+
{
175+
LatLng = new double[] { 30.268107, -97.744821 },
176+
Title = "Austin, TX"
177+
}
178+
};
179+
180+
public List<BubbleModel> BubbleData { get; set; } = new List<BubbleModel>()
181+
{
182+
new BubbleModel()
183+
{
184+
LatLng = new double[] { 37.7749, -122.4194 },
185+
Revenue = 1000
186+
},
187+
new BubbleModel()
188+
{
189+
LatLng = new double[] { 41.8781, -87.6298 },
190+
Revenue = 200
191+
}
192+
};
193+
194+
public void OnMarkerClick(MapMarkerClickEventArgs args)
195+
{
196+
var dataItem = args.DataItem as MarkerModel;
197+
var eventArgs = args.EventArgs as MouseEventArgs;
198+
199+
LogToConsole(
200+
$"marker click: title = {dataItem.Title}, location = [{string.Join(",", dataItem.LatLng)}]," +
201+
$"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}");
202+
}
203+
204+
public void LogToConsole(string text)
205+
{
206+
EventResult = text;
207+
}
208+
209+
public class MarkerModel
210+
{
211+
public double[] LatLng { get; set; }
212+
public string Title { get; set; }
213+
}
214+
215+
public class BubbleModel
216+
{
217+
public double[] LatLng { get; set; }
218+
public int Revenue { get; set; }
219+
}
220+
}
221+
````
222+
223+
## OnShapeClick
224+
225+
The `OnShapeClick` event fires when the user clicks on a shape. Its `EventCallback<MapShapeClickEventArgs>` gives:
226+
* `MapShapeClickEventArgs.DataItem` - provides the data item when the shape is coming from a bubble layer (null for shape layer).
227+
* `MapShapeClickEventArgs.GeoJsonDataItem` - provides the data item in the form of GeoJSON (dictionary) when the layer is a shape layer (null for bubble layer).
228+
* `MapShapeClickEventArgs.EventArgs` - provides the native DOM event (browser event).
229+
230+
>caption Handle OnShapeClick.
231+
232+
````CSHTML
233+
@* This code snippet showcases an example of how to handle the OnShapeClick event. *@
234+
235+
<TelerikMap Center="@Center"
236+
Zoom="3"
237+
OnShapeClick="@OnShapeClick">
238+
<MapLayers>
239+
<MapLayer Type="@MapLayersType.Tile"
240+
Attribution="@Attribution"
241+
Subdomains="@Subdomains"
242+
UrlTemplate="@UrlTemplate">
243+
</MapLayer>
244+
245+
<MapLayer Type="@MapLayersType.Bubble"
246+
Data="@BubbleData"
247+
LocationField="@nameof(BubbleModel.LatLng)"
248+
ValueField="@nameof(BubbleModel.Revenue)">
249+
<MapLayerBubbleSettings>
250+
<MapLayerBubbleSettingsStyle>
251+
<MapLayerBubbleSettingsStyleFill Color="#0000ff"></MapLayerBubbleSettingsStyleFill>
252+
<MapLayerBubbleSettingsStyleStroke Color="#000000"></MapLayerBubbleSettingsStyleStroke>
253+
</MapLayerBubbleSettingsStyle>
254+
</MapLayerBubbleSettings>
255+
</MapLayer>
256+
257+
<MapLayer Type="@MapLayersType.Marker"
258+
Data="@MarkerData1"
259+
LocationField="@nameof(MarkerModel.LatLng)"
260+
TitleField="@nameof(MarkerModel.Title)">
261+
</MapLayer>
262+
</MapLayers>
263+
</TelerikMap>
264+
265+
<strong>@EventResult</strong>
266+
267+
@code {
268+
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
269+
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
270+
public string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
271+
public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };
272+
public string EventResult { get; set; }
273+
274+
public List<MarkerModel> MarkerData1 { get; set; } = new List<MarkerModel>()
275+
{
276+
new MarkerModel()
277+
{
278+
LatLng = new double[] { 30.268107, -97.744821 },
279+
Title = "Austin, TX"
280+
}
281+
};
282+
283+
public List<BubbleModel> BubbleData { get; set; } = new List<BubbleModel>()
284+
{
285+
new BubbleModel()
286+
{
287+
LatLng = new double[] { 37.7749, -122.4194 },
288+
Revenue = 1000
289+
},
290+
new BubbleModel()
291+
{
292+
LatLng = new double[] { 41.8781, -87.6298 },
293+
Revenue = 200
294+
}
295+
};
296+
297+
public void OnShapeClick(MapShapeClickEventArgs args)
298+
{
299+
var dataItem = args.DataItem as BubbleModel;
300+
var eventArgs = args.EventArgs as MouseEventArgs;
301+
302+
LogToConsole(
303+
$"shape click: revenue = {dataItem.Revenue}, location = [{string.Join(",", dataItem.LatLng)}]," +
304+
$"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}");
305+
}
306+
307+
public void LogToConsole(string text)
308+
{
309+
EventResult = text;
310+
}
311+
312+
public class MarkerModel
313+
{
314+
public double[] LatLng { get; set; }
315+
public string Title { get; set; }
316+
}
317+
318+
public class BubbleModel
319+
{
320+
public double[] LatLng { get; set; }
321+
public int Revenue { get; set; }
322+
}
323+
}
324+
````

‎components/map/images/bubble-layer.png‎

60.5 KB
Loading

‎components/map/images/map-basics.png‎

112 KB
Loading

‎components/map/images/marker-layer.png‎

61.9 KB
Loading

‎components/map/images/marker-shapes.png‎

83.2 KB
Loading

‎components/map/images/marker-tooltip-settings.png‎

58.6 KB
Loading

‎components/map/images/shape-layer.png‎

37.9 KB
Loading

‎components/map/images/tile-layer.png‎

59 KB
Loading

0 commit comments

Comments
 (0)