ThinkGeo UI for WebApi makes it easy for any Microsoft .NET developer to add mapping functionality to a ASP.NET Core RESTful 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.

Download Sample Code From GitHub

To get started with ThinkGeo UI for WebAPI, 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.

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

1. Open Visual Studio Code.
2. Execute the following command in command shell for creating a WebAPI project.

   dotnet new webapi -o QuickStart

3. Open the QuickStart folder in Visual Studio Code.
4. The Visual Studio Code requests that you add assets to build and debug the project. Select Yes.

Now, you have successfully created a WebApi project. Next, we'll be adding the ThinkGeo UI WebAPI reference into application.

To build this sample, you need to reference the “ThinkGeo.UI.WebApi” 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.WebApi” package by typing “ThinkGeo.UI.WebApi”.

Now, we have all the references set. let's start by writing code step by step to provide an API for getting tile. Create a new controller for requesting tiles and import the using namespaces.

using Microsoft.AspNetCore.Mvc;
using System.IO;
using ThinkGeo.Core;
using ThinkGeo.UI.WebApi;
 
namespace QuickStart.Controllers
{
    [ApiController]
    [Route("")]
    public class DefaultController : ControllerBase
    {
        [Route("tile/{z}/{x}/{y}")]
        public IActionResult GetMapTile(int z, long x, long y)
        {
            // Create the LayerOverlay for displaying the map.
            var countriesLayer = new ShapeFileFeatureLayer(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "AppData", "Countries.shp"));
 
            // Set the style for ZoomLevels.
            countriesLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = new AreaStyle
            {
                FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214)),
                OutlinePen = new GeoPen(GeoColors.Gray, 1)
            };
 
            // Apply the zoom level's style to zoom level 20.
            countriesLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
 
            // Apply ProjectionConverter. The source is in DecimalDegree and needs to be convert to Mercator Projection.
            countriesLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);
 
            // Initialize a LayerOverlay.
            var layerOverlay = new LayerOverlay();
            layerOverlay.Layers.Add(countriesLayer);
            return DrawTileImage(layerOverlay, z, x, y);
        }
 
        private IActionResult DrawTileImage(LayerOverlay layerOverlay, int z, long x, long y)
        {
            // Create a new GeoImage
            using (GeoImage image = new GeoImage(256, 256))
            {
                var geoCanvas = GeoCanvas.CreateDefaultGeoCanvas();
 
                // Get the BoundingBox for the specified x, y, z.
                RectangleShape boundingBox = WebApiExtentHelper.GetBoundingBoxForXyz(x, y, z, GeographyUnit.Meter);
                geoCanvas.BeginDrawing(image, boundingBox, GeographyUnit.Meter);
 
                if (layerOverlay != null)
                {
                    layerOverlay.Draw(geoCanvas);
                }
                geoCanvas.EndDrawing();
 
                return File(image.GetImageBytes(), "image/png");
            }
        }
    }
}

You need to know the following things:

1. Layer
2. Overlay
3. GeoCanvas

1. Create a ShapeFileFeatureLayer for rendering the shapefile.

   var countriesLayer = new ShapeFileFeatureLayer(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "AppData", "Countries.shp"));

2. Apply the style for the ZoomLevels. It allows us to set the different styles for the different ZoomLevels.

    countriesLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = new AreaStyle
               {
                   FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214)),
                   OutlinePen = new GeoPen(GeoColors.Gray, 1)
               };
               countriesLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

3. Apply the projection of origial source.

   countriesLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);

An Overlay is a collection of Layers, it provides Draw method allow the user to draw the layers.

var layerOverlay = new LayerOverlay();
layerOverlay.Layers.Add(countriesLayer);

Invoke Draw method of Overlay to draw the tile.

using (GeoImage image = new GeoImage(256, 256))
{
    var geoCanvas = GeoCanvas.CreateDefaultGeoCanvas();
    RectangleShape boundingBox = WebApiExtentHelper.GetBoundingBoxForXyz(x, y, z, GeographyUnit.Meter);
    geoCanvas.BeginDrawing(image, boundingBox, GeographyUnit.Meter);
 
    if (layerOverlay != null)
    {
        layerOverlay.Draw(geoCanvas);
    }
    geoCanvas.EndDrawing();
 
    return File(image.GetImageBytes(), "image/png");
}

We need to create a client sample to render the map tiles returning from the API. In this sample, we use OpenLayers v6.0.1 for doing that.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="ThinkGeo" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css" type="text/css">
    <style>
        #map {
            height: 600px;
            width: 800px;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: '/tile/{z}/{x}/{y}'
                    })
                })
            ],
            view: new ol.View({
                center: [-472202, 5009377.08569731],
                zoom: 1
            })
        });
    </script>
</body>
</html>

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 for WebAPI, 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: