This is an updated version of the typescript version of Max Battcher here This version adds OS platform detection to make it compatible with iOS and Android, since fetch didn't support File URI Schema see..

A LeafletJS plugin to load tilesets in .mbtiles format.

The following demo 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

LeafletJS 1.0.1 (or newer), sql.js 0.5.0 and a web browser that supports:

• Blobs
• URL.createObjectURL()
• fetch API, or use a polyfill
• Uint8Array

Any recent version of Firefox, Chrome or Safari should work without problems. IE10/IE11 should work with a fetch polyfill.

npm i leaflet leaflet-tilelayer-mbtiles-ts --save

Include Leaflet like:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

declare var L: any;

or like :

import * as L from 'leaflet';

or like :

import 'leaflet';
declare var L: any;

Then include Leaflet.TileLayer.MBTiles, like:

import 'leaflet-tilelayer-mbtiles-ts';

Once everything is loaded, you can instantiate L.TileLayer.MBTiles just by providing the URL to a .mbtiles database:

const mb = L.tileLayer.mbTiles('http://server/something/cool-stuff.mbtiles').addTo(map);

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.

"THE BEER-WARE LICENSE": [email protected] wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.