Leaflet TileLayer for GeoJSON tiles
Switch branches/tags
Clone or download
glenrobertson Merge pull request #38 from kennynaoh/patch-1
Add CDNJS version badge in readme
Latest commit 8df2788 Oct 21, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added gitignore. Dec 5, 2012
LICENCE Added licence. Nov 18, 2012
README.md Add CDNJS version badge in readme Oct 19, 2016
TileLayer.GeoJSON.js Fixes #36 Sep 30, 2016
package.json add package.json May 11, 2016


Leaflet GeoJSON Tile Layer


Renders GeoJSON tiles on an L.GeoJSON layer.


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>';
                if (!(layer instanceof L.Point)) {
                    layer.on('mouseover', function () {
                    layer.on('mouseout', function () {


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

URL Template

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


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


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


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