A LeafletJS plugin to load tilesets in .mbtiles
format.
This is a rewritten version of the typescript version based on this fork This version adds OS platform detection to make it compatible with iOS and Android, since fetch didn't support File URI Schema see..
Via NPM:
npm install --save leaflet-tilelayer-mbtiles-ts
Via Yarn:
yarn add leaflet-tilelayer-mbtiles-ts
- Leaflet >= 1
- Web browser that supports:
Blob
sURL.createObjectURL()
fetch
API, or use a polyfillUint8Array
The following exemple loads a ~9.6MB .mbtiles
file with the "countries" style from the good ol' Tilemill:
- Clone this repository: https://github.com/0nza1101/leaflet-tilelayer-mbtiles-ts.git
- Run
npm install
from the project root. npm start
See also ionic5-leaflet-mbtiles for a Ionic sample app.
// Using the constructor...
let mbtiles = new L.TileLayer.MBTiles('http://server/something/cool-stuff.mbtiles', options);
// ... or use the factory
mbtiles = L.tileLayer.mbtiles('http://server/something/cool-stuff.mbtiles', options);
// Possible events
mbtiles.on('databaseloaded', (ev) => {
console.info('MBTiles DB loaded', ev);
});
mbtiles.on('databaseerror', (ev) => {
console.info('MBTiles DB error', ev);
});
mbtiles.addTo(map);
With ES6 imports
import { MBTiles, mbtiles } from 'leaflet-tilelayer-mbtiles-ts';
// Using the constructor...
let mbtiles = new MBTiles('./assets/mysuperfile.mbtiles', options);
// ... or use the factory
mbtiles = mbtiles('./assets/mysuperfile.mbtiles', options);
mbtiles.addTo(map);
Global
import 'leaflet-tilelayer-mbtiles-ts';
// Using the constructor...
let mbtiles = new L.TileLayer.MBTiles('./assets/mysuperfile.mbtiles', options);
// ... or use the factory
mbtiles = L.tilelayer.mbtiles('./assets/mysuperfile.mbtiles', options);
mbtiles.addTo(map);
MBTiles extends the TileLayer
.Initialise with the same options.
Some .mbtiles
have metadata rows which is not in the specification .mbtiles
format.
This plugin will handle the following optional metadata rows, if they exist:
minzoom
(as the layer'sminzoom
option).maxzoom
(as the layer'smaxzoom
option).attribution
(as the layer'sattribution
option).
Due to the database being opened asynchronously, and the fact that layer options have to be given when the layer is instantiated, metadata handling does not work very well. Consider handling the metadata manually and setting Leaflet layer options accordingly.
MIT