Leaflet SVG vs Canvas (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="http://agafonkin.com/vector-test/zips.js"></script>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script>
Lsvg = L.noConflict();
L_PREFER_CANVAS = true;
</script>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Setup

var div1 = document.createElement('div');
    div1.style.width = '600px';
    div1.style.height = '400px';
    document.body.appendChild(div1);
    
    var div2 = document.createElement('div');
    div2.style.width = '600px';
    div2.style.height = '400px';
    document.body.appendChild(div2);
    
    var map = L.map(div1).setView([42.066, -87.127], 8),
      mapSvg = Lsvg.map(div2).setView([42.066, -87.127], 8);
    
    L.Polyline.prototype.options.smoothFactor = 0;
    Lsvg.Polyline.prototype.options.smoothFactor = 0;
    
    var i = 0,
      len = 100;

Teardown


    document.body.removeChild(div1);
    document.body.removeChild(div2);

Test runner

Ready to run.

Testing in
TestOps/sec
SVG
Lsvg.geoJson(zips).addTo(mapSvg);

for (i = 0; i < len; i++) {
  mapSvg._rawPanBy(new L.point(i, i));
}

mapSvg.fire('moveend');
ready
Canvas
L.geoJson(zips).addTo(map);

for (i = 0; i < len; i++) {
  map._rawPanBy(new L.point(i, i));
}

map.fire('moveend');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.