glenrobertson / leaflet-tilelayer-geojson

Leaflet TileLayer for GeoJSON tiles

Leaflet GeoJSON Tile Layer

Renders GeoJSON tiles on an L.GeoJSON layer.

Docs

Usage example

The following example shows how to render a GeoJSON Tile Layer for a tile endpoint at http://tile.example.com/{z}/{x}/{y}.json.

    var style = {
        "clickable": true,
        "color": "#00D",
        "fillColor": "#00D",
        "weight": 1.0,
        "opacity": 0.3,
        "fillOpacity": 0.2
    };
    var hoverStyle = {
        "fillOpacity": 0.5
    };

    var geojsonURL = 'http://tile.example.com/{z}/{x}/{y}.json';
    var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
            clipTiles: true,
            unique: function (feature) {
                return feature.id; 
            }
        }, {
            style: style,
            onEachFeature: function (feature, layer) {
                if (feature.properties) {
                    var popupString = '<div class="popup">';
                    for (var k in feature.properties) {
                        var v = feature.properties[k];
                        popupString += k + ': ' + v + '<br />';
                    }
                    popupString += '</div>';
                    layer.bindPopup(popupString);
                }
                if (!(layer instanceof L.Point)) {
                    layer.on('mouseover', function () {
                        layer.setStyle(hoverStyle);
                    });
                    layer.on('mouseout', function () {
                        layer.setStyle(style);
                    });
                }
            }
        }
    );
    map.addLayer(geojsonTileLayer);

Constructor

L.TileLayer.GeoJSON( <String> urlTemplate, <GeoJSONTileLayer options> options?, <GeoJSON options> geojsonOptions? )

URL Template

A string of the following form, that returns valid GeoJSON.

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.json'

GeoJSONTileLayer options

• clipTiles (boolean) (default = false): If true, clips tile feature geometries to their tile boundaries using SVG clipping.
• unique (function): If set, the feature's are grouped into GeometryCollection GeoJSON objects. Each group is defined by the key returned by this function, with the feature object as the first argument.

GeoJSON options

Options that will be passed to the resulting L.GeoJSON layer: http://leafletjs.com/reference.html#geojson-options

Hosts

1. npm: https://www.npmjs.com/package/leaflet-tilelayer-geojson
2. cdnjs: https://cdnjs.com/libraries/leaflet-tilelayer-geojson

Contributors

Thanks to the following people who contributed: https://github.com/glenrobertson/leaflet-tilelayer-geojson/graphs/contributors

leaflet-tilelayer-geojson's Issues

pointtolayer makes first geojson feature parentLayer

Hi,

We've been implementing some clickhandlers on this very fine TileLayer of yours. But I could not exactly pinpoint what the problem I think I found a little bug.

When I add a tilelayer with multiple features the first feature becomes a parentLayer. All of the other layers become part of this parentLayer.

This means that whenever I click on the layer it produces 2 events. Where one is always from the parent, the second from the specific child I'm pressing.

I added a little snippet with the console output in Chrome below. In the example I have 4 features that I add. The first feature is used as parent and also gets itself as a child.

Should fire the TileLayer events.

I don't think it fires the TileLayer events, such as tileloadstart.
I'll try figure out how to add them.

leaflet.ajax

I wrote leaflet ajax which is a plugin for loading geojson layer via Ajax. You may have an easier time pieces of it instead of rolling your own, for instance the ajax specific code is totally self contained and could be a starting point to removing jquery from your plugin.

Uncaught Error: No value provided for variable {z}

Hi!

Nice library, It's really useful!

I've detected an issue when the function loadTile is called, because tilePoint.z is not defined (at least it happens to me), in order to fix that I've modified the loadTile function to adjust the tile Point:

_loadTile: function (tile, tilePoint) {

this._adjustTilePoint(tilePoint);
    var layer = this;
    var req = new XMLHttpRequest();
    this._requests.push(req);
    req.onreadystatechange = this._xhrHandler(req, layer, tile);
    req.open('GET', this.getTileUrl(tilePoint), true);
    req.send();
},

It happens with the latest version of the code ofLeaflet 0.6-dev, with 0.5 it works fine.

Do you want I upload this changes to the trunk?

getting leaflet__WEBPACK_IMPORTED_MODULE_4 error

Don't know if this is still being looked at or maintained, but in the even it is:

I did a npm i leaflet-tilelayer-geojson in my React js component.

