Openlayers Performance

by Kesavamoorthi Subramanian

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="map"></div>

CSS

#map {
    height: 400px;
    width: 80%;
}

JavaScript

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: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.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 );
});