TileCache url function for OpenLayers

Allows create custom ol.TileUrlFunctionType to load tiles seeded with TileCache.

Installation

Install it with NPM or Bower:

# ES6 version for bundling with Webpack, Rollup and etc.
npm install ol ol-tilecache
# to use UMD version `openlayers` package should be installed
npm install openlayers

Or download the latest versions of OpenLayers and ol-tilecache and add them with script tags:

<script src="https://unpkg.com/openlayers@latest/dist/ol.js"></script>
<script src="https://unpkg.com/ol-tilecache@latest/dist/bundle.min.js"></script>

Note

Plugin is available in 2 versions: as UMD module and as ES2015 module:

• RECOMMENDED: ES2015 version (dist/bundle.es.js) should be used with ol package (you should install it manually).
• UMD version (dist/bundle[.min].js) should be used with openlayers package. You can install ol package as dev dependency to suppress NPM warning about required peer dependencies.

Usage

Plugin may be used as UMD module or ES2015 module:

// Use as ES2015 module (based on NPM package `ol`)
import Map from 'ol/map'
...
import * as TileCacheUrlFn from 'ol-tilecache'
// or only what you need
import { createTileUrlFunction } from 'ol-tilecache'

// Use as UMD module (based on NPM package `openlayers`)
const ol = require('openlayers')
...
const TileCacheUrlFn = require('ol-tilecache')

In Browser environment you should add script tag pointing to UMD module after OpenLayers js files.

<script src="https://unpkg.com/openlayers@latest/dist/ol.js"></script>
<script src="https://unpkg.com/ol-tilecache@latest/dist/bundle.min.js"></script>
<script>
  // plugin exports global variable TileCacheUrlFn
  // in addition it also exported to `ol.tileCacheUrlFn` field (for backward compatibility).
</script>

Members

createTileUrlFunction

Arguments

• url : string URL template
• tileGrid : ol.tilegrid.TileGrid Custom tile grid. Default is EPSG:3857 x/y/z grid
• extent : ol.Extent Tile grid extent. Default is EPSG:3857 extent

Returns: ol.TileUrlFunctionType

Available URL placeholders:

z | 0z - zoom level (simple number or padded with zero)
x1, x2, x3 - X axis index parts (remnant from dividing the tile X index on 10^9 broken down by 3 digits)
y1, y2, y3 - Y axis index parts (remnant from dividing the tile Y index on 10^9 broken down by 3 digits)

Example usage:

import Map from 'ol/map'
import View from 'ol/view'
import TileLayer from 'ol/layer/tile'
import XyzSource from 'ol/source/xyz'
import { createTileUrlFunction } from 'ol-tilecache'

const map = new Map({
  target: 'map',
  view: new View({
    projection: 'EPSG:3857',
    center: [ 4189972.14, 7507950.67 ],
    zoom: 5
  }),
  layers: [
    new TileLayer({
      source: new XyzSource({
        tileUrlFunction: createTileUrlFunction('http://{a-z}.tiles.org/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.png')
      })
    })
  ]
})

Build

git clone https://github.com/ghettovoice/ol-tilecache.git
npm install
# build
npm run build
# run test app
npm start
# run unit tests
npm test

License

MIT (c) 2016-2018, Vladimir Vershinin