When this statement runs:
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, ....{

I get:
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_4___default.a.TileLayer.GeoJSON is not a constructor

Thank you

One question

Dear Sirs,
I have just dicovered your plugin for leaflet and have a very dummy question!
I have a case, where I have to generate the map using leaflet directly on mobile device!
I want the map to be generated totally offline, so I have to use mbtiles sqlite solution, where the tiles are stored as binary data in 1 sqlite database and are given back to the leaflet with internal call . But in some cases when i want to have zoom 18 for the city the file grows to 3-4GB! But in opposite the OSM file is small lets say 20-30 MB ... So I wander if using your plugin and using spitalite I could turn data of 1 tile from database to geojson and render the map on the fly!

So did I got idea of your plugin right? Or it's like kind of extra layer?

Not compatible with 1.0-beta1

This plugin is not compatible with leaflet 1.0 beta1

Lines appear in shapes split across tiles

When I use this layer with a line weight / opacity to shape borders, a small but visible gap appears in features split across tiles. You can see some horizontal lines which are almost parallel in the bottom third of this screenshot. The straight one is a tile gap.

When I select one part and change fillColor, it colors the area on both sides of the gap, so I think that unique correctly puts them in the same featureGroup. The tricky part is merging the parts which were downloaded in different tiles.

I don't see this problem in the demo at http://bl.ocks.org/glenrobertson/6203331

Is there a client-side workaround? Is this a known problem where I could be using a geo library to merge features?

Angular 2.0.0 breaks svg clipping path

Using versions like:

"@angular/common": "2.0.0"
"angular-cli": "1.0.0-beta.15"
"leaflet": "^0.7.7"

And the clipping of tiles stop working, here is the solution:
http://stackoverflow.com/questions/24454798/svg-clippath-in-angularjs-app-with-url-in-hashbang-mode

Provide a way to fetch GeoJSON tiles with constant area regardless of zoomlevel

As GeoJSON does't change its information with different zoom levels it would be nice to fix this single layer to one zoomlevel and therefore one absolute tile size.
This would reduce apirequests if the user is using a high zoomleven and is scrolling much.

Local file url tile template doesn't work

Hey Glen, great stuff!

However, I tried var luURL = 'tiles/land-usages/{z}/{x}/{y}.json';

Wouldn't work.

Appears XMLHttpRequest returning status = 0 for local files (tested in Safari, Chrome raises CORS issue).

Developed a workaround, line 17 in TileLayer.GeoJSON.js

...if ((s >= 200 && s < 300) || s === 304) {

...if (s === 0 || (s >= 200 && s < 300) || s === 304) {

Seems to work with this change.

Note, am just experimenting, not using in production system.

_clipLayerToTileBoundary function

Hello,
Can you please explain to us what does _clipLayerToTileBoundary() do ?
because I don't see the difference when clipTile is set to true or false
Thank you

About maintainer on npm

Hello @glenrobertson ,
I am the member in cdnjs project.
We want to host this library.
Are you the maintainer of this library on npm?
Thanks.

cdnjs/cdnjs#6746
cdnjs/cdnjs#7753 (comment)

Keep feautures on map when zooming in

In my case, the tile endpoint delivers the same geojson features for every zoom level. It doesn't get into more detail. So it's actually not necessary to remove all features and reload them for the new zoom level.

An option to keep all features on the map when zooming in would be nice.

problem when zooming

Hi,
This plugin is working great except for one problem, when zooming the polygons don't move with the openstreetmap in the original position, but a lot more in a different path before a new tile is loaded.
Is this a known problem?
Thx

Direction of leaflet-tilelayer-geojson / alternative approaches

@glenrobertson - we started to use leaflet-tilelayer-geojson over on http://github.com/mapbox/owlviewer. I wound up rewriting very similar functionality. I'd like to share my thinking here and figure out where it could make sense to join forces.

I needed jsonp support and I found an issue where the _map pointer in the layer object (I believe) wound up being null under certain circumstances.

Partly to understand the problem space better I pared down your approach to this:

https://gist.github.com/4019660#file_geojson_tiles.js

Demo:

http://bl.ocks.org/4019660

1. You'll see these are just first steps, but I've tried to keep the code to a minimum and aimed for minimal duplication with Leaflet's functionality.
2. Looking at the resulting data, the main difference in the approach is that geojson-tiles.js creates a single GeoJSON layer from multiple tiles, while leaflet-tilelayer-geojson creates a layer per tile. Further down the line, I'm hoping to be able to assemble geometries that span across tiles. I'm curious as to why you went the layer-per-tile route and how you're thinking of creating intact geometries across layers.
3. Due to (2) you'll see that my demo under certain cirumstances does not load all data. That's because if one data tile fails due to invalid data, Leaflet stops building the GeoJSON layer. Not sure how to solve this without overwriting geometryToLayer() and addData()
4. I've tried to reuse as much functionality of L.TileLayer as possible. You'll see that this approach requires slightly more responsibilities from the API user, but I feel it's preferable over trying to create a cross between L.TileLayer and L.GeoJSON - nothing in Leaflet helps you to do so so you'll wind up forking a lot of code.
5. I'm not implementing hover interactivity in this demo, but you see how it would be simple to add.
6. Am I missing any important features of tile rendering you'd be looking for?

Looking forward to your thoughts.

/cc @ppawel

Geo tiles are removed before new tiles are loaded

As I zoom in and out, the different tiles load up as expected, but the old tiles are removed before the new tiles loads. This causes the map to go blank for a second, which makes it quite unpleasant. Is there a way to not have the tiles remove until after all the new tiles have loaded?

fit bounds & getBounds

Hello I'm wondering how can we set a fitbounds to getBounds using tileLayer in order to center a map on the loaded json files?
... any help would be appreciated.

minZoom, maxZoom

I want to show the geojson layer only at specific zoom levels.
It's not a feature of leaflet-tilelayer-geojson so I add/remove the geojsonlayer.
If the layer is not added I get the following error:

Line 108:
Uncaught TypeError: Cannot read property '_pathRoot' of null

Markerclusterer

Is there an easy way to use this lib together with (client side) markerclusterer?

https://github.com/Leaflet/Leaflet.markercluster

Add withCredentials to XMLHttpRequest

Hi,

Excellent plugin. I have one issue though.

We need to do CORS and need to set the withCredentials=true on the XMLHttpRequest object. Could you make this an option for the plugin. Or set it default to true. It should not cause problems for non CORS requests.
Thanx in advance, regards, Gijs

Circle over tilelayer

Hi,

I am using titelayer as background and circle to show our data. But tilelayer is always on top of circle, How can I fix that? Thanks

Yilun

Update to last version of Leaflet

I get a this._adjustTilePoint is not a function error when using leaflet 1.4 which does not have this function any longer.

See: Leaflet/Leaflet#5103

TileLayer geojson is not working with leaflet 1.1.0

When i try with below example

Leaflet version : https://unpkg.com/[email protected]/dist/leaflet.js

var geojsonURL = 'http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json';
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
clipTiles: true,
unique: function (feature) {
return feature.id;
}
}, {
style: style,
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popupString = '

';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '
';
}
popupString += '

';
layer.bindPopup(popupString);
}
if (!(layer instanceof L.Point)) {
layer.on('mouseover', function () {
layer.setStyle(hoverStyle);
});
layer.on('mouseout', function () {
layer.setStyle(style);
});
}
}
}
);
map.addLayer(geojsonTileLayer);

