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 Vector Map.js API Documentation ======

<markdown>

Map Suite VectorMap.js is an extension of [OpenLayers](http://openlayers.org/) used to create vector maps for web and mobile devices. It's an open-source on [ThinkGeo Github](https://github.com/thinkgeo/mapsuite-vectormap-js). Map Suite VectorMap.js simplifies the process of creating the vector maps within [OpenLayers](http://openlayers.org/) and optimizes the performance in some aspects.

### Credential

Map Suite VectorMap.js provides two ways to pass your authentication credentials for access to vector tile services.

* **API Key**
If the "API Key" is passed in, then all we have to do is attach that API key to each tile request URL as a querystring configuration called an “apiKey”. These keys don’t expire unless you disable them.

Define your "API Key" in your layer:

```js
var layer = new ol.mapsuite.WorldStreetsVectorTileLayer("streets.json",
{
apiKey:"API Key"
});
```

* **Client ID and Client Secret**
If the "Client ID" and "Client Secret" are passed in we will automate the process of making a request out to the service authentication endpoint and getting the "token" so that you don't have to be involved in the process.

Define your "Client Id" and "Client Secret" in your layer:

```js
var layer = new ol.mapsuite.WorldStreetsVectorTileLayer("streets.json",
{
clientId:"Client Id",
clientSecret:"Client Secret"
});
```

**NOTE**: Please refer to [[thinkgeo_cloud_client_keys_guideline|Cloud Keys Guidline]] on how to create your own credentials from ThinkGeo and consume services provided by ThinkGeo.

### Map

[ol.Map](http://openlayers.org/en/latest/apidoc/ol.Map.html) in [OpenLayers](http://openlayers.org/) is borrowed by "Map Suite VectorMap.js" to create the map instance.

### ol.mapsuite.VectorTileLayer

`ol.mapsuite.VectorTileLayer` extends [OpenLayers](http://openlayers.org/) class [ol.layer.VectorTile](http://openlayers.org/en/latest/apidoc/ol.layer.VectorTile.html) with additional options.

```js
var vectorTileLayer= new ol.mapsuite.VectorTileLayer(styleJson,
{
apiKey:"API Key",
multithread:false,
declutter:true
});
```

#### parameters

```js
new ol.mapsuite.VectorTileLayer("styleJson file", options)
```

* **styleJson file** \(object \| url\)

The vector StyleJson object in JSON format or the vector styleJson file url, containing the definition of data sources, vector layers and styles used in the vector layers. For `ol.mapsuite.VectorTile`, the source in StyleJson object only receives tiles with vector features in ".MVT" format.

* **options** \(object\)


<table>
<tr>
<td>Name </td>
<td>Type </td>
<td>A string value will be attached to each tile request URL as a querystring configuration called "apiKey" for credential authentication on service.Needed when clientId or clientSecret are undefined </td>
</tr>
<tr>
<td>multithread </td>
<td>boolean </td>
<td>A boolean value indicating whether or not using multi-thread to read and draw features. Basically, single-thread will have a better user-experience and higher performance, but doesn't support query feature details based on coordinate. Default is true.</td>
</tr>
<tr>
<td>declutter </td>
<td>boolean </td>
<td>A bool value indicating whether drawing duplicated labels.Default is true. </td>
</tr>
<tr>
<td>proxy </td>
<td>url </td>
<td>the url of a proxy srever</td>
</tr>
<tr>
<td>clientId </td>
<td>string </td>
<td>A string to access server data with clientSecret. Needed when apiKey is undefined, but not recommended.</td>
</tr>
<tr>
<td>clientSecret </td>
<td>string </td>
<td>A string to access server data with clientId. Needed when apiKey is undefined, but not recommended.
</td>
</tr>
</table>

#### methods

* **getSource\(\)** -&gt; {ol.mapsuite.VectorTileSource}

Return the associated `VectorTileSource` of the layer.

### ol.mapsuite.VectorTileSource

`ol.mapsuite.VectorTileSource` extends [OpenLayers](http://openlayers.org/) class [ol.source.VectorTile](http://openlayers.org/en/latest/apidoc/ol.source.VectorTile.html) with all options inherited.

#### events

* **sendingTileRequest** \([ol.events.Event](http://openlayers.org/en/latest/apidoc/ol.events.Event.html)\)

Triggered before sending a tile XmlHttpRequest.

### ol.mapsuite.WorldStreetsVectorTileLayer

`ol.mapsuite.WorldStreetsVectorTileLayer` extends `ol.mapsuite.VectorTileLayer` class with ThinkGeo World Streets Vector Tile Service highly integrated.

```js
var vectorTileLayer= new ol.mapsuite.WorldStreetsVectorTileLayer(styleJson,
{
multithread:true,
declutter:true
});
```




</markdown>
User Tools

Site Tools

Page Tools
