User Tools

Site Tools


map_suite_web_for_webapi_all_samples

WebAPI Samples

Quickstart Sample for WebApi

The Map Suite WebAPI illustrated QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. This edition of the QuickStart Guide supports Map Suite WebAPI 10.0.0.0 and higher and will show you how to create a ASP.NET WebAPI application using this product.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Quickstart Sample for WebApi .NetCore

Description

The guide will show you through the process of creating a sample of WebAPI application for rendering a shapefile with ThinkGeo.UI.WebApi and will help you become familiar with ThinkGeo Products. The Quickstart Guide supports ThinkGeo UI for WebApi 12.0 and higher.

Please refer to Wiki for the details.

![Screenshot](https://github.com/ThinkGeo/QuickstartSample-ForWebApi.NetCore/blob/master/Screenshot.png)

About the Code

API

First, we need to create an API for reponding the getting tile requests. The code snippet shows like below:

    [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)
            };
            countriesLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = new TextStyle("CNTRY_NAME", new GeoFont("Arial", 10), GeoBrushes.Black);
            // 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");
            }
        }
    }

Client Side

Now we need to create a client side to consume the API, in this sample, we use OpenLayers v6.0.1.

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

Getting Help

About ThinkGeo

ThinkGeo is a GIS (Geographic Information Systems) company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, software development, and defense.

Display Cad File Sample for WinForms

This sample demonstrates how you can read data from an CAD file(*.dwg, *.dxf) in your Map Suite GIS applications, and how to render it with CAD embedded style as well as a customized style. This Cad File support would work in all of the Map Suite controls such as Wpf, Web, MVC and WebApi.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_winforms) for the details.

Screenshot

View this sample on Github

Layers Sample for WebApi

This sample shows the different types of layers and data formats you can use to build up your map.

Screenshot

View this sample on Gitlab

Display Nautical Charts Sample for WebApi

This sample shows how you can use Map Suite WebAPI Edition to display nautical charts in your web application.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

ThinkGeo Cloud Vector Maps Sample for WebApi

This sample demonstrates how you can draw the map with Vector Tiles requested from ThinkGeo Cloud Services in your Map Suite GIS applications, with any style you want from StyleJSON (Mapping Definition Grammar). It will show you how to use the XyzFileBitmapTileCache and XyzFileVectorTileCache to improve the performance of map rendering. It supports 3 built-in default map styles and more awasome styles from StyleJSON file you passed in, by 'Custom': - Light - Dark - TransparentBackground - Custom

ThinkGeo Cloud Vector Maps support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Getting Started Sample for WebApi

This sample shows you how to get started building your first application with the Map Suite WebAPI Edition.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Site Selection Sample for WebApi

This sample template allows you to view, understand, interpret, and visualize spatial data in many ways that reveal relationships, patterns, and trends. In this example, the user can apply the features of GIS to analyze spatial data to efficiently choose a suitable site for a new retail outlet.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Routing Data Explorer Sample for Wpf

This is a simple routing data viewer sample viewer which demonstrates how to use the RoutingEngine to get the shortest or fastest route in your Map Suite GIS applications.

How to use this tool:

1. Load rtg data:  Click menu “File→Load” browse to a rtg file. You also require a shapefile for the routing source file in the same folder, otherwise it display message “Could not find shp file in the same folder where you seleted”. 2. Start routing:

Use left click for a start point and right click for an end point. If there is no route within **200** meters(you can modify this in source code), the explorer displays a message "There’s no road within 200 meters to where you clicked on".   

This RoutingEngine supports routing in all of the Map Suite controls such as WinForms, Web, MVC and WebApi.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_wpf) for the details.

Screenshot

View this sample on Github

Display Wms Raster Layer Sample for WinForms

This sample demonstrates how you use WmsRasterLayer to render wms server in your Map Suite GIS applications. This WmsRasterLayer support would work in all of the Map Suite controls such as Wpf, Web, MVC and WebApi.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_winforms) for the details.