It throws me error

So I comment the line 'this_adjustTilePoint' (since it was removed in latest version), it throw me many error

Can you please look into it

Duplicate features do not work with Leaflet.PolylineDecorator

Great work with this project, thanks. I stumbled upon one issue when trying to decorate LineStrings with https://github.com/bbecquet/Leaflet.PolylineDecorator that appear in two adjacent tiles.

I could make it work by not adding the same feature again. See tlaitinen@b75ccd5 for details. I also removed the part to wrap everything in GeometryCollection.

TypeError: this._adjustTilePoint is not a function

In a React functional component, my code:
` var style = {
"clickable": true,
"color": "#00D",
"fillColor": "#00D",
"weight": 1.0,
"opacity": 0.3,
"fillOpacity": 0.2
};
var hoverStyle = {
"fillOpacity": 0.5
};

    const geojsonURL = 'https://dla-maps-storage.s3.amazonaws.com/geoJSONFiles/testFAA.json';
    const geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
            clipTiles: true,
            unique: function (feature) {
                return feature.id;
            }
        }, {
            style: style,
            onEachFeature: function (feature, layer) {
                if (feature.properties) {
                    var popupString = '<div class="popup">';
                    for (var k in feature.properties) {
                        var v = feature.properties[k];
                        popupString += k + ': ' + v + '<br />';
                    }
                    popupString += '</div>';
                    layer.bindPopup(popupString);
                }
                if (!(layer instanceof L.Point)) {
                    layer.on('mouseover', function () {
                        layer.setStyle(hoverStyle);
                    });
                    layer.on('mouseout', function () {
                        layer.setStyle(style);
                    });
                }
            }
        }
    );
    map.addLayer(geojsonTileLayer);`

On the line:
const geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {....

I get:
TypeError: this._adjustTilePoint is not a function

Thank you