ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #417 from twpayne/clean-up-side-by-side-example

Browse Source 
Clean up side-by-side example
This commit is contained in:
Tom Payne
2013-03-22 07:04:43 -07:00
parent b0989af9d1 422ed4bd43
commit f4dea053af
2 changed files with 14 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
examples/side-by-side.html
View File

@@ -53,22 +53,6 @@
<div id="tags">side-by-side, canvas, webgl, dom, canvas, sync, object</div>
</div>
<div class="span8">
<h4>Controls</h4>
<dl class="dl-horizontal">
<dt>Pan</dt>
<dd>drag, arrow keys</dd>
<dt>Zoom</dt>
<dd>double-click, <code>Shift</code>+double-click, mouse wheel, <code>+</code>/<code>-</code> keys; <code>Shift</code>+drag</dd>
<dt>Opacity</dt>
<dd><code>o</code>/<code>O</code> keys</dd>
<dt>Visibility</dt>
<dd><code>v</code>/<code>V</code> keys</dd>
<dt>Reset</dt>
<dd><code>0</code> key</dd>
</dl>
</div>
</div>
</div>

60
examples/side-by-side.js
View File

@@ -1,69 +1,37 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.interaction.Keyboard');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');
var LONDON = ol.projection.transform(
new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
var MOSCOW = ol.projection.transform(
new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
var layer = new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
});
var view = new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 1
});
var domMap = new ol.Map({
layers: new ol.Collection([layer]),
layers: [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
})
],
renderer: ol.RendererHint.DOM,
target: 'domMap',
view: view
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 1
})
});
var webglMap = new ol.Map({
renderer: ol.RendererHint.WEBGL,
target: 'webglMap'
});
if (webglMap !== null) {
webglMap.bindTo('layers', domMap);
webglMap.bindTo('view', domMap);
}
webglMap.bindTo('layers', domMap);
webglMap.bindTo('view', domMap);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
if (canvasMap !== null) {
canvasMap.bindTo('layers', domMap);
canvasMap.bindTo('view', domMap);
}
var keyboardInteraction = new ol.interaction.Keyboard();
keyboardInteraction.addCallback('0', function() {
layer.setOpacity(1);
layer.setVisible(true);
});
keyboardInteraction.addCallback('o', function() {
layer.setOpacity(layer.getOpacity() - 0.125);
});
keyboardInteraction.addCallback('O', function() {
layer.setOpacity(layer.getOpacity() + 0.125);
});
keyboardInteraction.addCallback('r', function() {
view.setRotation(0);
});
keyboardInteraction.addCallback('vV', function() {
layer.setVisible(!layer.getVisible());
});
domMap.getInteractions().push(keyboardInteraction);
canvasMap.bindTo('layers', domMap);
canvasMap.bindTo('view', domMap);