leaflet.offline
Version:
Offline tilelayer for leaflet
405 lines (308 loc) • 13.2 kB
Markdown
## Modules
<dl>
<dt><a href="#module_TileManager">TileManager</a></dt>
<dd><p>Api methods used in control and layer
For advanced usage</p>
</dd>
</dl>
## Classes
<dl>
<dt><a href="#ControlSaveTiles">ControlSaveTiles</a></dt>
<dd></dd>
<dt><a href="#TileLayerOffline">TileLayerOffline</a></dt>
<dd></dd>
</dl>
## Typedefs
<dl>
<dt><a href="#ControlStatus">ControlStatus</a> : <code>Object</code></dt>
<dd><p>Status of ControlSaveTiles, keeps info about process during downloading
ans saving tiles. Used internal and as object for events.</p>
</dd>
</dl>
## External
<dl>
<dt><a href="#external_L.control">L.control</a></dt>
<dd><p>Leaflet control</p>
</dd>
<dt><a href="#external_L.tileLayer">L.tileLayer</a></dt>
<dd><p>Leaflet tilelayer</p>
</dd>
</dl>
<a name="module_TileManager"></a>
## TileManager
Api methods used in control and layer
For advanced usage
* [TileManager](#module_TileManager)
* _static_
* [.getStorageInfo(urlTemplate)](#module_TileManager.getStorageInfo) ⇒ <code>Promise.<Array.<tileInfo>></code>
* [.downloadTile(tileUrl)](#module_TileManager.downloadTile) ⇒ <code>Promise.<blob></code>
* [.saveTile(tileInfo, blob)](#module_TileManager.saveTile) ⇒ <code>Promise</code>
* [.getTileUrl(urlTemplate, data)](#module_TileManager.getTileUrl) ⇒ <code>string</code>
* [.getTileUrls(layer, bounds, zoom)](#module_TileManager.getTileUrls) ⇒ <code>Array.<tileInfo></code>
* [.getStoredTilesAsJson(layer, tiles)](#module_TileManager.getStoredTilesAsJson) ⇒ <code>object</code>
* [.removeTile(key)](#module_TileManager.removeTile) ⇒ <code>Promise</code>
* [.getTile(key)](#module_TileManager.getTile) ⇒ <code>Promise.<Blob></code>
* [.truncate()](#module_TileManager.truncate) ⇒ <code>Promise</code>
* _inner_
* [~tileInfo](#module_TileManager..tileInfo) ⇒ <code>Promise.<Number></code>
<a name="module_TileManager.getStorageInfo"></a>
### TileManager.getStorageInfo(urlTemplate) ⇒ <code>Promise.<Array.<tileInfo>></code>
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type |
| --- | --- |
| urlTemplate | <code>string</code> |
**Example**
```js
import { getStorageInfo } from 'leaflet.offline'
getStorageInfo('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
```
<a name="module_TileManager.downloadTile"></a>
### TileManager.downloadTile(tileUrl) ⇒ <code>Promise.<blob></code>
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type |
| --- | --- |
| tileUrl | <code>string</code> |
**Example**
```js
import { downloadTile } from 'leaflet.offline'
downloadTile(tileInfo.url).then(blob => saveTile(tileInfo, blob))
```
<a name="module_TileManager.saveTile"></a>
### TileManager.saveTile(tileInfo, blob) ⇒ <code>Promise</code>
TODO validate tileinfo props?
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type |
| --- | --- |
| tileInfo | <code>tileInfo</code> |
| blob | <code>Blob</code> |
**Example**
```js
saveTile(tileInfo, blob).then(() => console.log(`saved tile from ${tileInfo.url}`))
```
<a name="module_TileManager.getTileUrl"></a>
### TileManager.getTileUrl(urlTemplate, data) ⇒ <code>string</code>
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type | Description |
| --- | --- | --- |
| urlTemplate | <code>string</code> | |
| data | <code>object</code> | x, y, z, s |
| data.s | <code>string</code> | subdomain |
<a name="module_TileManager.getTileUrls"></a>
### TileManager.getTileUrls(layer, bounds, zoom) ⇒ <code>Array.<tileInfo></code>
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type | Description |
| --- | --- | --- |
| layer | <code>object</code> | leaflet tilelayer |
| bounds | <code>object</code> | L.bounds |
| zoom | <code>number</code> | zoomlevel 0-19 |
**Example**
```js
const p1 = L.point(10, 10)
const p2 = L.point(40, 60)
getTileUrls(layer, L.bounds(p1,p2), 12)
```
<a name="module_TileManager.getStoredTilesAsJson"></a>
### TileManager.getStoredTilesAsJson(layer, tiles) ⇒ <code>object</code>
Get a geojson of tiles from one resource
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
**Returns**: <code>object</code> - geojson
| Param | Type |
| --- | --- |
| layer | <code>object</code> |
| tiles | <code>Array.<tileInfo></code> |
**Example**
```js
const urlTemplate = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const getGeoJsonData = () => LeafletOffline.getStorageInfo(urlTemplate)
.then((data) => LeafletOffline.getStoredTilesAsJson(baseLayer, data));
getGeoJsonData().then((geojson) => {
storageLayer = L.geoJSON(geojson).bindPopup(
(clickedLayer) => clickedLayer.feature.properties.key,
);
});
```
<a name="module_TileManager.removeTile"></a>
### TileManager.removeTile(key) ⇒ <code>Promise</code>
Remove tile by key
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type |
| --- | --- |
| key | <code>string</code> |
<a name="module_TileManager.getTile"></a>
### TileManager.getTile(key) ⇒ <code>Promise.<Blob></code>
Get single tile blob
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
| Param | Type |
| --- | --- |
| key | <code>string</code> |
<a name="module_TileManager.truncate"></a>
### TileManager.truncate() ⇒ <code>Promise</code>
Remove everything
**Kind**: static method of [<code>TileManager</code>](#module_TileManager)
<a name="module_TileManager..tileInfo"></a>
### TileManager~tileInfo ⇒ <code>Promise.<Number></code>
**Kind**: inner typedef of [<code>TileManager</code>](#module_TileManager)
**Returns**: <code>Promise.<Number></code> - get number of store tiles
**Properties**
| Name | Type | Description |
| --- | --- | --- |
| key | <code>string</code> | storage key |
| url | <code>string</code> | resolved url |
| urlTemplate | <code>string</code> | orig url, used to find tiles per layer |
| x | <code>string</code> | left point of tile |
| y | <code>string</code> | top point coord of tile |
| z | <code>string</code> | tile zoomlevel |
**Example**
```js
import { getStorageLength } from 'leaflet.offline'
getStorageLength().then(i => console.log(i + 'tiles in storage'))
```
<a name="ControlSaveTiles"></a>
## ControlSaveTiles
**Kind**: global class
**Properties**
| Name | Type |
| --- | --- |
| status | [<code>ControlStatus</code>](#ControlStatus) |
* [ControlSaveTiles](#ControlSaveTiles)
* [new ControlSaveTiles()](#new_ControlSaveTiles_new)
* [.setLayer(layer)](#ControlSaveTiles.setLayer)
* [.setOption(name, value)](#ControlSaveTiles.setOption)
<a name="new_ControlSaveTiles_new"></a>
### new ControlSaveTiles()
Shows control on map to save tiles
**Example**
```js
const controlSaveTiles = L.control.savetiles(baseLayer, {
zoomlevels: [13, 16], // optional zoomlevels to save, default current zoomlevel
confirm(layer, successCallback) {
if (window.confirm(`Save ${layer._tilesforSave.length}`)) {
successCallback();
}
},
confirmRemoval(layer, successCallback) {
if (window.confirm('Remove all the tiles?')) {
successCallback();
}
},
saveText: '<i class="fa fa-download" aria-hidden="true" title="Save tiles"></i>',
rmText: '<i class="fa fa-trash" aria-hidden="true" title="Remove tiles"></i>',
});
```
<a name="ControlSaveTiles.setLayer"></a>
### ControlSaveTiles.setLayer(layer)
Change baseLayer
**Kind**: static method of [<code>ControlSaveTiles</code>](#ControlSaveTiles)
| Param | Type |
| --- | --- |
| layer | [<code>TileLayerOffline</code>](#TileLayerOffline) |
<a name="ControlSaveTiles.setOption"></a>
### ControlSaveTiles.setOption(name, value)
Update a config option
**Kind**: static method of [<code>ControlSaveTiles</code>](#ControlSaveTiles)
| Param | Type |
| --- | --- |
| name | <code>string</code> |
| value | <code>mixed</code> |
<a name="TileLayerOffline"></a>
## TileLayerOffline
**Kind**: global class
* [TileLayerOffline](#TileLayerOffline)
* [new TileLayerOffline()](#new_TileLayerOffline_new)
* ["storagesize"](#TileLayerOffline.event_storagesize)
* ["savestart"](#TileLayerOffline.event_savestart)
* ["loadtileend"](#TileLayerOffline.event_loadtileend)
* ["loadend"](#TileLayerOffline.event_loadend)
* ["savetileend"](#TileLayerOffline.event_savetileend)
* ["saveend"](#TileLayerOffline.event_saveend)
* ["tilesremoved"](#TileLayerOffline.event_tilesremoved)
<a name="new_TileLayerOffline_new"></a>
### new TileLayerOffline()
A layer that uses stored tiles when available. Falls back to online.
**Example**
```js
const tileLayerOffline = L.tileLayer
.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data {attribution.OpenStreetMap}',
subdomains: 'abc',
minZoom: 13,
})
.addTo(map);
```
<a name="TileLayerOffline.event_storagesize"></a>
### "storagesize"
Control finished calculating storage size
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_savestart"></a>
### "savestart"
Start saving tiles
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_loadtileend"></a>
### "loadtileend"
Tile fetched
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_loadend"></a>
### "loadend"
All tiles fetched
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_savetileend"></a>
### "savetileend"
Tile saved
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_saveend"></a>
### "saveend"
All tiles saved
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="TileLayerOffline.event_tilesremoved"></a>
### "tilesremoved"
Tile removed
**Kind**: event emitted by [<code>TileLayerOffline</code>](#TileLayerOffline)
<a name="ControlStatus"></a>
## ControlStatus : <code>Object</code>
Status of ControlSaveTiles, keeps info about process during downloading
ans saving tiles. Used internal and as object for events.
**Kind**: global typedef
**Properties**
| Name | Type | Description |
| --- | --- | --- |
| storagesize | <code>number</code> | total number of saved tiles. |
| lengthToBeSaved | <code>number</code> | number of tiles that will be saved in db during current process |
| lengthSaved | <code>number</code> | number of tiles saved during current process |
| lengthLoaded | <code>number</code> | number of tiles loaded during current process |
| _tilesforSave | <code>array</code> | tiles waiting for processing |
<a name="external_L.control"></a>
## L.control
Leaflet control
**Kind**: global external
**See**: [Control](https://leafletjs.com/reference-1.6.0.html#control)
<a name="external_L.control.savetiles"></a>
### L.control.savetiles(baseLayer) ⇒ [<code>ControlSaveTiles</code>](#ControlSaveTiles)
**Kind**: static method of [<code>L.control</code>](#external_L.control)
| Param | Type | Description |
| --- | --- | --- |
| baseLayer | <code>object</code> | [http://leafletjs.com/reference-1.2.0.html#tilelayer](http://leafletjs.com/reference-1.2.0.html#tilelayer) |
**Properties**
| Name | Type | Description |
| --- | --- | --- |
| options | <code>Object</code> | |
| [options.position] | <code>string</code> | default topleft |
| [options.saveText] | <code>string</code> | html for save button, default + |
| [options.rmText] | <code>string</code> | html for remove button, deflault - |
| [options.maxZoom] | <code>number</code> | maximum zoom level that will be reached when saving tiles with saveWhatYouSee. Default 19 |
| [options.parallel] | <code>number</code> | parallel downloads (default 50) |
| [options.saveWhatYouSee] | <code>boolean</code> | save the tiles that you see on screen plus deeper zooms, ignores zoomLevels options. Default false |
| [options.confirm] | <code>function</code> | function called before confirm, default null. Args of function are ControlStatus and callback. |
| [options.confirmRemoval] | <code>function</code> | function called before confirm, default null |
<a name="external_L.tileLayer"></a>
## L.tileLayer
Leaflet tilelayer
**Kind**: global external
**See**: [TileLayer](https://leafletjs.com/reference-1.6.0.html#tilelayer)
<a name="external_L.tileLayer.offline"></a>
### L.tileLayer.offline(url, options) ⇒ [<code>TileLayerOffline</code>](#TileLayerOffline)
**Kind**: static method of [<code>L.tileLayer</code>](#external_L.tileLayer)
**Returns**: [<code>TileLayerOffline</code>](#TileLayerOffline) - an instance of TileLayerOffline
| Param | Type | Description |
| --- | --- | --- |
| url | <code>string</code> | [description] |
| options | <code>object</code> | [http://leafletjs.com/reference-1.2.0.html#tilelayer](http://leafletjs.com/reference-1.2.0.html#tilelayer) |