geojson-vt on leaflet

update Sept 2015: nice explanation of how geojson-vt works here

Mapbox technologies used in their webgl and opengl libraries are being extracted into standalone pieces. Vladimir Agafonkin,creator of leaflet.js, earcut.js provided slicing and polygon simplification library for geojson called Goejson-vt.Geojson-vt can slice geosjon into tiles aka mapbox tiles.
Quick test and sample of using geojson-vt on leaflet with canvas drawing available here: http://bl.ocks.org/sumbera/c67e5551b21c68dc8299

2 videos:

Overview of various geojson samples

folowing video shows 280 MB large geojson !

for comparison here is WebGL version on the same data. This version is loading all data into GPU and leaves everything on WebGL (no optimization). It also takes slightly more time to tessellate all polygons, but once done all seems to run fine. Code used is available here

10 thoughts on “geojson-vt on leaflet”

Matt July 20, 2015 at 7:04 am

Is this possible using Openlayers API?

Reply ↓

Stanislav Post authorJuly 20, 2015 at 8:43 am

of course, geojson-vt is not tight to any specific map rendering. I have used leaflet as example.
I have tried to run geojson-vt also on iOS (using JavaScript core) and MapKit , it worked too. There is geojson-vt port to C++ and Swift too on github.

Reply ↓
1. Matt July 20, 2015 at 8:50 am
  
  Thanks for a quick response. I am developing a web application using GeoDjango and Openlayers 2.1.13 API, with tons of data (rows) in my database the panning and browsing of layers on the map is “laggy”. The output is GeoJSON. I want this to integrate in Openlayers but as a beginner, I am confused where to start. I also tried dragging my GeoJSON output in your demo but it doesn’t show. I guess it is about its projection problem. It would be great if you will do this using Openlayers!

Conor January 8, 2016 at 11:46 am

Hi, this looks great. Is it possible to click the tiles and return attribute data to an info window? (I’m using leaflet at the moment).

Reply ↓

Malcolm (@getbounds) February 1, 2016 at 4:36 pm

Thanks so much for your example of mapping with geojson tiles and leaflet. There are other examples out there. I am using the code you posted for several maps including an awesome parcel map with 22k features. Any chance you have looked into updating this method to work with the new grid layer in leaflet beta?

Reply ↓

Stanislav Post authorFebruary 1, 2016 at 10:16 pm

nice work, I have seen your map. actually Leaflet 1.0 beta is used in this (similar) example : http://bl.ocks.org/sumbera/7e8e57368175a1433791
where I do not use grid layer, rather provide some methods from grid layer back to my class, I think it was mostly for compatibility with 0.7. I will try to review it once I will get chance to return to this. thanks posting your comment !

Reply ↓

Maciej Wójcik August 17, 2016 at 9:09 am

How to change it to works with leaflet 1.0?

Reply ↓

   ∫ ∪ ∧∴ ∋ ∈ ⊇ ∧ Post authorAugust 18, 2016 at 8:08 am

Maciej, check gLayers.Leaflet that works for both versions, should be easy to migrate the sample code to use this layer. https://github.com/Sumbera/gLayers.Leaflet

Reply ↓
Matyas August 26, 2017 at 2:18 pm

Hi Maciej, have you figured out to migrate the sample code in Leaflet 1.X? I find it very usefule but cant manage to update the code to the new version….

Reply ↓