ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ThinkGeo Cloud Maps Vector Tiles ======

ThinkGeo Cloud Maps Vector Tiles serve vector map tiles through XYZ. Check out [[https://samples.thinkgeo.com/cloud/#VectorMaps|ThinkGeo Cloud Vector Map Online Sample]] for a quick look.

===== RESTful APIs=====


* //**Try it Online**:// All the ThinkGeo Cloud RESTful APIs can be tested online following the instructions below: 
  *  Get a ThinkGeo Cloud Client Key. Check out [[https://wiki.thinkgeo.com/wiki/thinkgeo_cloud_client_keys_guideline|ThinkGeo Cloud Client Keys Guideline]] see how to apply one. It's free for 60 days.  
   * Visit our [[https://cloud.thinkgeo.com/help/|ThinkGeo Cloud API Explorer]], click the "Authorize" button at the top and enter your client credentials. You are then free to play with all the APIs online. 

//**ThinkGeo Cloud provides a RESTful API to consume the map tiles**://

<code html>
HTTP GET
https://cloud.thinkgeo.com/api/v1/maps/vector/{srid}/{tileZ}/{tileX}/{tileY}.pbf?apikey={key}
</code>
  *  //**srid**//: The spatial reference system ID for the tile you are requesting.  Currently only "3857" (Spherical Mercator) is supported.
  *  //**tileZ**//: The Z index (zoom level) of the requesting tile, from 0 to 19. Zoom Level 0 is the highest zoom level with the entire world in one single tile.  Each zoom level //z// has 4<sup>//z//</sup> tiles for the entire world. The greater the z value, the closer to the Earth's surface the current zoom level is. 
  *  //**tileX**//: The X index (column index in the tiling matrix) of the requesting tile. Valid range is between 0 and 4<sup>//z//</sup> for each given zoom level //z//. 
  *  //**tileY**//: The Y index (row index in the tiling matrix) of the requesting tile. Valid range is between 0 and 4<sup>//z//</sup> for each given zoom level //z//. 
  *  //**apikey**//: The ThinkGeo Cloud API key that authenticates your request. 

Here is an example of a vector tile request URL: [[https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/0/0/0.pbf?apiKey=apiKey]] (a valid API key is required). Please check out [[thinkgeo_cloud_client_keys_guideline|Client Keys Guideline]] to find out how to get your own API key.
===== Why Vector Tiles?=====
Vector tiles allows for more efficient downloads and more rapid map updates than pre-rendered raster tiles. When changes are made to the OSM base layer, rather than waiting for an image tile to be redrawn, only the coordinates and drawing instructions for that particular building or road need to be updated. Depending on the URL syntax, vector tiles can return all of the OSM data, or just individual layers, or combinations of layers, including water, earth, land-use, roads, buildings and other points of interest.

===== Map Data Coverage=====

Map Suite Vector Tile Data sources from OpenStreetMap and Natural Earth are both open data sets. The data is updated twice a month on ThinkGeo servers keeping up with the latest data available. Generally speaking, Natural Earth is used at lower zoom levels, and OpenStreetMap is serving for higher zoom levels.


  * **OpenStreetMap**<div>[[https://www.openstreetmap.org|Open Street Map]] is built by a community of mappers that contribute and maintain data pertaining to roads, trails, cafés, railway stations, and much more, all over the world. OpenStreetMap's community is diverse, passionate, and growing every day. It's open data ao you are free to use it for any purpose as long as you credit OpenStreetMap and its contributors.</div>

  * **Natural Earth**<div>[[http://www.naturalearthdata.com/|Natural Earth]] is a public domain map dataset available at 1:10 million (1 cm = 100 km), 1:50 million, and 1:110 million [[https://en.wikipedia.org/wiki/Map_scale|map scales]]. Featuring closely integrated vector and raster data, with Natural Earth one can make a variety of maps with all commonly used cartography and GIS software. Natural Earth is designed to meet the needs of experienced cartographers using a variety of software applications.

Natural Earth was built through a collaboration of many volunteers and is supported by the [[https://en.wikipedia.org/wiki/North_American_Cartographic_Information_Society|North American Cartographic Information Society]](NACIS). It is free for public use in any type of project.</div>
 


Our World Map data can be purchased separately. It can be consumed offline by Map Suite SDKs. Check out [[thinkgeo_offline_data_maps_streets|ThinkGeo Maps Streets Data]] for details. 

===== Vector Tile Schema =====

The Vector Tile data is organized into different thematic layers, each of which has attributes and values, for example: roads, buildings, POIs, water etc. A selection of these layers are typically used for base map rendering with a map style specified in Map Suite StyleJSON Schema.

**Definition of layers**

  *  [[Marine_name|Marine_name]]
  *  [[Water|Water]]
  *  [[Water_name|Water_name]]
  *  [[Waterway|Waterway]]
  *  [[Landcover|Landcover]]
  *  [[Country|Country]]
  *  [[Admin_boundary|Admin_boundary]]
  *  [[Admin_name|Admin_name]]
  *  [[Place|Place]]
  *  [[Aeroway|Aeroway]]
  *  [[Building|Building]]
  *  [[POI|POI]]
  *  [[Road|Road]]
  *  [[Road_name|Road_name]]
  *  [[Railway|Railway]]
  *  [[Housenumber|Housenumber]]
  *  [[Urban|Urban]]
  *  [[Building_name|Building_name]]


Schema [[updates and changelog|updates change log]] .

===== Consume from the Client =====

Multiple ways are provided to consume the server from different platforms. 

==== From JavaScript Library ====

Load [[https://github.com/ThinkGeo/VectorMap-js|VectorMap-js]] from CDN in your project:

<code javascript>
    <link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.2/vectormap.css"></link>
    <script src="https://cdn.thinkgeo.com/vectormap-js/2.0.2/vectormap.js"></script>
</code>

 In the <body> of your HTML page, add a div with "id="map""
<code html>
<div id="map" style="width:800px;height:600px;"></div>
</code>

Create the map object and load with the "DIV" created before.

<code javascript>
    var worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/light.json";    
    var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, 
        {
            apiKey:'your-ThinkGeo-Cloud-Service-key'
        });
    let map =  new ol.Map({
        layers: [worldstreets],
        target: 'map',
        view: new ol.View({
            center: [-10775718.490585351, 3868389.0226015863],
            zoom: 4,
            maxResolution: 40075016.68557849 / 512,
        }),
    });
</code>

**NOTE:**

  * **ThinkGeo Cloud Service key**<div>Access to ThinkGeo Cloud services, including Vector Tile data, requires an API Key that connects API requests to your account, Please check [[https://thinkgeo.gitbooks.io/map-suite-vector-map-js/content/sign-up-thinkgeo-account.html|here]] on how to create your own ThinkGeo Cloud Service key **FOR FREE**.</div>

  * **World Streets Styles**<div>World Streets Style is a syntax of map styling language, similar to CSS. It defines the styles of your vector data. Map Suite World Streets Styles are professionally designed map styles from our ThinkGeo experts. You can use it in your application without any changes, if you are consuming the Vector Tile data from ThinkGeo Cloud Service.</div>

==== From Map Suite UI Controls====

All of the MapSuite UI Controls have built-in a straightforward way for consuming the vector tiles from version 10.5.  

Sample Code: 
<code csharp>

Coming soon

</code>

  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WinForms]] for [[map_suite_desktop_for_winforms|Map Suite Desktop For WinForms]]
  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]]
  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WebForms]] for [[map_suite_web_for_webforms|Map Suite Web For WebForms]]
  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-MVC]] for [[map_suite_web_for_mvc|Map Suite Web For MVC]]
  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile For iOS]]
  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]]



==== From Client Side SDKs ====

A .Net SDK //ThinkGeo Cloud Client// is provided to consume the ThinkGeo Cloud Service as well. It's available on [[https://www.nuget.org/packages/ThinkGeo.Cloud.Client|NuGet]], here is the complete [[thinkgeo_cloud_.net_client_apis|API List]]. 

Sample Code: 
<code csharp>
using ThinkGeo.Cloud;

MapsClient client = new MapsClient("Your Client ID", "Your Client Secret");
Stream imageStream = client.GetRasterTile(z, x, y, projection);
</code>

The API is for downloading the vector tiles. Additional coding is needed to parse or render it. 

Native SDKs for //Python//, //iOS// and //Android// are coming soon. 

===== Samples =====

Online Sample:
  * [[https://samples.thinkgeo.com/cloud/#VectorMaps|ThinkGeo Cloud Vector Tile Online Sample]] 

Desktop Sample: 
<code csharp>

Coming soon

</code>

Web Sample:
<code csharp>

Coming soon

</code>

Mobile Sample: 
<code csharp>

Coming soon

</code>
User Tools

Site Tools

Page Tools
