Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
ghettovoice committed Oct 1, 2019
1 parent e1039c9 commit 4872efc
Showing 1 changed file with 19 additions and 39 deletions.
58 changes: 19 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,15 @@
Allows create custom [`ol.TileUrlFunctionType`](http://openlayers.org/en/latest/apidoc/ol.html#.TileUrlFunctionType) to load tiles
seeded with [TileCache](http://tilecache.org/).

`ol-tilecache` **v3.x** is aiming to support **OpenLayers 5**. To use it with previous versions of the OpenLayers
you should install **v2.x** version.

## Installation

Install it with NPM (recommended):
Install it with NPM (**recommended**):

```shell
# ES6 version for bundling with Webpack, Rollup and etc.
npm install ol ol-tilecache

# to use with old `openlayers` package (not recommended)
npm install openlayers ol-tilecache
```

Or add from CDN:

```html
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.2/build/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](https://www.npmjs.com/package/ol) package (you should
install it manually).**
- **UMD version (`dist/bundle[.min].js`) should be used with deprecated [openlayers](https://www.npmjs.com/package/openlayers) package.
You can install `ol` package as dev dependency to suppress NPM warning about required peer dependencies.**

## Usage

Plugin may be used as ES2015 module (**recommended** with support of ol v5):

```js
// Use as ES2015 module (based on NPM package `ol`)
import Map from 'ol/Map'
Expand All @@ -51,25 +27,28 @@ import * as TileCacheUrlFn from 'ol-tilecache'
import { createTileUrlFunction } from 'ol-tilecache'
```

Usage with deprecated `openlayers` package (ol v4)

```js
// Use as UMD module (based on NPM package `openlayers`)
const ol = require('openlayers')
...
const TileCacheUrlFn = require('ol-tilecache')
```
Or add from CDN:

In Browser environment you should add **script** tag pointing to UMD module after OpenLayers js files.
```html
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.2/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.0/build/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>
```

### 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](https://www.npmjs.com/package/ol) package (you should
install it manually).**
- **UMD version (`dist/bundle[.min].js`) should be used with UMD [ol](https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.0/build/ol.js) package.
You can install `ol` package as dev dependency to suppress NPM warning about required peer dependencies.**

## Usage

Usage same as standard OpenLayers tile url functions.

### Members

#### createTileUrlFunction
Expand All @@ -86,15 +65,16 @@ 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)
-y1, -y2, -y3 - inverted Y axis index parts (remnant from dividing the tile Y index on 10^9 broken down by 3 digits)
```

### Example usage:

```js
import Map from 'ol/map'
import View from 'ol/view'
import TileLayer from 'ol/layer/tile'
import XyzSource from 'ol/source/xyz'
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({
Expand Down

0 comments on commit 4872efc

Please sign in to comment.