ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ThinkGeo Quick Start Guide For Blazor ======

<div msgbox>
The ThinkGeo UI Web for Blazor Quickstart Guide will guide you through the process of creating a sample blazor serverside application and will help you become familiar with ThinkGeo Products. The Quickstart Guide supports ThinkGeo UI Web for Blazor 12.0 and higher and will show you how to create an ASP.NET Core Blazor application.
</div>

ThinkGeo UI Web for Blazor is a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a [[https://docs.microsoft.com/aspnet/core/blazor/?view=aspnetcore-3.0|ASP.NET Core Blazor]] application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes.

How do we start to learn how to take advantage of the power of ThinkGeo UI Web for Blazor? The best way is to make a sample application with it. 

===== Download the Sample =====
<faicon fa fa-download fa-lg>  {{https://github.com/ThinkGeo/QuickstartSample-ForBlazor|Download Sample Code From GitHub}} 

===== Setting up the Environment =====
To get started with ThinkGeo UI Web for Blazor, you first need to install the [[https://dotnet.microsoft.com/download/dotnet-core/3.0|.NET Core 3.0 SDK]].  You'll also want an IDE, such as [[https://visualstudio.microsoft.com/vs/|Visual Studio 2019 (version 16.3 or newer)]] or [[https://code.visualstudio.com/download|Visual Studio Code]].  For this quick start guide, we'll be using Visual Studio Code.  More information about the tools you can use to work with Blazor, please refer to the Microsoft documentation on [[https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio-code|how to get started with ASP.NET Core Blazor]].

NOTE: ThinkGeo UI Web for Blazor currently only supports server-side Blazor projects, so in this guide we will walk you through the process of creating a server-size Blazor sample. ThinkGeo intends to support client-side Blazor projects with WebAssembly once Microsoft's client-side Blazor framework has left preview.

Once your environment and tooling are set up, let's create a Blazor project.

  - Open Visual Studio Code.
  - Execute the following command in command shell for creating a Blazor Server project.<code html>dotnet new blazorserver -o QuickStart</code>
  - Open the //QuickStart// folder in Visual Studio Code.
  - For a Blazor Server project, the Visual Studio Code requests that you add assets to build and debug the project. Select **Yes**.

Now, you have successfully created a server-side Blazor boilerplate project. Next, we'll be adding the ThinkGeo UI map control to the web page.  If you have encountered any issues getting to this point, please refer to the Microsoft documentation on [[https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio-code|getting started with ASP.NET Core Blazor]].

===== Installing ThinkGeo UI Web for Blazor NuGet packages =====

To build this sample, you need to reference the "ThinkGeo.UI.Blazor" package from NuGet Package Manager. NuGet brings us a flexible way and pleasant experience to manage our references.
  - Open NuGet Package Manager
  - Install the "ThinkGeo.UI.Blazor" package by typing "ThinkGeo.UI.Blazor".

===== Add the Map Component =====
Now, we have all the references set. let's start by writing code step by step to display a world map.

==== Display a world map ====

  - Open ~/Imports.razor and add 2 using directives to reference the Map components. <code csharp>
@using ThinkGeo.Core 
@using ThinkGeo.UI.Blazor</code>
  - Open the ~/Pages/_Host.cshtml and add the stylesheet and javascript references of ThinkGeo Web For Blazor from CDN:<code html>
    <head>
        ...
        <link href="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.css" rel="stylesheet" />
    </head>
    
    <body>
        ...
        <script src="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.js"></script>
    </body>
</code>
  - Open ~/Pages/Index.razor file and add a ThinkGeo.UI.Blazor.Map component as following:<code csharp>
@page "/"

<!--You can control the width and height in CSS too, if you like. -->
<MapView Id="demomap" MapUnit="@ThinkGeo.Core.GeographyUnit.Meter" Zoom="3" Width="800" Height="600">
    <OverlaysSetting>
        <ThinkGeoCloudRasterMapsOverlay Id="RasterOverlay" MapType="ThinkGeo.Core.ThinkGeoCloudRasterMapsMapType.Light" ApiKey="Input your key"></ThinkGeoCloudRasterMapsOverlay>
    </OverlaysSetting>
</MapView>
</code>
It requires an APIKey of ThinkGeo Cloud, and you can get the API Key from the registration email. If you don't have an account of ThinkGeo Cloud yet, please refer to [[thinkgeo_cloud_client_keys_guideline|ThinkGeo Cloud Client Keys]] to get your ThinkGeo Cloud account.

Run the app by pressing F5. If you have not set up a developer license, the Map Suite Product Center will pop up. You will need to activate your developer license, either by starting a free evaluation of ThinkGeo UI Web for Blazor, or by purchasing the full edition of the product. For more details, please refer to our [[map_suite_developer_license_guide|developer license guide]].

Once your developer license is ready, run the application. Your map should look like the one below:

{{thinkgeo12:screenshots:blazor:quickstartguide:blazor_quick_start_sample.jpg}}

===== Summary =====
You now know the basics of using ThinkGeo Web for Blazor and are able to start adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of ThinkGeo work together:

  -It is of the utmost importance that the unit of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data.
  -A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered.
User Tools

Site Tools

Page Tools
