|
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
|
|
3
|
|
|
4
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
5
|
<head>
|
|
6
|
<title>Mapbuilder Time Series Viewer</title>
|
|
7
|
<link rel='StyleSheet' type='text/css'
|
|
8
|
href='../../lib/skin/default/demoStyles.css' />
|
|
9
|
<style type="text/css">
|
|
10
|
#workspace {
|
|
11
|
height: 300px;
|
|
12
|
overflow: auto;
|
|
13
|
position: relative;
|
|
14
|
/* border: 1px solid blue;*/
|
|
15
|
background-color: rgb(240,240,240);
|
|
16
|
display: none;
|
|
17
|
}
|
|
18
|
#abstract {
|
|
19
|
margin: 0px;
|
|
20
|
}
|
|
21
|
</style>
|
|
22
|
<script>
|
|
23
|
// URL of Mapbuilder configuration file.
|
|
24
|
var mbConfigUrl='tsConfig.xml';
|
|
25
|
</script>
|
|
26
|
<script type="text/javascript" src="../../lib/Mapbuilder.js"></script>
|
|
27
|
</head>
|
|
28
|
<body onload="mbDoLoad()">
|
|
29
|
<div id="header">
|
|
30
|
<h1><a href="http://communitymapbuilder.org">MapBuilder</a> <!--Version-->1.5-rc2<!--VersionEnd--> Time Series
|
|
31
|
<!-- The version tag will be inserted into the comment tags above
|
|
32
|
during the build process. -->
|
|
33
|
Viewer</h1>
|
|
34
|
<!--This is for more complex pages <a href="" class="help">how to use this page</a></div>-->
|
|
35
|
</div>
|
|
36
|
<div id="middle">
|
|
37
|
<div id="exampleList"></div><!-- this is the container where the menubar will be drawn -->
|
|
38
|
<div id="mainbody">
|
|
39
|
<div class="left">
|
|
40
|
<h3>Explanation</h3>
|
|
41
|
This demo shows how to combine images with different timestamps to
|
|
42
|
create a movie. Since the images are all normal WMS servers you can pan
|
|
43
|
and zoom, just like any normal map. It includes movie buttons to fast
|
|
44
|
forward/backward, pause and stop the movie at any time.</div>
|
|
45
|
<div class="right">
|
|
46
|
<div id="timestampValue"/>
|
|
47
|
<table>
|
|
48
|
<tr>
|
|
49
|
<td valign="top">
|
|
50
|
<table>
|
|
51
|
<tr>
|
|
52
|
<td width="40%" id="tsButtonBar" align="left">
|
|
53
|
</td>
|
|
54
|
<td id="timestamp" align="right"></td>
|
|
55
|
</tr>
|
|
56
|
<tr>
|
|
57
|
<td colspan="2" valign="top">
|
|
58
|
<div id="mainMapPane"><noscript>this page requires Javascript to be enabled</noscript></div>
|
|
59
|
</td>
|
|
60
|
</tr>
|
|
61
|
<tr>
|
|
62
|
<td id="mainButtonBar" valign="top" align="left"></td>
|
|
63
|
<td width="60%" id="cursorTrack" align="right"></td>
|
|
64
|
</tr>
|
|
65
|
<tr>
|
|
66
|
<td id="timeRangeSelect" colspan="2" valign="top" align="left"></td>
|
|
67
|
</tr>
|
|
68
|
<tr>
|
|
69
|
<td id="legend" colspan="2" valign="top" align="left"/>
|
|
70
|
</tr>
|
|
71
|
</table>
|
|
72
|
</td>
|
|
73
|
<td>
|
|
74
|
<table>
|
|
75
|
<!-- table for left side of page - single column -->
|
|
76
|
<tr>
|
|
77
|
<td align="left">
|
|
78
|
<h2 id="mapTitle">Map Title</h2>
|
|
79
|
</td>
|
|
80
|
</tr>
|
|
81
|
<tr>
|
|
82
|
<td align="left" valign="top" id="abstract"></td>
|
|
83
|
</tr>
|
|
84
|
<tr>
|
|
85
|
<td valign="top" align="left">Other examples
|
|
86
|
<div id="collectionList" />
|
|
87
|
</td>
|
|
88
|
</tr>
|
|
89
|
<!-- Commented out for now; see MAP-492
|
|
90
|
<tr>
|
|
91
|
<td valign="top" align="left"><a
|
|
92
|
href="javascript:document.getElementById('workspace').style.display='block';config.loadModel('wmsCapTemplate','NASAwms.xml');">NASA
|
|
93
|
SVS Image Server</a> - a large collection of earth observation data.
|
|
94
|
Images are in fixed size so map zoom/pan functions are not allowed.
|
|
95
|
</td>
|
|
96
|
</tr>
|
|
97
|
-->
|
|
98
|
<tr>
|
|
99
|
<td valign="top" align="left">
|
|
100
|
<p id="wmsCapsUrlInput" />
|
|
101
|
</td>
|
|
102
|
</tr>
|
|
103
|
<tr>
|
|
104
|
<td valign="top" align="left">
|
|
105
|
<p id="workspace"></p>
|
|
106
|
</td>
|
|
107
|
</tr>
|
|
108
|
</table>
|
|
109
|
</td>
|
|
110
|
</tr>
|
|
111
|
</table>
|
|
112
|
</div>
|
|
113
|
</div>
|
|
114
|
</div>
|
|
115
|
<div id="footer">
|
|
116
|
|
|
117
|
</html>
|