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:

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

Leaflet Canvas Overlay


July 2016: refactored and moved to github here

August 2015: check also “scaled”- based fast SVG rendering on top of Leaflet here it might be surprising in performance on Chrome.

May 2015: Geojson-vt sample here is using Canvas overlay as well

June 2014: WebGL sample drawing 86T points using this canvasOverlay available here.

Leaflet full view Canvas Overlay  is a straightforward full screen canvas overlay class (L.CanvasOverlay.js) that calls custom user function for drawing. Available here:

For inspiration I have used Leaflet.heat and extracted generic Canvas drawing class that is not tight to data or processing but rather call user defined function. (I am still thinking in iOS view delegates and it make sense to apply it here too).

You can use L.CanvasOverlay.js for you custom drawing in your Leaflet map. The sample is using 24T points available here:

Usage example of the demo here:

       .params({data: points})     // optional add any custom data that will be passed to draw function
           .drawing(drawingOnCanvas)   // set drawing function
           .addTo(leafletMap);         // add this layer to leaflet map

    //Custom drawing function:
        function drawingOnCanvas(canvasOverlay, params) {
                var ctx = params.canvas.getContext('2d');
       (d, i) {
                  // canvas drawing goes here

    // parameters passed to custom draw function :
                                canvas   : <canvas>,
                                bounds   : <bounds in WGS84>
                                size     : <view size>,
                                zoomScale: <zoom scale is  1/resolution>,
                                zoom     : <current zoom>,
                                options  : <options passed >

Other useful full view Leaflet Canvas sources here:

– leaflet.heat
– Full Canvas
– CartoDb Leaflet.Canvas :

SVG map sample and Canavas in OpenLayers

Update August 2015: check “scaled”- based fast SVG rendering on top of Leaflet here

Updated May 2014: check leaflet Canvas test here, SVG with d3 here   and WebGL here

Canvas map sample.

Thesis on Canvas and Open Layers (August 2010) “Evaluation of HTML5 for its Use in the Web Mapping Client OpenLayers”

OpenLayers with Canavas  (partialy deprecated)

SVG vs Canvas comparison by Jeffrey Warren from :

“Well, SVG doesn’t scale well to large numbers of objects, but Canvas doesn’t
scale well to large screens”

“SVG performance degrades quickly (exponentially on Safari?) in the number of
objects, but Canvas performance remains at a near-constant low. This makes
sense, since Canvas is just a bitmap buffer, while SVG has to maintain
additional references to each object that it renders. Also, though not pictured,
note that performance in clearing an SVG element also decreases in the number of
drawn objects.”

[UPDATE] PDC2010 video by Patrick Dengler :