---
template: "example.html"
title: "Side-by-side example"
shortdesc: "The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers."
docs: >
  The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
---
<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-error" 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>