kartena / leaflet-tilejson

TileJSON support for Leaflet

leaflet-tilejson

leaflet-tilejson adds support for the TileJSON specification to the Leaflet map client.

For extra fun and possibility of future profit, leaflet-tilejson also supports an extension to the TileJSON specification, which allows other projections than spherical-mercator. This extension requires Proj4Leaflet and Proj4js as extra dependencies.

Example

var osmTileJSON = {
    "tilejson": "2.0.0",
    "name": "OpenStreetMap",
    "description": "A free editable map of the whole world.",
    "version": "1.0.0",
    "attribution": "© OpenStreetMap contributors, CC-BY-SA",
    "scheme": "xyz",
    "tiles": [
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    ],
    "subdomains": ["a","b","c"],
    "minzoom": 0,
    "maxzoom": 18,
    "bounds": [ -180, -85, 180, 85 ],
    "center": [ 11.9, 57.7, 8 ]
};

var map = L.TileJSON.createMap('map', osmTileJSON);

Limitations

This is, as everything else, a work in progress. Current known limitations are:

• No support for UTFGrid interaction. Mostly because Leaflet does not currently support UTFGrid.
• Only the first tile URL specified is used. The method for specifying this in the TileJSON specification and in Leaflet differs in ways that makes it hard to implement in the general case.
• When using {s}, provide non-default subdomains (Leaflet defaults are abc) as a string or array. This is not in the TileJSON spec, and is only available here due to the previously mentioned limitation.

leaflet-tilejson's Issues

Make dependency on Proj4, Proj4Leaflet optional

It was a unclear to me from the README that Proj4 and Proj4Leaflet were required dependencies; they are described as "extra" dependencies for an extension to the TileJSON spec.

These files take an additional ~30 KB and about 1/4 of a second more to load. This may not seem like much but if every module requires a bunch of other modules that aren't used, it adds up.

Add data support

It would be great if you could add support for the data array, which allows one to define GeoJSON files to automatically load along with the TileJSON. It was added in the 2.1.0 spec of TileJSON. I'm willing to implement this myself, but would like some feedback and general direction first. In my specific use case, I need to work with the loaded GeoJSON later, so I'm not sure what the best approach would be to expose the data once loaded.

Why createTileLayer method uses only tileLayer attribute of context?

When I pass to context bounds it loosing :(

leaflet-tilejson/index.js

Line 164 in 069357e

return new L.TileLayer(tileUrl, context.tileLayer);

Make center and zoom optional

It would be useful to set your own initial center coordinate and zoom options to override the ones provide in the tilejson.

Explain how to load TileJSON from CDN

I tried loading the dist.js file into my document and that caused a big headache because this file apparently includes an old version of Leaflet. I guess it's just meant for running the examples, and I should have used index.js instead.

It would be helpful to show in the README how to load the library from a CDN.

<!-- load Leaflet first -->
<script src="https://unpkg.com/[email protected]/dist/proj4.js"></script>
<script src="https://unpkg.com/[email protected]/src/proj4leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>

Missed Lefalet TileLayer option 'pane'

When I pass option objects with 'pane' attribute to TileJSON.createTileLayer, it missing at new tile layer creation. And I can't control it by pane :(

Short example

options.pane = this.map.getPane(options.pane) || this.map.createPane(options.pane, this.map.getPane('tilePane'));
options.bounds = options.bounds || urlData.bounds;
layer = this.L.TileJSON.createTileLayer(urlData, options);

In this case I want create every TileLayer in separate pane (named by unique identifier) and remove it by user action using a same identitfier.