9 | About
10 |
11 |
12 | AddListener
5 | 6 |
7 |
41 |
42 | @code {
43 | private MapLibre _mapListener { get; set; } = new MapLibre();
44 | private readonly MapOptions _mapOptions = new()
45 | {
46 | Style = "https://demotiles.maplibre.org/style.json"
47 | };
48 | private async Task HandleMapLoadListener(EventArgs args)
49 | {
50 | await _mapListener.AddListener
8 |
11 |
12 |
40 |
13 | <Map @ref="_map" OnLoad="HandleMapLoad" ></Map>
14 |
15 |
16 |
17 | @code
18 | {
19 | private Map _map { get; set; } = new Map();
20 | private readonly MapOptions _mapOptions = new()
21 | {
22 | Style = "https://demotiles.maplibre.org/style.json"
23 | };
24 | private async Task HandleMapLoad(EventArgs args)
25 | {
26 | // Add map listeners after it has loaded
27 | await _map.AddListener<dynamic>("click", OnClick);
28 | }
29 |
30 | public void OnClick(dynamic eventData)
31 | {
32 | Console.WriteLine(JsonSerializer.Serialize(eventData));
33 | Console.WriteLine("Layer has been clicked");
34 | }
35 | }
36 |
37 |
38 |
39 | Create Popup
6 | 7 |
28 |
31 | """,
32 | Coordinates = evnt.LngLat
33 | }, new PopupOptions
34 | {
35 | CloseOnClick = true,
36 | CloseOnMove = true,
37 | FocusAfterOpen = true,
38 | });
39 | }
40 | }
41 | }
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/Pages/Examples/FitBounds.razor:
--------------------------------------------------------------------------------
1 | @page "/Examples/FitBounds"
2 | @using Community.Blazor.MapLibre.Models
3 | Map clicked
29 |You clicked the map at {evnt.LngLat.Latitude} {evnt.LngLat.Longitude}
FitBounds
4 | 5 |
6 |
12 |
13 | @code {
14 | private MapLibre _mapListener { get; set; } = new MapLibre();
15 | private readonly MapOptions _mapOptions = new()
16 | {
17 | Style = "https://demotiles.maplibre.org/style.json"
18 | };
19 | private async Task HandleMapLoadListener(EventArgs args)
20 | {
21 | var bounds = new LngLatBounds()
22 | {
23 | Southwest = new LngLat(17.124277, 48.154861),
24 | Northeast = new LngLat(21.262986, 49.059367)
25 | };
26 |
27 | await _mapListener.FitBounds(bounds);
28 | }
29 | }
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/Pages/Examples/LoadGeoJson.razor:
--------------------------------------------------------------------------------
1 | @page "/Examples/LoadGeoJson"
2 | @using Community.Blazor.MapLibre.Models
3 | @using Community.Blazor.MapLibre.Models.Feature
4 | @using Community.Blazor.MapLibre.Models.Layers
5 | @using Community.Blazor.MapLibre.Models.Sources
6 |
7 |
10 | Fit Bounds
11 |LoadGeoJson
7 | 8 |
9 |
84 |
85 | @code {
86 | private MapLibre _mapWithGeoJson { get; set; } = new MapLibre();
87 | private readonly MapOptions _mapWithGeoJsonOptions = new MapOptions()
88 | {
89 | Style = "https://demotiles.maplibre.org/style.json",
90 | Center = new LngLat
91 | {
92 | Latitude = 45.188193,
93 | Longitude = -68.991841
94 | },
95 | Zoom = 4
96 | };
97 | private async Task HandleMapLoadGeoJson(EventArgs args)
98 | {
99 | await _mapWithGeoJson.AddSource("maine", new GeoJsonSource()
100 | {
101 | Data = new FeatureFeature()
102 | {
103 | Geometry = new PolygonGeometry()
104 | {
105 | Coordinates =
106 | [
107 | [
108 | [-67.13734351262877, 45.137451890638886],
109 | [-66.96466, 44.8097],
110 | [-68.03252, 44.3252],
111 | [-69.06, 43.98],
112 | [-70.11617, 43.68405],
113 | [-70.64573401557249, 43.090083319667144],
114 | [-70.75102474636725, 43.08003225358635],
115 | [-70.79761105007827, 43.21973948828747],
116 | [-70.98176001655037, 43.36789581966826],
117 | [-70.94416541205806, 43.46633942318431],
118 | [-71.08482, 45.3052400000002],
119 | [-70.6600225491012, 45.46022288673396],
120 | [-70.30495378282376, 45.914794623389355],
121 | [-70.00014034695016, 46.69317088478567],
122 | [-69.23708614772835, 47.44777598732787],
123 | [-68.90478084987546, 47.184794623394396],
124 | [-68.23430497910454, 47.35462921812177],
125 | [-67.79035274928509, 47.066248887716995],
126 | [-67.79141211614706, 45.702585354182816],
127 | [-67.13734351262877, 45.137451890638886],
128 | ]
129 | ]
130 | }
131 | }
132 | });
133 |
134 | await _mapWithGeoJson.AddLayer(new FillLayer()
135 | {
136 | Id = "GeoJsonLayerId",
137 | Source = "maine",
138 | Paint = new FillLayerPaint()
139 | {
140 | FillColor = "#088",
141 | FillOpacity = 0.8
142 | }
143 | });
144 | }
145 | }
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/Pages/Examples/RenderGlobe.razor:
--------------------------------------------------------------------------------
1 | @page "/Examples/RenderGlobe"
2 | @using Community.Blazor.MapLibre.Models
3 |
4 |
10 |
13 | Add GEOJson
14 |
15 |
16 |
83 |
17 |
18 | <MapLibre @ref="_mapWithGeoJson" Options="_mapWithGeoJsonOptions" OnLoad="HandleMapLoadGeoJson" ></MapLibre>
19 | @@code {
20 | private Map _mapWithGeoJson { get; set; } = new Map();
21 | private readonly MapOptions _mapWithGeoJsonOptions = new MapOptions()
22 | {
23 | Style = "https://demotiles.maplibre.org/style.json",
24 | Center = new LngLat()
25 | {
26 | Latitude = 45.188193,
27 | Longitude = -68.991841
28 | },
29 | Zoom = 4
30 | };
31 | private async Task HandleMapLoadGeoJson(EventArgs args)
32 | {
33 | await _mapWithGeoJson.AddSource("maine", new GeoJsonSource()
34 | {
35 | Data = new FeatureFeature()
36 | {
37 | Geometry = new PolygonFeature()
38 | {
39 | Coordinates =
40 | [
41 | [
42 | [-67.13734351262877, 45.137451890638886],
43 | [-66.96466, 44.8097],
44 | [-68.03252, 44.3252],
45 | [-69.06, 43.98],
46 | [-70.11617, 43.68405],
47 | [-70.64573401557249, 43.090083319667144],
48 | [-70.75102474636725, 43.08003225358635],
49 | [-70.79761105007827, 43.21973948828747],
50 | [-70.98176001655037, 43.36789581966826],
51 | [-70.94416541205806, 43.46633942318431],
52 | [-71.08482, 45.3052400000002],
53 | [-70.6600225491012, 45.46022288673396],
54 | [-70.30495378282376, 45.914794623389355],
55 | [-70.00014034695016, 46.69317088478567],
56 | [-69.23708614772835, 47.44777598732787],
57 | [-68.90478084987546, 47.184794623394396],
58 | [-68.23430497910454, 47.35462921812177],
59 | [-67.79035274928509, 47.066248887716995],
60 | [-67.79141211614706, 45.702585354182816],
61 | [-67.13734351262877, 45.137451890638886],
62 | ]
63 | ]
64 | }
65 | }
66 | });
67 |
68 | await _mapWithGeoJson.AddLayer(new FillLayer()
69 | {
70 | Id = "GeoJsonLayerId",
71 | Source = "maine",
72 | Paint = new FillLayerPaint()
73 | {
74 | FillColor = "#088",
75 | FillOpacity = 0.8
76 | }
77 | });
78 | }
79 | }
80 |
81 |
82 | Render Globe
5 | 6 |
7 |
16 |
17 |
18 |
19 | @code {
20 | private MapLibre _mapListener { get; set; } = new MapLibre();
21 |
22 | private readonly MapOptions _mapOptions = new()
23 | {
24 | Style = "https://demotiles.maplibre.org/style.json"
25 | };
26 |
27 |
28 | private async Task OnStyleLoad(EventArgs args)
29 | {
30 | await _mapListener.SetProjection(new ProjectionSpecification()
31 | {
32 | Type = "globe"
33 | });
34 | }
35 |
36 | }
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/Pages/Home.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 | @using Community.Blazor.MapLibre.Models
3 |
4 |
8 |
13 |
14 |
15 | Introduction
5 |6 | Community.Blazor.Maplibre is a wrapper around MapLibre-GL-JS library 7 |
8 |
9 |
40 |
41 |
42 | @code
43 | {
44 | private readonly MapOptions _mapOptions = new()
45 | {
46 | Container = "UniqueMapId",
47 | Style = "https://demotiles.maplibre.org/style.json",
48 | Center = new LngLat()
49 | {
50 | Latitude = -2.320679,
51 | Longitude = 112.772537
52 | },
53 | Zoom = 3
54 | };
55 |
56 | }
57 |
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/Program.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Components.Web;
2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
3 | using Community.Blazor.MapLibre.Examples.WebAssembly;
4 |
5 | var builder = WebAssemblyHostBuilder.CreateDefault(args);
6 | builder.RootComponents.Add
10 |
39 |
11 |
14 | Basic map
15 |
16 |
38 |
17 |
18 | <MapLibre Options="_mapOptions" Class="rounded-top"
19 | Height="300px"></MapLibre>
20 |
21 | @@code
22 | {
23 | private readonly MapOptions _mapOptions = new()
24 | {
25 | Container = "UniqueMapId",
26 | Style = "https://demotiles.maplibre.org/style.json",
27 | Center = new LngLat()
28 | {
29 | Latitude = -2.320679,
30 | Longitude = 112.772537
31 | },
32 | Zoom = 3
33 | };
34 | }
35 |
36 |
37 |
4 |
7 |
9 |
10 | @code {
11 |
12 | /// @Title
8 |
23 |
27 |
28 |
29 |
30 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/wwwroot/sample-data/weather.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "date": "2022-01-06",
4 | "temperatureC": 1,
5 | "summary": "Freezing"
6 | },
7 | {
8 | "date": "2022-01-07",
9 | "temperatureC": 14,
10 | "summary": "Bracing"
11 | },
12 | {
13 | "date": "2022-01-08",
14 | "temperatureC": -13,
15 | "summary": "Freezing"
16 | },
17 | {
18 | "date": "2022-01-09",
19 | "temperatureC": -16,
20 | "summary": "Balmy"
21 | },
22 | {
23 | "date": "2022-01-10",
24 | "temperatureC": -2,
25 | "summary": "Chilly"
26 | }
27 | ]
28 |
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.Examples/wwwroot/staticwebapp.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationFallback": {
3 | "rewrite": "/index.html"
4 | }
5 | }
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre.sln:
--------------------------------------------------------------------------------
1 |
2 | Microsoft Visual Studio Solution File, Format Version 12.00
3 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Community.Blazor.MapLibre", "Community.Blazor.MapLibre\Community.Blazor.MapLibre.csproj", "{3DA04D2B-0D7F-428F-86B7-C4ACBCE2BA56}"
4 | EndProject
5 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Community.Blazor.MapLibre.Examples", "Community.Blazor.MapLibre.Examples\Community.Blazor.MapLibre.Examples.csproj", "{44214551-FA9D-4809-87EA-7843BDB18397}"
6 | EndProject
7 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "items", "items", "{FB2BD75E-3038-46E3-B3D9-851ADD3E045B}"
8 | ProjectSection(SolutionItems) = preProject
9 | global.json = global.json
10 | README.md = README.md
11 | UNLICENSE = UNLICENSE
12 | EndProjectSection
13 | EndProject
14 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "workflows", "workflows", "{1041976B-4110-4B6A-9130-0144068C0638}"
15 | ProjectSection(SolutionItems) = preProject
16 | .github\workflows\build-deploy-publish.yml = .github\workflows\build-deploy-publish.yml
17 | .github\workflows\pr-build-test.yml = .github\workflows\pr-build-test.yml
18 | .github\workflows\codeql.yml = .github\workflows\codeql.yml
19 | EndProjectSection
20 | EndProject
21 | Global
22 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
23 | Debug|Any CPU = Debug|Any CPU
24 | Release|Any CPU = Release|Any CPU
25 | EndGlobalSection
26 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
27 | {3DA04D2B-0D7F-428F-86B7-C4ACBCE2BA56}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
28 | {3DA04D2B-0D7F-428F-86B7-C4ACBCE2BA56}.Debug|Any CPU.Build.0 = Debug|Any CPU
29 | {3DA04D2B-0D7F-428F-86B7-C4ACBCE2BA56}.Release|Any CPU.ActiveCfg = Release|Any CPU
30 | {3DA04D2B-0D7F-428F-86B7-C4ACBCE2BA56}.Release|Any CPU.Build.0 = Release|Any CPU
31 | {44214551-FA9D-4809-87EA-7843BDB18397}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
32 | {44214551-FA9D-4809-87EA-7843BDB18397}.Debug|Any CPU.Build.0 = Debug|Any CPU
33 | {44214551-FA9D-4809-87EA-7843BDB18397}.Release|Any CPU.ActiveCfg = Release|Any CPU
34 | {44214551-FA9D-4809-87EA-7843BDB18397}.Release|Any CPU.Build.0 = Release|Any CPU
35 | EndGlobalSection
36 | GlobalSection(NestedProjects) = preSolution
37 | {1041976B-4110-4B6A-9130-0144068C0638} = {FB2BD75E-3038-46E3-B3D9-851ADD3E045B}
38 | EndGlobalSection
39 | EndGlobal
40 |
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre/CallbackHandler.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.JSInterop;
2 | using System.Text.Json;
3 |
4 | namespace Community.Blazor.MapLibre;
5 |
6 | ///
8 |
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre/MapLibre.razor.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yet-another-solution/Blazor.MapLibre/e3846785432cd92f712aab73cc5b42d52ed37eb9/Community.Blazor.MapLibre/MapLibre.razor.css
--------------------------------------------------------------------------------
/Community.Blazor.MapLibre/Models/BulkTransaction.cs:
--------------------------------------------------------------------------------
1 | using System.Text.Json.Serialization;
2 |
3 | namespace Community.Blazor.MapLibre.Models;
4 |
5 | ///
17 | /// {
18 | /// "type": "Polygon",
19 | /// "coordinates": [
20 | /// [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
21 | /// ]
22 | /// }
23 | ///
24 | ///
28 | /// {
29 | /// "type": "Polygon",
30 | /// "coordinates": [
31 | /// [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ],
32 | /// [ [100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2] ]
33 | /// ]
34 | /// }
35 | ///
36 | /// -
33 | ///
-
38 | ///
Lower value 39 | ///Feature is drawn first and appears beneath features with a higher sort key. 40 | ///
41 | /// -
42 | ///
Higher value 43 | ///Feature is drawn later and appears above features with a lower sort key. 44 | ///
45 | ///
-
59 | ///
-
64 | ///
visible The layer is shown. 66 | ///
67 | /// -
68 | ///
none The layer is not shown. 70 | ///
71 | ///
-
88 | ///
-
93 | ///
true The fill is antialiased, resulting in smoother edges. 95 | ///
96 | /// -
97 | ///
false The fill is not antialiased, which may result in jagged edges. 99 | ///
100 | ///
-
116 | ///
-
121 | ///
0 The fill layer is fully transparent. 123 | ///
124 | /// -
125 | ///
0.5 The fill layer is 50% transparent. 127 | ///
128 | /// -
129 | ///
1 The fill layer is fully opaque. 131 | ///
132 | /// -
133 | ///
Uses 134 | ///interpolate expressionsAllows dynamic adjustments to the fill opacity. 135 | ///
136 | ///
-
152 | ///
-
157 | ///
#000000 (default)The fill color is black. 159 | ///
160 | /// -
161 | ///
rgba(r, g, b, a) Specifies a custom color with an optional alpha component for transparency. 163 | ///
164 | /// -
165 | ///
Uses 166 | ///interpolate expressionsAllows dynamic adjustments to the fill color. 167 | ///
168 | /// -
169 | ///
fill-pattern is setThe fill color is disabled in favor of a pattern. 171 | ///
172 | ///
-
188 | ///
-
193 | ///
Value not set 194 | ///Defaults to the value of 195 | ///fill-color .
196 | /// -
197 | ///
Custom color set 198 | ///Uses the specified color for the outline. 199 | ///
200 | /// -
201 | ///
fill-pattern is setThe outline color is disabled. 203 | ///
204 | /// -
205 | ///
fill-antialias isfalse The outline color is not applied. 207 | ///
208 | /// -
209 | ///
Uses 210 | ///interpolate expressionsAllows dynamic adjustments to the outline color. 211 | ///
212 | ///
-
228 | ///
-
233 | ///
[0, 0] (default)No offset is applied. 235 | ///
236 | /// -
237 | ///
[x, y] with positive xMoves the geometry to the right. 239 | ///
240 | /// -
241 | ///
[x, y] with negative xMoves the geometry to the left. 243 | ///
244 | /// -
245 | ///
[x, y] with positive yMoves the geometry downward. 247 | ///
248 | /// -
249 | ///
[x, y] with negative yMoves the geometry upward. 251 | ///
252 | /// -
253 | ///
Uses 254 | ///interpolate expressionsAllows dynamic adjustments to the offset values. 255 | ///
256 | ///
-
270 | ///
-
275 | ///
map (default)The fill is translated relative to the map. 277 | ///
278 | /// -
279 | ///
viewport The fill is translated relative to the viewport. 281 | ///
282 | ///
-
299 | ///
-
304 | ///
Image width and height are a power of two 305 | ///Ensures seamless pattern rendering. 306 | ///
307 | /// -
308 | ///
Zoom-dependent expressions 309 | ///Evaluated only at integer zoom levels. 310 | ///
311 | ///