Shared Views

This example uses OpenLayers v4.0.1. The latest is v.

#### Shared Views

#### Canvas

#### WebGL

This map requires a browser that supports 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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.has
,
- ol.layer.Tile
,
- ol.source.OSM

Copy Edit
Shared Views Two maps with different renderers share view properties 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 {ol.renderer.Type} */ ('webgl'), layers: [layer], view: view }); } else { var info = document.getElementById('no-webgl'); /** * display error message */ info.style.display = ''; } @media (min-width: 800px) { .half { padding: 0 10px; width: 50%; float: left; } } <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>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Shared Views</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/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>
        <script src="https://openlayers.org/en/v4.0.1/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 {ol.renderer.Type} */ ('webgl'),
              layers: [layer],
              view: view
            });
          } else {
            var info = document.getElementById('no-webgl');
            /**
             * display error message
             */
            info.style.display = '';
          }
        </script>
      </body>
    </html>