Skip to content
A leaflet tile layer cached with @yaga/indexed-db-tile-cache
TypeScript HTML JavaScript
Branch: develop
Clone or download
atd-schubert Merge pull request #1 from fossabot/develop
Add license scan report and status
Latest commit 590d8b5 Feb 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
browser-test Initial commit Feb 26, 2018
example Initial commit Feb 26, 2018
test Initial commit Feb 26, 2018
ts Initial commit Feb 26, 2018
.gitignore Initial commit Feb 26, 2018
.npmignore Initial commit Feb 26, 2018
.travis.yml Initial commit Feb 26, 2018
LICENSE Initial commit Feb 26, 2018
README.md Add license scan report and status Feb 26, 2018
karma.conf.js Initial commit Feb 26, 2018
package-lock.json Initial commit Feb 26, 2018
package.json Initial commit Feb 26, 2018
tsconfig.json Initial commit Feb 26, 2018
tslint.json Initial commit Feb 26, 2018

README.md

YAGA cached Tile-Layer for Leaflet

Build Status Coverage Status FOSSA Status

A cached tile-layer for Leaflet realized with the browsers IndexedDB over @yaga/indexed-db-tile-cache.

How to use

At first you have to install this library with npm or yarn:

npm install --save @yaga/leaflet-cached-tile-layer
# OR
yarn install --save @yaga/leaflet-cached-tile-layer

After that you can import this module into your application with the typical node.js or TypeScript way.

keep in mind that you have to use browserify to package the libraries from the node.js environment into your browser ones, such as Buffer or request.

Working with the cached Leaflet tile layer

JavaScript

const CachedTileLayer = require('@yaga/leaflet-cached-tile-layer').CachedTileLayer;
const Map = require('leaflet').Map;

document.addEventListener('DOMContentLoaded', function() {
    const map = new Map('map').setView([51.505, -0.09], 13);

    const leafletCachedTileLayer = new CachedTileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        databaseName: 'tile-cache-data', // optional
        databaseVersion: 1, // optional
        objectStoreName: 'OSM', // optional
        crawlDelay: 500, // optional
        maxAge: 1000 * 60 * 60 * 24 * 7 // optional
    }).addTo(map);

    // The layer caches itself on tile load.
    // You can also seed explicit with:
    // - `leafletCachedTileLayer.seedCurrentView();`
    // - `leafletCachedTileLayer.seedBBox(/* ... */);`
    //
    // or clear the cache with:
    // - `leafletCachedTileLayer.clearCache();`
});

TypeScript

import { CachedTileLayer, ICachedTileLayerSeedProgress } from "@yaga/leaflet-cached-tile-layer";
import { Map } from "leaflet";

document.addEventListener("DOMContentLoaded", () => {
    const map = new Map("map").setView([51.505, -0.09], 13);

    const leafletCachedTileLayer = new CachedTileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: `&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors`,
        databaseName: "tile-cache-data", // optional
        databaseVersion: 1, // optional
        objectStoreName: "OSM", // optional
        crawlDelay: 500, // optional
        maxAge: 1000 * 60 * 60 * 24 * 7, // optional
    }).addTo(map);
    
    // The layer caches itself on tile load.
    // You can also seed explicit with:
    // - `leafletCachedTileLayer.seedCurrentView();`
    // - `leafletCachedTileLayer.seedBBox(/* ... */);`
    //
    // or clear the cache with:
    // - `leafletCachedTileLayer.clearCache();`
});

There are more methods available, for further information take a look at the API documentation or the example...

NPM script tasks

  • npm test: Runs the software tests with karma and leaves a coverage report under the folder coverage.
  • npm run travis-test: Runs the software tests optimized for the Travis-CI.
  • npm run browser-test: Prepares the tests to run directly in your browser. After running this command you have to open browser-test/index.html in your browser of choice.
  • npm run doc: Creates the API documentation with typedoc and places the documentation in the folder typedoc.

Contribution

Make an issue on GitHub, or even better a pull request and try to fulfill the software tests.

License

This library is under ISC License © by Arne Schubert and the YAGA Development Team.

FOSSA Status

You can’t perform that action at this time.