Side-by-side example

Canvas

WebGL

DOM

Side-by-side example

The two maps share the same center, resolution, rotation and layers.

See the side-by-side.js source to see how this is done.

side-by-side, canvas, webgl, dom, sync, object

Controls

Pan: drag, arrow keys
Zoom: double-click, Shift+double-click, mouse wheel, +/- keys; Shift+drag
Rotate: Alt+Shift+drag, r to reset
Brightness/contrast: b/B/c/C keys (WebGL only)
Hue/saturation: h/H/s/S keys (WebGL only)
Opacity: o/O keys
Visibility: v/V keys
Animations: j/l/m/x/L/M/X keys
Reset: 0 key