1+ @page " /tests/maps"
2+
3+ <Row >
4+ <Column >
5+ <Card Margin =" Margin.Is4.OnY"
6+ <CardHeader >
7+ <CardTitle >Maps</CardTitle >
8+ </CardHeader >
9+ <CardBody >
10+ <Buttons >
11+ <Button Color =" Color.Primary" Clicked =" @ShowSplit"
12+ Split
13+ </Button >
14+ <Button Color =" Color.Primary" Clicked =" @ShowCroatia"
15+ Croatia
16+ </Button >
17+ <Button Color =" Color.Secondary" Clicked =" @ZoomIn"
18+ Zoom In
19+ </Button >
20+ <Button Color =" Color.Secondary" Clicked =" @ZoomOut"
21+ Zoom Out
22+ </Button >
23+ </Buttons >
24+ </CardBody >
25+ <CardBody >
26+ <Map @ref =" @mapRef"
27+ View =" @view"
28+ ViewChanged =" @OnViewChanged"
29+ Options =" @options"
30+ Clicked =" @OnMapClicked"
31+ Height =" Height.Rem( 35 )"
32+ <MapTileLayer Source =" https://tile.openstreetmap.org/{z}/{x}/{y}.png"
33+ Attribution =" © ; OpenStreetMap contributors"
34+ <MapMarkerLayer TItem =" MapPlace"
35+ Data =" @places"
36+ IdSelector =" @( place => place.Id )"
37+ CoordinateSelector =" @( place => place.Coordinate )"
38+ TitleSelector =" @( place => place.Name )"
39+ PopupTextSelector =" @( place => place.Description )"
40+ MarkerClicked =" @OnPlaceClicked"
41+ <MapCircle Center =" @split"
42+ Radius =" 1200"
43+ Style =" @cityAreaStyle"
44+ <MapPolyline Coordinates =" @route"
45+ Style =" @routeStyle"
46+ <MapPolygon Rings =" @polygon"
47+ Style =" @polygonStyle"
48+ </Map >
49+ </CardBody >
50+ <CardBody >
51+ <Paragraph Margin =" Margin.Is0"
52+ Center: @view.Center.Latitude.ToString( "0.0000" ), @view.Center.Longitude.ToString( "0.0000" )
53+ | Zoom: @view.Zoom.ToString( "0.0" )
54+ | Last map click: @lastMapClick
55+ | Selected place: @selectedPlace
56+ </Paragraph >
57+ </CardBody >
58+ </Card >
59+ </Column >
60+ </Row >
61+
62+ @code {
63+ private Map mapRef ;
64+
65+ private readonly MapCoordinate split = new ( 43 . 5081 , 16 . 4402 );
66+
67+ private MapView view = new ()
68+ {
69+ Center = new ( 43 . 5081 , 16 . 4402 ),
70+ Zoom = 13 ,
71+ };
72+
73+ private MapOptions options = new ()
74+ {
75+ Controls = new ()
76+ {
77+ ShowScale = true ,
78+ },
79+ };
80+
81+ private readonly MapShapeStyle cityAreaStyle = new ()
82+ {
83+ StrokeColor = " #2f80ed"
84+ FillColor = " #2f80ed"
85+ FillOpacity = 0 . 12 ,
86+ };
87+
88+ private readonly MapShapeStyle routeStyle = new ()
89+ {
90+ StrokeColor = " #d9480f"
91+ StrokeWidth = 4 ,
92+ };
93+
94+ private readonly MapShapeStyle polygonStyle = new ()
95+ {
96+ StrokeColor = " #2f9e44"
97+ FillColor = " #2f9e44"
98+ FillOpacity = 0 . 16 ,
99+ };
100+
101+ private readonly List <MapPlace > places =
102+ [
103+ new ( " riva" " Riva Promenade" new ( 43 . 5073 , 16 . 4379 ), " Waterfront promenade by the harbor."
104+ new ( " diocletian-palace" " Diocletian's Palace" new ( 43 . 5081 , 16 . 4402 ), " Historic palace in the city center."
105+ new ( " marjan" " Marjan Hill" new ( 43 . 5107 , 16 . 4147 ), " Forested hill and park west of the old town."
106+ ];
107+
108+ private readonly IReadOnlyList <MapCoordinate > route =
109+ [
110+ new ( 43 . 5073 , 16 . 4379 ),
111+ new ( 43 . 5081 , 16 . 4402 ),
112+ new ( 43 . 5094 , 16 . 4349 ),
113+ new ( 43 . 5107 , 16 . 4147 ),
114+ ];
115+
116+ private readonly IReadOnlyList <IReadOnlyList <MapCoordinate >> polygon =
117+ [
118+ [
119+ new ( 43 . 5066 , 16 . 4366 ),
120+ new ( 43 . 5094 , 16 . 4384 ),
121+ new ( 43 . 5101 , 16 . 4432 ),
122+ new ( 43 . 5069 , 16 . 4445 ),
123+ new ( 43 . 5066 , 16 . 4366 ),
124+ ],
125+ ];
126+
127+ private string lastMapClick = " none"
128+ private string selectedPlace = " none"
129+
130+ private Task ShowSplit ()
131+ => mapRef .SetView ( split , 13 ).AsTask ();
132+
133+ private Task ShowCroatia ()
134+ {
135+ var bounds = new MapBounds (
136+ new MapCoordinate ( 42 . 30 , 13 . 40 ),
137+ new MapCoordinate ( 46 . 60 , 19 . 50 ) );
138+
139+ return mapRef .FitBounds ( bounds , new () { Padding = new ( 24 , 24 ) } ).AsTask ();
140+ }
141+
142+ private Task ZoomIn ()
143+ => mapRef .ZoomIn ().AsTask ();
144+
145+ private Task ZoomOut ()
146+ => mapRef .ZoomOut ().AsTask ();
147+
148+ private Task OnViewChanged ( MapView changedView )
149+ {
150+ view = changedView ;
151+
152+ return Task .CompletedTask ;
153+ }
154+
155+ private Task OnMapClicked ( MapMouseEventArgs eventArgs )
156+ {
157+ lastMapClick = $" {eventArgs .Coordinate .Latitude : 0 . 0000 }, {eventArgs .Coordinate .Longitude : 0 . 0000 }"
158+
159+ return Task .CompletedTask ;
160+ }
161+
162+ private Task OnPlaceClicked ( MapMarkerClickedEventArgs < MapPlace > eventArgs )
163+ {
164+ selectedPlace = eventArgs .Item .Name ;
165+
166+ return Task .CompletedTask ;
167+ }
168+
169+ private sealed record MapPlace ( string Id , string Name , MapCoordinate Coordinate , string Description );
170+ }
0 commit comments