Performance issues in large vector layer rendering using canvas renderer of leaflet

Question

I'm trying to render a map which contains around 3000 polygons through canvas renderer in leaflet, it is working fine on my PC but it is very slow(and even crashes sometimes) when I test it on android device or i-pod. I've also tried to render it with openLayers 2 and openLayers 3 but even these are working slow. It is noteworthy that when I used the above three rendering engines to render a map of around 800 polygons, leaflet worked fastest among the three but it hangs and crashes when the number increased to 3000. I'm using WKT format to input my data. The leaflet code is given as below-

var wkt = new Wkt.Wkt();
        var geom;
        var feature;
        var typeWiseData;
for (var type in allData){
    typeWiseData = allData[type];
    for (var i=0; i<typeWiseData.length;i++){
        geom = typeWiseData[i]['geometry'];
        if (geom){
            try {
                wkt.read(geom);
                feature = wkt.toObject();
                feature.addTo(map);
            }
            catch(e){
                alert(e.message);
            }

        }
    }
}

Can someone please suggest me any solution to this problem? Should I use any other rendering engine? Should I use any other input data format (like geoJSON)? Thanks.

Have you seen this? http://stackoverflow.com/questions/17626198/render-2500-geojson-polygons-onto-a-leaflet-map — John Powell, Aug 18 '14 at 19:09
Actually I need my map to be interactive. Although one of the answers seems useful to me but I'm not sure if it would work for android devices/i-pod. I'll definitely give it a try. Thanks for the link! — Manas Chauhan, Aug 20 '14 at 04:15

score 0 · Answer 1 · edited May 23 '17 at 10:25

First I doubt the cause is the input format. Browsers may use hardware acceleration behind the scenes for the Canvas element, if they do not then you will experience performance degradation.

Canvas->Browser->OS->Hardware, so this will depend on a lot of parameters...

I am not expert in Android but this issue applies to browser/device combination. See these links:

Html5 is interesting but do not expect native performance on every device yet, it will probably be better in a few years.

Performance issues in large vector layer rendering using canvas renderer of leaflet

1 Answers1