Openlayers-3 seems to be faster than leaflet with big JSON files.
Leaflet seems to be faster than Openlayers-3 with little JSON files.
In addition Leaflet seems to consume much more RAM (x2-x3) than Openlayers-3.
A snapshot memory with Firefox Inspector gives 30 Mo for Openlayers-3 and 500 Mo for Leaflet.
That seems normal if you look at how the language structure is. But I'm still wondering if there is not a problem in these numbers I give you... that seems to be a HUGE difference.
If the numbers are good, it's like with normal cars and sportcars, you can go faster with sportcars, but they cost much more and you must take care of them much more. But there is no "better" for me, that depends on what you need.
Here are the sources of what I'm saying:
Leaflet example:
var timerStart = Date.now();
var timerStop;
var timerDelta;
// MAP
var mymap = L.map('map').setView([20, 0], 3);
// BIG JSON
var bigJSON = new L.geoJson();
bigJSON.addTo(mymap);
$.getJSON({
dataType: "json",
url: "data/countries.geojson", // big JSON file
success: function(data) {
var nb=1;
for(var i=0; i<nb; i++) {
console.info("add n°" + i);
$(data.features).each(function(key, data) {
bigJSON.addData(data);
});
}
console.info("Number of features loaded = " + bigJSON.getLayers().length);
timerStop = Date.now();
timerDelta = timerStop - timerStart;
console.info("Start at " + timerStart);
console.info("Stopped at " + timerStop );
console.info("Loading time = " + timerDelta );
}
});
Openlayers-3 example:
var timerStart = Date.now();
var timerStop;
var timerDelta;
// MAP
var myMap = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat( [20, 0] ),
zoom: 3
})
});
var SRC_bigJSON = new ol.source.Vector({
url: 'data/countries.geojson', // big JSON file
format: new ol.format.GeoJSON()
});
var bigJSON = new ol.layer.Vector({
source: SRC_bigJSON
});
var nb=1;
for (var i=0; i<nb; i++) {
console.info("add n°" + i);
myMap.addLayer(bigJSON);
}
bigJSON.on('change', function(e) {
console.info("Number of features loaded = " + bigJSON.getSource().getFeatures().length * myMap.getLayers().getLength());
timerStop = Date.now();
timerDelta = timerStop - timerStart;
console.info("Start at " + timerStart);
console.info("Stopped at " + timerStop );
console.info("Loading time = " + timerDelta );
});
