1 | var map, filter, filterStrategy; |
---|
2 | var animationTimer; |
---|
3 | var currentDate; |
---|
4 | var startDate = new Date(1272736800000); // lower bound of when values |
---|
5 | var endDate = new Date(1272737100000); // upper value of when values |
---|
6 | var step = 8; // sencods to advance each interval |
---|
7 | var interval = 0.125; // seconds between each step in the animation |
---|
8 | |
---|
9 | function startAnimation() { |
---|
10 | if (animationTimer) { |
---|
11 | stopAnimation(true); |
---|
12 | } |
---|
13 | if (!currentDate) { |
---|
14 | currentDate = startDate; |
---|
15 | } |
---|
16 | var spanEl = document.getElementById("span"); |
---|
17 | var next = function() { |
---|
18 | var span = parseInt(spanEl.value, 10); |
---|
19 | if (currentDate < endDate) { |
---|
20 | filter.lowerBoundary = currentDate; |
---|
21 | filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000)); |
---|
22 | filterStrategy.setFilter(filter); |
---|
23 | currentDate = new Date(currentDate.getTime() + (step * 1000)); |
---|
24 | } else { |
---|
25 | stopAnimation(true); |
---|
26 | } |
---|
27 | }; |
---|
28 | animationTimer = window.setInterval(next, interval * 1000); |
---|
29 | } |
---|
30 | |
---|
31 | function stopAnimation(reset) { |
---|
32 | window.clearInterval(animationTimer); |
---|
33 | animationTimer = null; |
---|
34 | if (reset === true) { |
---|
35 | currentDate = null; |
---|
36 | } |
---|
37 | } |
---|
38 | |
---|
39 | // add behavior to elements |
---|
40 | document.getElementById("start").onclick = startAnimation; |
---|
41 | document.getElementById("stop").onclick = stopAnimation; |
---|
42 | var spanEl = document.getElementById("span"); |
---|
43 | |
---|
44 | var mercator = new OpenLayers.Projection("EPSG:900913"); |
---|
45 | var geographic = new OpenLayers.Projection("EPSG:4326"); |
---|
46 | map = new OpenLayers.Map("map"); |
---|
47 | |
---|
48 | var osm = new OpenLayers.Layer.OSM(); |
---|
49 | |
---|
50 | filter = new OpenLayers.Filter.Comparison({ |
---|
51 | type: OpenLayers.Filter.Comparison.BETWEEN, |
---|
52 | property: "when", |
---|
53 | lowerBoundary: startDate, |
---|
54 | upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000)) |
---|
55 | }); |
---|
56 | |
---|
57 | filterStrategy = new OpenLayers.Strategy.Filter({filter: filter}); |
---|
58 | |
---|
59 | var flights = new OpenLayers.Layer.Vector("Aircraft Locations", { |
---|
60 | projection: geographic, |
---|
61 | strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy], |
---|
62 | protocol: new OpenLayers.Protocol.HTTP({ |
---|
63 | url: "kml-track.kml", |
---|
64 | format: new OpenLayers.Format.KML({ |
---|
65 | extractTracks: true |
---|
66 | //,extractStyles: true // use style from KML instead of styleMap below |
---|
67 | }) |
---|
68 | }), |
---|
69 | styleMap: new OpenLayers.StyleMap({ |
---|
70 | "default": new OpenLayers.Style({ |
---|
71 | graphicName: "circle", |
---|
72 | pointRadius: 3, |
---|
73 | fillOpacity: 0.25, |
---|
74 | fillColor: "#ffcc66", |
---|
75 | strokeColor: "#ff9933", |
---|
76 | strokeWidth: 1 |
---|
77 | }) |
---|
78 | }), |
---|
79 | renderers: ["Canvas", "SVG", "VML"] |
---|
80 | }); |
---|
81 | |
---|
82 | map.addLayers([osm, flights]); |
---|
83 | map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8); |
---|
84 | |
---|