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/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></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>
    <script>
      import Map from 'ol/Map.js';
      import WebGLMap from 'ol/WebGLMap.js';
      import View from 'ol/View.js';
      import TileLayer from 'ol/layer/Tile.js';
      import OSM from 'ol/source/OSM.js';

      var layer = new TileLayer({
        source: new OSM()
      });

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

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

      var map2 = new WebGLMap({
        target: 'webglMap',
        layers: [layer],
        view: view
      });
    </script>
  </body>
</html>