User Tools

Site Tools

Trace: • thinkgeo_web_for_blazor_quick_start_guide

Sidebar

ThinkGeo Cloud

ThinkGeo UI Controls

ThinkGeo Open Source

Help and Support

External Resources

thinkgeo_web_for_blazor_quick_start_guide

Table of Contents

ThinkGeo Quick Start Guide For Blazor

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.

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 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

Download Sample Code From GitHub

Setting up the Environment

To get started with ThinkGeo UI Web for Blazor, you first need to install the .NET Core 3.0 SDK. You'll also want an IDE, such as Visual Studio 2019 (version 16.3 or newer) or 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 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.

  1. Open Visual Studio Code.
  2. Execute the following command in command shell for creating a Blazor Server project.
    dotnet new blazorserver -o QuickStart
  3. Open the QuickStart folder in Visual Studio Code.
  4. 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 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.

  1. Open NuGet Package Manager
  2. 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

  1. Open ~/Imports.razor and add 2 using directives to reference the Map components. 
    @using ThinkGeo.Core 
@using ThinkGeo.UI.Blazor
  2. Open the ~/Pages/_Host.cshtml and add the stylesheet and javascript references of ThinkGeo Web For Blazor from CDN:
        <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>
  3. Open ~/Pages/Index.razor file and add a ThinkGeo.UI.Blazor.Map component as following:
    @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>

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 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 developer license guide.

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

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:

  1. 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.
  2. A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered.
thinkgeo_web_for_blazor_quick_start_guide.txt · Last modified: 2019/10/18 06:03 by tgwikiupdate

Page Tools