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 Sample Code From GitHub(Coming Soon)

Get started with Blazor, you need .NET Core 3.0 and Visual Studio 2019 Preview. More information please refer to Get started with ASP.NET Core Blazor. (NOTE: ThinkGeo UI Web for Blazor only support server-side of Blazor currently, In this guide we are just using Blazor serverside as an example.)

Let's create a Blazor project after the environment is installed. Also you can run the project you just downloaded.

1. Open Visual Studio 2019 Preview
2. Create a New Project
3. Select Blazor App. Select Next.
4. Type project name as 'QuickStart' in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.
5. For ThinkGeo UI Web for Blazor, choose the Blazor Server App template. Select Create.
6. Press F5 to run the app, you can see the browser is launched as following:

Now, you successfully created a native blazor serverside sample. See Get started with ASP.NET Core Blazor, If there are any issue during running this sample.

To build this sample, you need to reference the component package from NuGet Manager. NuGet brings us a flexible way and pleasant experience to manage our references.

1. Right-click on the project in the solution and select Manage NuGet Package:
2. Search the packages named 'ThinkGeo.UI.Blazor' list above and install it.
3. Now the package is installing into the project. Click “OK” if the message box like the following pops up.

Now, we have all the references set. let's start by writing code step by step to display a map with Shapefile.

1. Add the following code snippet to ~/_imports.razor file to reference ThinkGeo.UI.Blazor into all components in this project:

  @using ThinkGeo.Core
  @using ThinkGeo.UI.Blazor

1. Open the ~/Pages/_host.cshtml file in the blazor project and register the stylesheet and javascript of ThinkGeo Web For Blazor from CDN:

  <link href="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.css" rel="stylesheet" />
  <script src="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.js"></script>

1. Open ~/Pages/Index.razor file and Add a ThinkGeo.UI.Blazor.Map component at the end as following:

  @page "/"
  
  <h1>Hello, world!</h1>
  
  Welcome to your new app.
  <Map Id="demomap" @ref="map" Background="@background"
       MapUnit="@ThinkGeo.Core.GeographyUnit.Meter"
       Center="@(new PointShape(1056665.479014, 6066042.564712))"
       Zoom="5">
      <OverlaysSetting>
          <LayerOverlay Id="CustomOverlay" Layers="@layers"></LayerOverlay>
      </OverlaysSetting>
  </Map>
  
  @code{
      GeoSolidBrush background = new GeoSolidBrush(GeoColor.FromHtml("#89d3f0ff"));
      GeoCollection<Layer> layers = new GeoCollection<Layer>();
      Map map;
  
      protected override void OnInitialized()
      {
          // We create a new Layer and pass the path to a ShapeFile into its constructor.
          ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer("./Data/countries/countries.shp");
          worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);
          // Set the worldLayer to use a preset Style.
          AreaStyle areaStyle = new AreaStyle();
          areaStyle.FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
          areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
          areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
          worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
          // This setting will apply from ZoomLevel01 to ZoomLevel20, which means we can see the world the same style all the time no matter how far we zoom in or out.
          worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
          // We need to add the worldLayer to the LayerOverlay in the map.
          layers.Add(worldLayer);
      }
  }
  
-we'll use a ShapeFile containing data of the entire world. We have one such ShapeFile available to us:

• The borders of every country in the world (countries.shp)

(NOTE: The data used in this sample can be found in the attached sample above at “./Data/countries” folder)

Run the App by pressing F5. you'll see a worldstreet layer like this:

  Screenshot is coming soon

This completes ​this scenario. The next thing you might want to do is to make it run on another machine ​that does not have a developer license. ​A runtime ​license is the one we are looking for. Here is the guide to generate a runtime license: http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_desktop

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. ShapeFiles (and other data sources like Oracle, Postgre, SQL 2008, etc.) provide the data used by ThinkGeo to render a map.
3. A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered.
4. A Map has one-to-many Layers. A Layer contains the data (from ShapeFile or other data sources) for drawing.
5. A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden.