-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile.html
148 lines (119 loc) · 7.55 KB
/
mobile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Types of Forest Communities</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css">
<style>
html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
.acmeButton .dijitButtonNode {
background: #CC9900 !important;
color: white !important;
padding: 2px !important;
font-size: small !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
border: 2px inset rgb(96,96,96);
}
</style>
<link rel="stylesheet" href="css/jquery.iviewer.css" />
<link type="text/css" rel="stylesheet" href="d3/cluster_style.css"/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54749356-1', 'auto');
ga('send', 'pageview');
</script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://js.arcgis.com/3.10/"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<!--<script type="text/javascript" src="jquery.js" ></script>-->
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="scripts/jquery.iviewer.js" ></script>
<script type="text/javascript" src="d3/cluster_dendrogram_mobile.js"></script>
</head>
<body class="claro" style="background-color: #336633">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="background-image: url('img/forest-background2.png');">
<div id="logos" style="position: absolute; left: 0px; top: 0px; width:80px; background-color: #85a262; height:100% ">
<div style="position: absolute;left: 20px;top: 10px;background-color: #85a262;"><img src="img/usfsTransparent.png" width="38" height="40"/> </div>
<div style="position: absolute;left: 8px;top: 50px;background-color: #85a262;"><img src="img/esri-10GlobeLogo_sRGBRev.png" width="64" height="29"/> </div>
</div>
<div id="top-pane-title" style="position: absolute; left: 80px; top: 0px;width:150px; background-color: #1e4004; height:100% ">
</br>
Types of Forest Communities
</div>
<div id="snippet0" style="position: absolute; left: 250px; top: 12px; width: 300px">
Forest communities are made up of distinct
assemblages of plant species. These communities
are distributed quite variably across the landscape.
</div>
<!--<div style="position: absolute;left: 580px;top: 45px;"><img src="img/usfsTransparent.png" width="38" height="40"/> </div>-->
<!--<div style="position: absolute;left: 615px;top: 50px;"><img src="img/esri-10GlobeLogo_sRGBRev.png" width="64" height="29"/> </div>-->
</div>
<!--<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">-->
<!--<div style="position: absolute; left: 0px; top:0px; width: 700px; height:98%; overflow: hidden" id="dentrogram">-->
<!--</div>-->
<!--</div>-->
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Function List', closable:false, open:false">
<table>
<tr>
<td><button data-dojo-type="dijit/form/Button" id="dendrogramButton" type="button">Show Dendrogram</button> </td>
</tr>
<tr>
<td><button data-dojo-type="dijit/form/Button" id="listButton" type="button">Show List View</button> </td>
</tr>
<tr>
<td><button data-dojo-type="dijit/form/Button" id="legendButton" type="button">Show Legend</button> </td>
</tr>
<tr>
<td><button data-dojo-type="dijit/form/Button" id="descButton" type="button">Show Description</button> </td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dendrogramContainer"
title="A floating pane" data-dojo-props="resizable:true, dockable:false, title:'Dendrogram', closable:false"
style="position:absolute;bottom:160px;left:10px;width:510px;height:500px; z-Index:999;">
<div data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"acmeButton"' id="dendrogramDescButton" style="position:absolute; right:8px; color:yellow;">Definition</div>
<!--<div id="dendrogramContainer" style="display: block">-->
<div id="dendrogram" style="overflow:auto;width:100%; height: 100%;background-color: #1e4004"></div>
</div>
<div id="dendrogramDescContainer" style="display: block"></div>
<div id="dendrogramDescContainer2" style="display: block"></div>
<div id="legendContainer" style="display: block"></div>
<div id="descriptionContainer" style="display: block"></div>
<div data-dojo-type="dojox.layout.FloatingPane" id="listViewContainer"
title="A floating pane" data-dojo-props="resizable:true, dockable:false, title:'Dendrogram List View', closable:false"
style="position:absolute;bottom:160px;left:10px;width:500px;height:500px; z-Index:999;">
<div data-dojo-type="dijit.form.Button" data-dojo-props='baseClass:"acmeButton"' id="dendrogramDescButton2" style="position:absolute; right:8px; color:yellow;">Definition</div>
<!--<div id="listViewContainer" style="display: block">-->
<div id="dendrogramListView" style="overflow:auto;width:100%; height: 100%;background-color: #1e4004"></div>
</div>
</div>
<!--<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">-->
<!--<div id="dataSource"></div>-->
<!--</div>-->
</div>
</body>
</html>