Query API and Web Services

  1. Home
  2. Query API and Web Services
  3. Use Koordinates tile services in Javascript clients

Use Koordinates tile services in Javascript clients

Koordinates tile services are available as an XYZ tile service for Javascript clients, such as Leaflet and OpenLayers

This service is compatible with the Google Map API and can be easily combined with other global map tile services such as Open Street Map (OSM) or Microsoft Bing Maps.

Koordinates XYZ tile services

Koordinates web map tile services support both HTTP and HTTPS.

To access Koordinates XYZ tile services, you can use the following base URL in your application:

http://koordinates-tiles-a.global.ssl.fastly.net/services;key=YOUR_API_KEY/tiles/v4/layer=LAYER_ID/EPSG:3857/{z}/{x}/{y}.png
or
http://koordinates-tiles-a.global.ssl.fastly.net/services;key=YOUR_API_KEY/tiles/v4/layer=LAYER_ID,style={styleID}/EPSG:3857/{z}/{x}/{y}.png

You can also cut and paste this URL from the 'Services' tab on your chosen layer. About this URL: 

  • {a-d} — to support a higher volume of requests, simultaneous calls can be made to multiple sub-domains: a, b, c and d
  • YOUR_API_KEY — your Koordinates API key 
  • LAYER_ID — the identifier of the web map tiled layer. You'll find this identifer after /layer in the layer's URL
  • STYLE_ID - the ID of the custom WMTS you want to display for the layer
  • CRS – identifier of the coordinate reference system of the tile grid you are requesting. By default, Koordinates tile service URLs are provided as EPSG:3857 (WGS84 Web Mercator).
  • Z, X, Y – z is zoom level, x tile column and y tile row.  Your client will substitute values here for you.

Please note: Some map tile services are created from a collection of several data layers. In these cases, LAYER_ID is replaced by SET_ID in the URL:

http://koordinates-tiles-a.global.ssl.fastly.net/services;key=YOUR_API_KEY/tiles/v4/layer=SET_ID/EPSG:3857/{z}/{x}/{y}.png

Adding Koordinates XYZ Services to Leaflet

Adding Koordinates XYZ Services to a Leaflet map is simple, using the Leaflet tileLayer interface:
let layer = L.tileLayer('http://koordinates-tiles-{s}.global.ssl.fastly.net/services;key=YOUR_API_KEY/tiles/v4/layer=LAYER_ID/EPSG:3857/{z}/{x}/{y}.png’);
layer.addTo(map);

Adding Koordinates XYZ Services to OpenLayers

Adding Koordinates XYZ Services to an OpenLayers map can be achieved with the TileLayer class:
let layer = new TileLayer({
    source: new XYZ({
        url: 'http://koordinates-tiles-{a-c}.global.ssl.fastly.net/services;key=YOUR_API_KEY/tiles/v4/layer=LAYER_ID/EPSG:3857/{z}/{x}/{y}.png'
    }),
});
map.addLayer(layer);

Vector Query API

You may wish to overlay vector data into your web map client to highlight points of interest, specific attributes or selected features. The best way to do this is use Koordinates Vector Query API. Read the documentation for the Vector Query API. 

Hiding your API key

Please note that if you are integrating tile services into a public map service, you will need to take steps to protect your API key from being exposed to anonymous users. 

Web Map Tile Service

Koordinates also supports OGC-compliant Web Map Tile Service (version 1.0.0) style requests. 

Koordinates tile services support RESTful requests only. KVP and SOAP request interfaces are not supported.

Koordinates tile services support the HTTP GET method only for retrieving tiles. The following requests are supported:

  • GetCapabilities: returns metadata about the service
  • GetTile: returns an individual map tile from the cache
  • GetFeatureInfo: returns descriptive information for a given map location

WMTS URL syntax

If you prefer, you can use our OGC WMTS tile services and configure URL requests to retrieve tiles. In this method, your web client will use the GetCapabilities request to determine the tilematrix definition. This means one more request for your client, but it reduces the configuration client side.

https://koordinates.com/services;key=YOUR_API_KEY/wmts/1.0.0/layer/LAYER_ID/WMTSCapabilities.xml

Some of the URL components are similar to the XYZ example above:

  • YOUR_API_KEY — your Koordinates API key 
  • LAYER_ID — the identifier of the web map tiled layer. You'll find this identifer after /layer in the layer's URL


Please note: Some map tile services are created from a collection of several data layers. In these cases, LAYER_ID is replaced by SET_ID in the URL. 

https://koordinates.com/services;key=YOUR_API_KEY/wmts/1.0.0/layer/SET_ID/WMTSCapabilities.xml