Screenshot

View this sample on Github

Hello World Sample for WebApi

This sample shows you how to get started building your first application with the Map Suite Web for WebApi 10.0.0.

Please refer to Wiki for the details.

Screenshot

View this sample on Github

Select Feature By Click Sample for WebApi

The purpose of this project is to show the technique for finding the feature the user clicked on. To give the user the expected behavior, a buffer in screen coordinates needs to be set so that the feature gets selected within a constant distance in screen coordinates to where the user clicked, regardless of the zoom level.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Building 3D JS Sample for WebApi

This project shows to create a simulated 3D buildings and use world map kit server as background map.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Query Tools Sample for WebApi

This sample shows the different ways you can query your data.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Display ThinkGeo Cloud Maps Sample for JavaScript

This sample demonstrates how you can display ThinkGeo Cloud Maps in a web page using javascript. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps works in all of the Map Suite controls such as Wpf, WinForms, Web, Android and iOS.

Screenshot

View this sample on Github # HowDoISample-ForWebAPI

### Description

The “How Do I?” samples collection is a comprehensive set containing dozens of interactive samples. Available in C# (WebAPI), these samples are designed to hit all the highlights of ThinkGeo WebAPI UIs, from simply adding a layer to a map to performing vehicle tracking and applying a thematic style. Consider this collection your “encyclopedia” of all the ThinkGeo basics and a great starting place for new users.

