====== ThinkGeo Quick Start Guide For WebAPI ======
dotnet new webapi -o QuickStart
- Open the //QuickStart// folder in Visual Studio Code.
- 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.
===== Installing ThinkGeo UI for WebAPI NuGet packages =====
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.
- Open NuGet Package Manager
- Install the "ThinkGeo.UI.WebApi" package by typing "ThinkGeo.UI.WebApi".
===== Implement the API =====
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");
}
}
}
}
===== Understanding what is going on =====
You need to know the following things:
- Layer
- Overlay
- GeoCanvas
==== Initialize Layer ====
- Create a ShapeFileFeatureLayer for rendering the shapefile.var countriesLayer = new ShapeFileFeatureLayer(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "AppData", "Countries.shp"));
- 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;
- Apply the projection of origial source.countriesLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);
==== Initialize Overlay ====
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);
==== Draw Tile ====
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");
}
===== Consuming the API =====
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.
QuickStart
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 [[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:webapi:webapi_quick_start_sample.jpg}}