Shared Views

Canvas

WebGL

Two maps with different renderers share view properties

Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.

<!DOCTYPE html>
<html>
  <head>
    <title>Shared Views</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=""></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    <style>
      @media (min-width: 800px) {
        .half {
          padding: 0 10px;
          width: 50%;
          float: left;
        }
      }
    </style>
  </head>
  <body>
    <div class="half">
      <h4>Canvas</h4>
      <div id="canvasMap" class="map"></div>
    </div>
    <div class="half">
      <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>
    <script>
      var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var view = new ol.View({
        center: [0, 0],
        zoom: 1
      });

      var map1 = new ol.Map({
        target: 'canvasMap',
        layers: [layer],
        view: view
      });

      if (ol.has.WEBGL) {
        var map2 = new ol.Map({
          target: 'webglMap',
          renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
          layers: [layer],
          view: view
        });
      } else {
        var info = document.getElementById('no-webgl');
        /**
         * display error message
         */
        info.style.display = '';
      }
    </script>
  </body>
</html>