https://github.com/brandonxiang/leaflet-geojson-vt
A plugin combining geojson-vt with leafletjs
https://github.com/brandonxiang/leaflet-geojson-vt
geojson geojson-vt leaflet leaflet-geojson leaflet-geojson-vt microbundle vector-tiles
Last synced: 2 months ago
JSON representation
A plugin combining geojson-vt with leafletjs
- Host: GitHub
- URL: https://github.com/brandonxiang/leaflet-geojson-vt
- Owner: brandonxiang
- License: mit
- Created: 2016-07-28T07:55:22.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2021-12-19T13:28:43.000Z (over 3 years ago)
- Last Synced: 2025-02-28T19:05:03.593Z (3 months ago)
- Topics: geojson, geojson-vt, leaflet, leaflet-geojson, leaflet-geojson-vt, microbundle, vector-tiles
- Language: JavaScript
- Homepage: https://brandonxiang.github.io/leaflet-geojson-vt
- Size: 102 KB
- Stars: 43
- Watchers: 5
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-geojson-vt
This is a plugin combining geojson-vt with leafletjs, which is inspired by [geojson-vt-leaflet](https://github.com/handygeospatial/geojson-vt-leaflet). I am the original author of leaflet-geojson-vt. [iamtekson/leaflet-geojson-vt](https://github.com/iamtekson/leaflet-geojson-vt) is a fork of this repo. Welcome to use this plugin.
If you use leaflet 0.7, please switch to the [leaflet0.7.7](https://github.com/brandonxiang/leaflet-geojson-vt/tree/leaflet0.7.7).
## Usage
```javascript
var options = {
maxZoom: 16,
tolerance: 3,
debug: 0,
style: {
fillColor: '#1EB300',
color: '#F2FF00',
weight: 2
}
};
var canvasLayer = L.gridLayer.geoJson(json, options).addTo(map);
```
Options are included with [geojson-vt options](https://github.com/mapbox/geojson-vt#options) and [L.geojson style](http://leafletjs.com/reference.html#path-options).
```javascript
var tileIndex = geojsonvt(data, {
maxZoom: 14, // max zoom to preserve detail on
tolerance: 3, // simplification tolerance (higher means simpler)
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
debug: 0 // logging level (0 to disable, 1 or 2)
indexMaxZoom: 4, // max zoom in the initial tile index
indexMaxPoints: 100000, // max number of points per tile in the index
solidChildren: false // whether to include solid tile children in the index
});
```
## Development
run npm script with `browser-sync`
```shell
npm run dev
```
Browser on `http://localhost:3000/example`
## TODO
- point interactive
- ~~new branch to compatiable with 1.0.0~~
- ~~more geojson style~~
- ~~convert to included class of `L.TileLayer.Canvas`~~
- ~~different canvas layers~~
- ~~style for polygon and polyline~~
- ~~layers change~~
- ~~seperate index.js into index.js and app.js~~
- ~~draw point on canvas~~
- ~~draw marker by image(cancel)~~
## Changelog
[changelog](doc/changelog.md)
## License
[brandonxiang@MIT](LICENSE)