https://github.com/hermanho/react-leaflet-pouchdb-tilelayer

https://github.com/hermanho/react-leaflet-pouchdb-tilelayer

pouchdb react react-leaflet tilelayer

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/hermanho/react-leaflet-pouchdb-tilelayer
• Owner: hermanho
• License: mit
• Created: 2019-07-29T13:56:00.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-03T18:22:38.000Z (about 2 years ago)
• Last Synced: 2024-10-31T22:35:28.167Z (over 1 year ago)
• Topics: pouchdb, react, react-leaflet, tilelayer
• Language: TypeScript
• Size: 1.48 MB
• Stars: 4
• Watchers: 3
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-leaflet-pouchdb-tilelayer

[![version](https://img.shields.io/npm/v/react-leaflet-pouchdb-tilelayer.svg?style=plastic)](http://npm.im/react-leaflet-pouchdb-tilelayer)

[![leaflet compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-pouchdb-tilelayer/peer/leaflet.svg?style=plastic)](https://github.com/hermanho/react-leaflet-pouchdb-tilelayer)

[![react-leaflet compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-pouchdb-tilelayer/peer/react-leaflet.svg?style=plastic)](https://github.com/hermanho/react-leaflet-pouchdb-tilelayer)

[![react compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-pouchdb-tilelayer/peer/react.svg?style=plastic)](https://github.com/hermanho/react-leaflet-pouchdb-tilelayer)

[![pouchdb compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-pouchdb-tilelayer/peer/pouchdb.svg?style=plastic)](https://github.com/hermanho/react-leaflet-pouchdb-tilelayer)

React version of [Leaflet.TileLayer.PouchDBCached](https://github.com/MazeMap/Leaflet.TileLayer.PouchDBCached)

## Installation

### Install via NPM

```bash

npm i react-leaflet-pouchdb-tilelayer --save

```

OR

```bash

npm i react-leaflet-pouchdb-tilelayer@3.2.2-beta --save

```

### Demo

https://codesandbox.io/p/sandbox/strange-field-t7l4ly

### Usage with React-Leaflet v3

This plugin is compatible with version 2 of React-Leaflet

```javascript

import { Map, TileLayer, LayersControl } from "react-leaflet";

import PouchDBTileLayer from "react-leaflet-pouchdb-tilelayer";

  

    

      

    

    

      

    

  

;

```

## Control options

### position

`{ useCache: true }`

Enable the cache logic

### saveToCache

`{ saveToCache: true }`

Save the map tile to PouchDB

### useOnlyCache

`{ useOnlyCache: false }`

Load from PouchDB cache and do not download from web

### cacheFormat

`{ cacheFormat: 'image/png' }`

The mine type

### cacheMaxAge

`{ cacheMaxAge: 3600000 }`

cache age in millisecond unit

### cacheNextZoomLevel

`{ cacheNextZoomLevel: true }`

pre-load and cache the next level tile

## Development

1. Clone the project

2. Run ```npm install```

3. Run ```npm run build```

4. Start coding