<!DOCTYPE html> <html> <head> <title>View Animation</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <button id="rotate-left" title="Rotate clockwise">↻</button> <button id="rotate-right" title="Rotate counterclockwise">↺</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> <script> // 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; } // from https://github.com/DmitryBaranovskiy/raphael function elastic(t) { return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1; } var london = ol.proj.fromLonLat([-0.12755, 51.507222]); var moscow = ol.proj.fromLonLat([37.6178, 55.7517]); var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]); var rome = ol.proj.fromLonLat([12.5, 41.9]); var bern = ol.proj.fromLonLat([7.4458, 46.95]); var madrid = ol.proj.fromLonLat([-3.683333, 40.4]); var view = new ol.View({ // the view's initial state center: istanbul, zoom: 6 }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ preload: 4, source: new ol.source.OSM() }) ], // Improve user experience by loading tiles while animating. Will make // animations stutter on mobile or slow devices. loadTilesWhileAnimating: true, target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); var rotateLeft = document.getElementById('rotate-left'); rotateLeft.addEventListener('click', function() { var rotateLeft = ol.animation.rotate({ duration: 2000, 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: 4 * Math.PI }); map.beforeRender(rotateRight); }, false); var rotateAroundRome = document.getElementById('rotate-around-rome'); rotateAroundRome.addEventListener('click', function() { var currentRotation = view.getRotation(); var rotateAroundRome = ol.animation.rotate({ anchor: rome, duration: 1000, rotation: currentRotation }); map.beforeRender(rotateAroundRome); view.rotate(currentRotation + (Math.PI / 2), rome); }, false); var panToLondon = document.getElementById('pan-to-london'); panToLondon.addEventListener('click', function() { var pan = ol.animation.pan({ duration: 2000, source: /** @type {ol.Coordinate} */ (view.getCenter()) }); map.beforeRender(pan); view.setCenter(london); }, false); var elasticToMoscow = document.getElementById('elastic-to-moscow'); elasticToMoscow.addEventListener('click', function() { var pan = ol.animation.pan({ duration: 2000, easing: elastic, source: /** @type {ol.Coordinate} */ (view.getCenter()) }); map.beforeRender(pan); view.setCenter(moscow); }, false); var bounceToIstanbul = document.getElementById('bounce-to-istanbul'); bounceToIstanbul.addEventListener('click', function() { var pan = ol.animation.pan({ duration: 2000, easing: bounce, source: /** @type {ol.Coordinate} */ (view.getCenter()) }); map.beforeRender(pan); view.setCenter(istanbul); }, false); var spinToRome = document.getElementById('spin-to-rome'); spinToRome.addEventListener('click', function() { var duration = 2000; var start = +new Date(); var pan = ol.animation.pan({ duration: duration, source: /** @type {ol.Coordinate} */ (view.getCenter()), start: start }); var rotate = ol.animation.rotate({ duration: duration, rotation: 2 * Math.PI, start: start }); map.beforeRender(pan, rotate); view.setCenter(rome); }, false); var flyToBern = document.getElementById('fly-to-bern'); flyToBern.addEventListener('click', function() { var duration = 2000; var start = +new Date(); var pan = ol.animation.pan({ duration: duration, source: /** @type {ol.Coordinate} */ (view.getCenter()), start: start }); var bounce = ol.animation.bounce({ duration: duration, resolution: 4 * view.getResolution(), start: start }); map.beforeRender(pan, bounce); view.setCenter(bern); }, false); var spiralToMadrid = document.getElementById('spiral-to-madrid'); spiralToMadrid.addEventListener('click', function() { var duration = 2000; var start = +new Date(); var pan = ol.animation.pan({ duration: duration, source: /** @type {ol.Coordinate} */ (view.getCenter()), start: start }); var bounce = ol.animation.bounce({ duration: duration, resolution: 2 * view.getResolution(), start: start }); var rotate = ol.animation.rotate({ duration: duration, rotation: -4 * Math.PI, start: start }); map.beforeRender(pan, bounce, rotate); view.setCenter(madrid); }, false); </script> </body> </html>