The ThinkGeo UI for WebApi Quickstart Guide will guide you through the process of creating a WebAPI application and will help you become familiar with ThinkGeo Products. The Quickstart Guide supports ThinkGeo UI for WebAPI 12.0 and higher and will show you how to create an ASP.NET Core WebAPI application.
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.
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.
dotnet new webapi -o QuickStart
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.
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:
var countriesLayer = new ShapeFileFeatureLayer(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "AppData", "Countries.shp"));
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;
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: