You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/maps/getting-started-webapp.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
layout: post
3
-
title: Getting started with Syncfusion Maps Component in Blazor Web App
4
-
description: Check out the documentation for getting started with Syncfusion Blazor Maps Component in Blazor Web App.
3
+
title: Getting started with Maps Component in Blazor Web App | Syncfusion®
4
+
description: Check out the documentation for getting started with Blazor Maps Component in Blazor Web App and much more details.
5
5
platform: Blazor
6
6
component: Maps
7
7
documentation: ug
8
8
---
9
9
10
10
# Getting started with Blazor Maps Component in Blazor Web App
11
11
12
-
This section briefly explains how to include [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
12
+
This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
13
13
14
14
{% tabcontents %}
15
15
@@ -21,7 +21,7 @@ This section briefly explains how to include [Syncfusion<sup style="font-size:70
21
21
22
22
## Create a new Blazor Web App in Visual Studio
23
23
24
-
Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
24
+
Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
25
25
26
26
{% endtabcontent %}
27
27
@@ -33,7 +33,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https:
33
33
34
34
## Create a new Blazor Web App in Visual Studio Code
35
35
36
-
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
36
+
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
37
37
38
38
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
39
39
@@ -97,7 +97,7 @@ cd ..
97
97
98
98
N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI.
103
103
@@ -132,9 +132,9 @@ N>
132
132
{% endhighlight %}
133
133
{% endtabs %}
134
134
135
-
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor service
135
+
## Register Blazor service
136
136
137
-
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
137
+
Register the Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
151
+
N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
152
152
153
153
## Add script resources
154
154
@@ -162,9 +162,9 @@ The Syncfusion JavaScript library needs to be included in your application. The
162
162
163
163
N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
164
164
165
-
## Add Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps component with GeoJSON data
165
+
## Add Blazor Maps component with GeoJSON data
166
166
167
-
Add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
167
+
Add the Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
168
168
169
169
N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
170
170
@@ -195,7 +195,7 @@ Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vec
195
195
{% endhighlight %}
196
196
{% endtabs %}
197
197
198
-
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps component in the default web browser.
198
+
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Maps component in the default web browser.
199
199
200
200
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVRNhjJJCBhIpFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %}
201
201
@@ -302,6 +302,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
302
302
303
303
## See also
304
304
305
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
305
+
*[Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
306
306
307
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
307
+
*[Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
Copy file name to clipboardExpand all lines: blazor/maps/getting-started-with-maui-app.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
layout: post
3
-
title: Getting Started with Maps in Blazor MAUI App | Syncfusion
3
+
title: Getting Started with Maps in Blazor MAUI App | Syncfusion®
4
4
description: Checkout and learn about the documentation for getting started with Blazor Maps Component in Blazor MAUI App.
5
5
platform: Blazor
6
6
component: Maps
@@ -9,7 +9,7 @@ documentation: ug
9
9
10
10
# Getting Started with Blazor Maps component in Blazor MAUI App
11
11
12
-
This section explains the step-by-step process of integrating the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component into your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
12
+
This section explains the step-by-step process of integrating the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component into your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}).
56
56
@@ -81,9 +81,9 @@ N> The `~/` notation represents the root directory of your project. This file is
81
81
{% endhighlight %}
82
82
{% endtabs %}
83
83
84
-
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor service
84
+
## Register Blazor service
85
85
86
-
Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in the **~/MauiProgram.cs** file. This step enables the Syncfusion components to work in your application.
86
+
Register the Blazor service in the **~/MauiProgram.cs** file. This step enables the Syncfusion components to work in your application.
87
87
88
88
{% tabs %}
89
89
{% highlight c# tabtitle="~/MauiProgram.cs" %}
@@ -118,9 +118,9 @@ The Syncfusion JavaScript library needs to be included in your application. The
118
118
119
119
N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
120
120
121
-
## Add Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps component with GeoJSON data
121
+
## Add Blazor Maps component with GeoJSON data
122
122
123
-
Add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
123
+
Add the Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
124
124
125
125
{% tabs %}
126
126
{% highlight razor tabtitle="Home.razor" %}
@@ -256,8 +256,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
256
256
257
257
## See also
258
258
259
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
259
+
*[Getting Started with Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
260
260
261
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
261
+
*[Getting Started with Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
262
262
263
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
263
+
*[Getting Started with Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
0 commit comments