85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
var map, filter, filterStrategy;
|
|
var animationTimer;
|
|
var currentDate;
|
|
var startDate = new Date(1272736800000); // lower bound of when values
|
|
var endDate = new Date(1272737100000); // upper value of when values
|
|
var step = 8; // sencods to advance each interval
|
|
var interval = 0.125; // seconds between each step in the animation
|
|
|
|
function startAnimation() {
|
|
if (animationTimer) {
|
|
stopAnimation(true);
|
|
}
|
|
if (!currentDate) {
|
|
currentDate = startDate;
|
|
}
|
|
var spanEl = document.getElementById("span");
|
|
var next = function() {
|
|
var span = parseInt(spanEl.value, 10);
|
|
if (currentDate < endDate) {
|
|
filter.lowerBoundary = currentDate;
|
|
filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000));
|
|
filterStrategy.setFilter(filter);
|
|
currentDate = new Date(currentDate.getTime() + (step * 1000))
|
|
} else {
|
|
stopAnimation(true);
|
|
}
|
|
};
|
|
animationTimer = window.setInterval(next, interval * 1000);
|
|
}
|
|
|
|
function stopAnimation(reset) {
|
|
window.clearInterval(animationTimer);
|
|
animationTimer = null;
|
|
if (reset === true) {
|
|
currentDate = null;
|
|
}
|
|
}
|
|
|
|
// add behavior to elements
|
|
document.getElementById("start").onclick = startAnimation;
|
|
document.getElementById("stop").onclick = stopAnimation;
|
|
var spanEl = document.getElementById("span");
|
|
|
|
var mercator = new OpenLayers.Projection("EPSG:900913");
|
|
var geographic = new OpenLayers.Projection("EPSG:4326");
|
|
map = new OpenLayers.Map("map");
|
|
|
|
var osm = new OpenLayers.Layer.OSM();
|
|
|
|
filter = new OpenLayers.Filter.Comparison({
|
|
type: OpenLayers.Filter.Comparison.BETWEEN,
|
|
property: "when",
|
|
lowerBoundary: startDate,
|
|
upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
|
|
});
|
|
|
|
filterStrategy = new OpenLayers.Strategy.Filter({filter: filter});
|
|
|
|
var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
|
|
projection: geographic,
|
|
strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
|
|
protocol: new OpenLayers.Protocol.HTTP({
|
|
url: "kml-track.kml",
|
|
format: new OpenLayers.Format.KML({
|
|
extractTracks: true
|
|
//,extractStyles: true // use style from KML instead of styleMap below
|
|
})
|
|
}),
|
|
styleMap: new OpenLayers.StyleMap({
|
|
"default": new OpenLayers.Style({
|
|
graphicName: "circle",
|
|
pointRadius: 3,
|
|
fillOpacity: 0.25,
|
|
fillColor: "#ffcc66",
|
|
strokeColor: "#ff9933",
|
|
strokeWidth: 1
|
|
})
|
|
}),
|
|
renderers: ["Canvas", "SVG", "VML"]
|
|
});
|
|
|
|
map.addLayers([osm, flights]);
|
|
map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8);
|
|
|