Please refer to [ThinkGeo Web UI for WebAPI](https://thinkgeo.com/gis-ui-web) for the details.

![Screenshot](https://github.com/ThinkGeo/HowDoISample-ForWebAPI/blob/master/Screenshot.gif)

### About the Code Backgrounds for this sample are powered by ThinkGeo WebAPI Maps samples, please refer to [Online Sample](https://samples.thinkgeo.com/webapi/) for more details, in each sample, you can click the “View Source” button in the upper-right corner to get the sample code, Also here is [an entrance](https://gitlab.com/thinkgeo/public/thinkgeo-web-maps/-/tree/master/samples/web-api) for source code list.

### FAQ - Q: How do I make background map work? A: Backgrounds for this sample are powered by ThinkGeo Cloud Maps and require a Client ID and Secret. These were sent to you via email when you signed up with ThinkGeo, or you can register now at https://cloud.thinkgeo.com. Once you get them, please update the code in property ApiKey=“” in RazorControl partial classes.

### Getting Help

[ThinkGeo Community Site](https://community.thinkgeo.com)

[ThinkGeo Web Site](https://www.thinkgeo.com)

### About ThinkGeo ThinkGeo is a GIS (Geographic Information Systems) company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, software development, and defense.

Adornments Sample for WebApi

Learn how to add legends, scale bars, directional arrows, and many more adornments to your map.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Projection Sample for WebApi

Learn about Map Projection and how to apply it to your data.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Basic Styling Sample for WebApi

This sample shows you how to apply basic styles to render your vector data layers.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Labeling Sample for WebApi

This sample shows you how to examine different labeling techniques to make your maps informative.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Drawing And Editing Sample for WebApi

This sample demonstrates how to implement drawing and editing shapes into your web application.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Visualization Sample for WebApi

This sample shows you how to explore the different styles available to help you analyze and visualize your data.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Marker And Popup Sample for WebApi

This sample shows you how to make your maps more interactive by using Markers and Popups.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Topology Validation Sample for WebApi

This sample shows simple ways to validate topology rules.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Overlays Sample for WebApi

Discover how to use Overlays to build up your map, or to add existing basemaps to your application.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Printing Sample for WebApi

A demonstration of how to use printing with map suite that can be added to your projects.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

ThinkGeo Cloud Maps Sample for Wpf

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_wpf) for the details.

Screenshot

View this sample on Github

Geometric Functions Sample for WebApi

This sample shows how to explore all the different APIs for Geometric Functions.

Please refer to Wiki for the details.

Screenshot

View this sample on Gitlab

Cad Viewer Sample for Wpf

Description

This sample demonstrates how you can read data from an CAD file(*.dwg, *.dxf) in your Map Suite GIS applications, and how to render it with CAD embedded style as well as a customized style. This Cad File support would work in all of the Map Suite controls such as Wpf, Web, MVC and WebApi.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/thinkgeo_desktop_for_wpf) for the details.

![Screenshot](https://github.com/ThinkGeo/CadViewerSample-ForWpf.NETCore/blob/master/Screenshot.png)

### About the Code ```csharp CadFeatureLayer layer = new CadFeatureLayer(@“AppData\” + sampleFileListBox.SelectedItem.ToString()); layer.StylingType = CadStylingType.StandardStyling; layer.ZoomLevelSet.ZoomLevel01.DefaultLineStyle = LineStyles.CreateSimpleLineStyle(GeoColor.SimpleColors.Black, 2, true); layer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimplePointStyle(PointSymbolType.Circle, GeoColor.SimpleColors.Blue, 8); layer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.SimpleColors.Yellow); layer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; ```

### Getting Help

[ThinkGeo Desktop for Wpf Wiki Resources](http://wiki.thinkgeo.com/wiki/thinkgeo_desktop_for_wpf)

[ThinkGeo Desktop for Wpf Product Description](https://thinkgeo.com/ui-controls#desktop-platforms)

[ThinkGeo Community Site](http://community.thinkgeo.com/)

[ThinkGeo Web Site](http://www.thinkgeo.com)

### About ThinkGeo

ThinkGeo is a GIS (Geographic Information Systems) company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, software development, and defense.

ThinkGeo Cloud Maps Sample for Android

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, WinForms, Web, MVC, WebApi and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_mobile_for_android) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Maps Sample for WebForms

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_web_for_webforms) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Reverse Geocoding Sample for Wpf

This Sample demonstrates how you can use ThinkGeo Cloud Client to get meaningful addresses from ThinkGeo GIS Server by a geographic location. It ships with an optimized set of worldwide coverage of cities and towns, but any customized data can be supported as well.

ThinkGeo Cloud Client support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_wpf) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Maps Sample for iOS

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, WinForms, Web, MVC, WebApi and Android.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_mobile_for_ios) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Maps Sample for Mvc

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, WinForms, Web, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Maps Sample for WinForms

This sample demonstrates how you can display ThinkGeo Cloud Maps in your Map Suite GIS applications. It will show you how to use the XYZFileBitmapTileCache to improve the performance of map rendering. ThinkGeoCloudMapsOverlay uses the ThinkGeo Cloud XYZ Tile Server as raster map tile server. It supports 5 different map styles: - Light - Dark - Aerial - Hybrid - TransparentBackground

ThinkGeo Cloud Maps support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_winforms) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Geocoding Sample for Wpf

This Sample demonstrates how you can use ThinkGeo Cloud Client to get a geographic location from ThinkGeo GIS Server by a street address.

ThinkGeo Cloud Client support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_wpf) for the details.

Screenshot

View this sample on Github

ThinkGeo Cloud Elevation Sample for Wpf

This Sample demonstrates how you can use ThinkGeo Cloud Client to get elevation data from ThinkGeo GIS Server, and shows the elevation data of a road in the form of a line chart.

There are two ways to get the elevation data of the line. First, get the points on the line by setting the interval distance. The other, is to take the points by setting the number of points to be fetched. Then query the elevation data of the point.

ThinkGeo Cloud Client support would work in all of the Map Suite controls such as Wpf, Web, MVC, WebApi, Android and iOS.

Please refer to [Wiki](http://wiki.thinkgeo.com/wiki/map_suite_desktop_for_wpf) for the details.

Screenshot

View this sample on Github

map_suite_web_for_webapi_all_samples.txt · Last modified: 2023/08/29 12:27 by ruili