https://github.com/glenrobertson/leaflet-tilelayer-geojson

Leaflet TileLayer for GeoJSON tiles
https://github.com/glenrobertson/leaflet-tilelayer-geojson

Last synced: 18 days ago
JSON representation

Leaflet TileLayer for GeoJSON tiles

• Host: GitHub
• URL: https://github.com/glenrobertson/leaflet-tilelayer-geojson
• Owner: glenrobertson
• License: other
• Created: 2012-10-30T20:23:05.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2017-10-28T06:44:04.000Z (about 7 years ago)
• Last Synced: 2024-10-23T04:58:45.482Z (22 days ago)
• Language: JavaScript
• Size: 50.8 KB
• Stars: 250
• Watchers: 26
• Forks: 79
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Leaflet GeoJSON Tile Layer

[![CDNJS](https://img.shields.io/cdnjs/v/leaflet-tilelayer-geojson.svg)](https://cdnjs.com/libraries/leaflet-tilelayer-geojson)

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 = '
';

                        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);


### Constructor

    L.TileLayer.GeoJSON(  urlTemplate,  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](http://leafletjs.com/reference.html#geojson-options)

## Hosts

1. npm: [https://www.npmjs.com/package/leaflet-tilelayer-geojson](https://www.npmjs.com/package/leaflet-tilelayer-geojson)

1. cdnjs: [https://cdnjs.com/libraries/leaflet-tilelayer-geojson](https://cdnjs.com/libraries/leaflet-tilelayer-geojson)

## Contributors

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