OpenLayers 3 - Trying to get the examples to work
HTML
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/layout.css">
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css">
<script src="http://openlayers.org/en/v3.0.0/examples/jquery.min.js"></script>
<script src="http://openlayers.org/en/v3.0.0/resources/example-behaviour.js"></script>
<script src="http://openlayers.org/en/v3.0.0/examples/loader.js"></script>
<div id="map"></div>
<div class="row-fluid">
<div class="span12">
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
<button id="rotate-around-rome">Rotate around Rome</button>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
<button id="spin-to-rome">Spin to Rome</button>
<button id="fly-to-bern">Fly to Bern</button>
<button id="spiral-to-madrid">Spiral to Madrid</button>
<button id="go-to-amsterdam">Go To Amsterdam!</button>
</div>
</div>
CSS
html, body, #map {
padding: 0;
margin: 0;
width: 100%;
height: 90%;
}
JavaScript
// from https://github.com/DmitryBaranovskiy/raphael
function bounce(t) {
var s = 7.5625, p = 2.75, l;
if (t < (1 / p)) {
l = s * t * t;
} else {
if (t < (2 / p)) {
t -= (1.5 / p);
l = s * t * t + 0.75;
} else {
if (t < (2.5 / p)) {
t -= (2.25 / p);
l = s * t * t + 0.9375;
} else {
t -= (2.625 / p);
l = s * t * t + 0.984375;
}
}
}
return l;
}
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
var amsterdam = ol.proj.transform([4.53, 52.22], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: amsterdam,
zoom: 10
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
],
view: view
});
var rotateLeft = document.getElementById('rotate-left');
rotateLeft.addEventListener('click', function() {
var rotateLeft = ol.animation.rotate({
duration: 500,
rotation: -4 * Math.PI
});
map.beforeRender(rotateLeft);
}, false);
var rotateRight = document.getElementById('rotate-right');
rotateRight.addEventListener('click', function() {
var rotateRight = ol.animation.rotate({
duration: 2000,
rotation: 2 * Math.PI
});
map.beforeRender(rotateRight);
}, false);
var rotateAroundRome = document.getElementById('rotate-around-rome');
rotateAroundRome.addEventListener('click', function() {
var currentRotation = view.getRotation();
var rotateAroundRome =...