leaflet-tilelayer-mbtiles-ts

🌍 Leaflet.TileLayer.MBTiles

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..

Installing

Via NPM:

 npm install --save leaflet-tilelayer-mbtiles-ts

Via Yarn:

 yarn add leaflet-tilelayer-mbtiles-ts

Requirements

• Leaflet >= 1
• Web browser that supports:
  • Blobs
  • URL.createObjectURL()
  • fetch API, or use a polyfill
  • Uint8Array

Exemple

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 plugin

    // 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);

Importing

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);

Parameters

MBTiles extends the TileLayer.Initialise with the same options.

Extra metadata handling

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's minzoom option).
• maxzoom (as the layer's maxzoom option).
• attribution (as the layer's attribution 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.

License

MIT