Canvas

WebGL

DOM

Side-by-side example

The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.

The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.

side-by-side, canvas, webgl, dom, canvas, sync, object
<!DOCTYPE html>
<html>
<head>
<title>Side-by-side 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.9.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span4">
    <h4>Canvas</h4>
    <div id="canvasMap" class="map"></div>
  </div>
  <div class="span4">
    <h4>WebGL</h4>
    <div id="webglMap" class="map"></div>
    <div id="no-webgl" class="alert alert-danger" style="display: none">
      This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
    </div>
  </div>
  <div class="span4">
    <h4>DOM</h4>
    <div id="domMap" class="map"></div>
  </div>
</div>

</div>
<script>
var domMap = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    })
  ],
  renderer: 'dom',
  target: 'domMap',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

if (ol.has.WEBGL) {
  var webglMap = new ol.Map({
    renderer: 'webgl',
    target: 'webglMap',
    layers: domMap.getLayers(),
    view: domMap.getView()
  });
} else {
  var info = document.getElementById('no-webgl');
  /**
   * display error message
   */
  info.style.display = '';
}

var canvasMap = new ol.Map({
  target: 'canvasMap',
  layers: domMap.getLayers(),
  view: domMap.getView()
});

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