geojson-vt on leaflet

update 07/25: demo recovered here https://www.sumbera.com/gist/js/vt/geojson_vt.html

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

11 thoughts on “geojson-vt on leaflet

    1. Matt

      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!

  1. Stanislav

    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.

    1. Matt

      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!

  2. Conor

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

  3. Malcolm (@getbounds)

    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?

    1. Stanislav Post author

      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 !

  4. Matyas

    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….

Comments are closed.