Tile load events example

Example using tile load events.

Image tile sources fire events related to tile loading. You can listen for tileloadstart, tileloadend, and tileloaderror type events to monitor tile loading progress. This example registers listeners for these events and renders a tile loading progress bar at the bottom of the map.

This example creates a "rotate to north" button.

tile, events, loading
<!DOCTYPE html>
<html>
<head>
<title>Tile load events example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>

<style>
.map {
  background: #E0ECED;
}
.wrapper {
  position: relative;
}
#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(0, 60, 136, 0.4);
  width: 0;
  transition: width 250ms;
}
</style>
</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12 wrapper">
    <div id="map" class="map"></div>
    <div id="progress"></div>
  </div>
</div>

</div>
<script>
/**
 * Renders a progress bar.
 * @param {Element} el The target element.
 * @constructor
 */
function Progress(el) {
  this.el = el;
  this.loading = 0;
  this.loaded = 0;
}


/**
 * Increment the count of loading tiles.
 */
Progress.prototype.addLoading = function() {
  if (this.loading === 0) {
    this.show();
  }
  ++this.loading;
  this.update();
};


/**
 * Increment the count of loaded tiles.
 */
Progress.prototype.addLoaded = function() {
  var this_ = this;
  setTimeout(function() {
    ++this_.loaded;
    this_.update();
  }, 100);
};


/**
 * Update the progress bar.
 */
Progress.prototype.update = function() {
  var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
  this.el.style.width = width;
  if (this.loading === this.loaded) {
    this.loading = 0;
    this.loaded = 0;
    var this_ = this;
    setTimeout(function() {
      this_.hide();
    }, 500);
  }
};


/**
 * Show the progress bar.
 */
Progress.prototype.show = function() {
  this.el.style.visibility = 'visible';
};


/**
 * Hide the progress bar.
 */
Progress.prototype.hide = function() {
  if (this.loading === this.loaded) {
    this.el.style.visibility = 'hidden';
    this.el.style.width = 0;
  }
};

var progress = new Progress(document.getElementById('progress'));

var source = new ol.source.TileJSON({
  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.jsonp',
  crossOrigin: 'anonymous'
});

source.on('tileloadstart', function(event) {
  progress.addLoading();
});

source.on('tileloadend', function(event) {
  progress.addLoaded();
});
source.on('tileloaderror', function(event) {
  progress.addLoaded();
});

var map = new ol.Map({
  logo: false,
  layers: [
    new ol.layer.Tile({source: source})
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

</script>
</body>
</html>