Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including Leaflet.TileLayer.MBTiles with all npm packages installed. Try it out:

var leafletTilelayerMbtiles = require("Leaflet.TileLayer.MBTiles")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

Leaflet.TileLayer.MBTiles v1.0.0

Load MBTiles packages into Leaflet maps

Leaflet.TileLayer.MBTiles

A LeafletJS plugin to load tilesets in .mbtiles format.

Demo

The following demo loads a ~9.6MB .mbtiles file with the "countries" style from the good ol' Tilemill:

http://ivansanchez.gitlab.io/Leaflet.TileLayer.MBTiles/demo/demo.html

Compatibility

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

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

Usage

Include Leaflet in your HTML, like:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

Include the sql.js library, like:

<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script>

Include Leaflet.TileLayer.MBTiles, like:

<script src="https://unpkg.com/leaflet.tilelayer.mbtiles@latest/Leaflet.TileLayer.MBTiles.js"></script>

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

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

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 async nature of the code, attribution might not show up properly if the layer is added to the map before its database is loaded.

To work around the asynchronous attribution problem, this might not work very well. Consider handling the metadata manually and setting Leaflet layer options accordingly.

Legalese


"THE BEER-WARE LICENSE": ivan@sanchezortega.es 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.


Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free