Permalink
Fetching contributors…
Cannot retrieve contributors at this time
227 lines (187 sloc) 5.81 KB
<!DOCTYPE html>
<html>
<head>
<title>Aeris.js - Animation Sync Example</title>
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="../css/example.css"/>
<link rel="shortcut icon" type="image/x-icon" href="../weather.ico"/>
<script type="text/javascript" src="http://cdn.aerisjs.com/aeris.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="../apikeys.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<div id="loading">Loading animation layers... <br>
<span id="progress"></span>% done.
</div>
<div class="prompt">
<h1>Example: Animation Sync</h1>
<h2>Aeris.js</h2>
<p>
In order to animate multiple tile layers, use an <code>aeris.maps.animations.AnimationSync</code> object. The <code>AnimationSync</code> keeps multiple animations on the same timeline.
</p>
</div>
<div class="controls">
<ul>
<li>
</li>
<li class="animationControls">
<button id="prev"><img src="../images/prev.png"/></button>
<button id="start"><img src="../images/play.png"/></button>
<button id="next"><img src="../images/next.png"/></button>
<button id="pause"><img src="../images/pause.png"/></button>
<button id="stop"><img src="../images/stop.png"/></button>
</li>
<li>
Time: <span id="currentTime"></span>
<br>
<input id="time" type="range" step="6000"/>
</li>
<li>
<input class="layerToggle" type="checkbox" id="radar" checked/>
Radar
</li>
<li>
<input class="layerToggle" type="checkbox" id="satellite" checked/>
Satellite
</li>
</ul>
</div>
<script type="text/javascript">
var map, radar, satellite;
var animationSync;
aeris.config.set({
apiId: apiKeys.aeris.id,
apiSecret: apiKeys.aeris.secret
})
map = new aeris.maps.Map('map-canvas', {
zoom: 5,
center: [40, -95]
});
radar = new aeris.maps.layers.Radar();
satellite = new aeris.maps.layers.Satellite();
// Pass the animation objects to an AnimationSync
// The AnimationSync uses the same interface as the
// AerisTile animation objects.
var from = Date.now() - 1000 * 60 * 60 * 6;
var to = Date.now();
animationSync = new aeris.maps.animations.AnimationSync([
radar,
satellite
], {
from: from, // 2 hours ago
to: to,
limit: 15,
speed: 400
});
radar.setMap(map);
satellite.setMap(map);
$('#loading').show();
// You can start the animation right away.
// The animation may start out choppy, but as layers are
// loaded, they will be added to the animation.
animationSync.start();
// Alternatively, you could preload the animation:
/*animationSync.preload();
animationSyc.on('load:progress', function(progress) {
if (progress >= 0.75) {
animationSync.start();
}
});*/
// The animation object triggers
// load:* events, to update listeners on loading progress.
animationSync.on({
'load:progress': function(progress) {
$('#progress').text((progress * 100).toFixed(1));
},
'load:complete': function() {
$('#loading').delay(500).hide();
},
// When the map bounds change,
// tiles must be reloaded.
// This fires a 'load:reset' event,
// and then 'load:progress' events as the
// tiles reload
'load:reset': function() {
$('#loading').show();
},
'load:error': function(err) {
throw err;
}
});
// Display the current time of the animation
// A 'change:times' event is triggered
// with a date object corresponding to the
// current animation frame.
animationSync.on('change:time', function(date) {
// Update the hh:mm display
var formattedTime = date.toTimeString().replace(/.*(\d{2}:\d{2})(:\d{2}).*/, "$1");
$('#currentTime').text(formattedTime);
// Update the position of the time range input
$('#time').val(date.getTime());
});
// Update the HTML slider, to use the animations min/max bounds
function updateSliderRange() {
$('#time').attr('min', animationSync.getFrom().getTime());
$('#time').attr('max', animationSync.getTo().getTime());
}
updateSliderRange();
// The AnimationSync object "autoUpdates" -- as new weather images
// become available, the animation will shift forward in time to display
// the most recent weather.
// By listening to the 'change:from' and 'change:to' events, we can
// keep our range element in sync with the animation time.
animationSync.on('change:from change:to', updateSliderRange());
// Animation controls
$('#start').click(function() {
animationSync.start();
});
$('#stop').click(function() {
animationSync.stop();
});
$('#pause').click(function() {
animationSync.pause();
});
$('#prev').click(function() {
animationSync.pause();
// Go back 15 minutes
animationSync.previous(1000 * 60 * 15);
});
$('#next').click(function() {
animationSync.pause();
// Go forward 15 minutes
animationSync.next(1000 * 60 * 15);
});
// Time range slider
$('#time').on('input', function() {
var time = parseInt($(this).val());
animationSync.pause();
animationSync.goToTime(time);
});
// Toggle animation layers
//
// Layers can be added and removed
// using setMap
$('#satellite').change(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
satellite.setMap(map);
}
else {
satellite.setMap(null);
}
});
$('#radar').change(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
radar.setMap(map);
}
else {
radar.setMap(null);
}
});
</script>
</body>
</html>