-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
287 lines (277 loc) · 18.1 KB
/
index.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html ng-app="habpops.core" ng-strict-di>
<head>
<title>Intermountain West Joint Venture</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="lib/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="lib/ext-3.4.0/ext-all.js"></script>
<script src="lib/OpenLayers-2.11/OpenLayers.js"></script>
<script src="lib/GeoExt/lib/GeoExt.js" ></script>
<script src="dist/app.js"></script>
</head>
<body>
<div id="iwjvContainer" ng-controller="HabpopController as vm">
<div id="siteTitleContainer">
<h1>Intermountain West Joint Venture Mapping Tool</h1>
<a href="http://iwjv.org/" target="_blank"><img src="uploads/img/IWJV_logo.png" /></a>
</div>
<div id="subtitle"><h2>Habitats and Populations Strategies (HABPOPS) Database</h2></div>
<div id="iwjvBodyContainer">
<div id="gxmap"></div>
<div id="panel" class="olControlEditingToolbar"></div>
<div id="mapSidebarRightContainer" style="padding: 0 20px;">
<div>
<button type="button" class="defaultButton" ng-click="vm.showSpecies = false" ng-show="vm.showSpecies">Show Tool Instructions</button>
<button type="button" class="defaultButton" ng-click="vm.showSpecies = true" ng-show="!vm.showSpecies">Show Bird Species and Regions</button>
</div>
<div class="mapInstructionsView" ng-show="!vm.showSpecies">
<p>
The HABPOPS Mapping Tool was created to help resource and land managers develop and implement habitat
conservation projects that are both strategic and effective.
Planners can explore the potential impact that various restoration and management plans have on bird populations for
Bird Conservation Region's (BCR) 9, 10
and 16 within the Intermountain West Joint Venture (IWJV) region.
</p>
<strong>Using the tool</strong>
<br>
<p>
Click on the map to place a marker and generate a report
for the selected state/BCR including habitat composition, populations of bird species,
and a worksheet for habitat conditions. The worksheet estimates the effects of various habitat conservation efforts on regional bird populations.
<b>Scroll down to view the report</b> after you have placed a marker. To select
a different region, click the map to move the marker to that location.
</p>
<p>Information about the species' region and habitat preferences is available by using the related button above.</p>
<strong>Resources</strong>
<p>
<a href="http://iwjv.org/sagebrush-landscape-planning" target="_blank">Sagebrush Landscape Planning and the IWJV</a>
<br>
<a href="uploads/HABPOPS Desktop 1.33.accdb">HABPOPS Desktop Tool</a> - View population estimates,
objectives and habitat summaries by species, state, or BCR, and includes the tabular data.
<br>
<a href="uploads/Baseline Data by MCC August 2013.xlsx">HABPOPS Raw Data</a> - Raw data used for the tool's calculations.
<br>
<a href="uploads/HABPOPS Overview for Web Tool.docx">HABPOPS Map Tool Specification</a> - Detailed outline of how this tool works, including how calculations are made.
</p>
<hr>
<p>
This tool was created as a collaborative effort between <a href="http://iwjv.org/">IWJV</a>,
the <a href="http://abcbirds.org/">American Bird Conservancy (ABC)</a>,
and <a href="http://www.pointblue.org/">Point Blue Conservation Science.</a>
It is based on an original concept (HABS) developed by the <a href="http://pljv.org/">Playa Lakes Joint Venture.</a>
</p>
</div>
<div class="mapSpeciesView" ng-show="vm.showSpecies">
<div>
<p>
Select a species to see related region an habitat information.
</p>
</div>
<div class="speciesListWrapper">
<button type="button" class="defaultButton" ng-click="vm.showBirdInfo('sasp')">Sagebrush Sparrow</button>
<button type="button" class="defaultButton" ng-click="vm.showBirdInfo('sath')">Sage Thrasher</button>
<button type="button" class="defaultButton" ng-click="vm.showBirdInfo('brsp')">Brewer's Sparrow</button>
<button type="button" class="defaultButton" ng-click="vm.showBirdInfo('lbcu')">Long-billed Curlew</button>
<button type="button" class="defaultButton" ng-click="vm.showBirdInfo('grsp')">Grasshopper Sparrow</button>
</div>
<div>
<div id="birdImgInfo" class="birdInfo birdInfoBackground-{{vm.selectedBirdInfoSpecies}}">
<div ng-show="vm.selectedBirdInfoSpecies === 'brsp'">
<span class="birdInfoTotalPopulation brsp">Brewers Sparrow</span>
<span class="birdInfoHabitatsConditions brsp">
Tall, dense or patchy sagebrush<br>>10% sagebrush cover<br>
Some bare ground with >10% native herbaceous<br>
Minimum block size of 8ha
</span>
</div>
<div ng-show="vm.selectedBirdInfoSpecies === 'grsp'">
<span class="birdInfoTotalPopulation grsp">Grasshopper Sparrow</span>
<span class="birdInfoHabitatsConditions grsp">
Grasslands, preferably tall bunchgrass<br>
Moderate litter levels, low shrub density<br>
<10% woody vegetation
</span>
</div>
<div ng-show="vm.selectedBirdInfoSpecies === 'lbcu'">
<span class="birdInfoTotalPopulation lbcu">Long-billed Curlew</span>
<span class="birdInfoHabitatsConditions lbcu">
Open, patchy sagebrush<br>Grasslands with average heights <30cm<br>
Prefer proximity to shallow wetlands/wet meadows
</span>
</div>
<div ng-show="vm.selectedBirdInfoSpecies === 'sasp'">
<span class="birdInfoTotalPopulation sasp">Sagebrush Sparrow</span>
<span class="birdInfoHabitatsConditions sasp">
Sagebrush cover 15-30%, 50-100 cm tall<br>
Tall, dense or patchy sagebrush
</span>
</div>
<div ng-show="vm.selectedBirdInfoSpecies === 'sath'">
<span class="birdInfoTotalPopulation sath">Sage Thrasher</span>
<span class="birdInfoHabitatsConditions sath">
Tall, dense or patchy sagebrush<br>Less grass cover, some bare ground<br>
Prefers 20-40% sagebrush cover, >55cm tall
</span>
</div>
</div>
<div id="photoCredit">
<span ng-show="vm.selectedBirdInfoSpecies.length > 0">Photo by</span>
<span ng-show="vm.selectedBirdInfoSpecies === 'brsp'">Greg Lavaty</span>
<span ng-show="vm.selectedBirdInfoSpecies === 'grsp'">Chuck Carlson</span>
<span ng-show="vm.selectedBirdInfoSpecies === 'lbcu'">Bob Martinka</span>
<span ng-show="vm.selectedBirdInfoSpecies === 'sasp' || vm.selectedBirdInfoSpecies === 'sath'">Photo by Greg Lavaty</span>
</div>
</div>
</div>
</div>
<!--
STATEGON INFORMATION (DETAILS)
-->
<div id="stategonInformationContainer" ng-show="vm.stategon">
<div>
<h2>Regional Habitats</h2>
<!--
<a ng-href="http://data.pointblue.org/partners/iwjv/uploads/img/{{vm.stategon.code}}.jpg" target="_blank">
<img ng-src="http://data.pointblue.org/partners/iwjv/uploads/img/{{vm.stategon.code}}.jpg" style="width:250px;float:left;margin-right: 20px;">
</a>
-->
Bird Conservation Region: {{vm.stategon.details.bcr}}, {{vm.stategon.details.state}}
<br>
Total Habitat Acreage: {{vm.stategon.details.acres}}
<br>
<a ng-href="{{vm.stategon.details.iwjv}}" target="_blank" class="iwjv">{{vm.conservationPlans[vm.stategon.details.iwjv]}} - PDF</a><br>
<a ng-href="{{vm.stategon.details.swap}}" target="_blank" class="swap">Regional Wildlife Action Plan - PDF</a><br>
<a ng-href="http://data.pointblue.org/partners/iwjv/uploads/img/{{vm.stategon.code}}.jpg" target="_blank">Region Map</a>
</div>
<div ng-repeat="habitatSets in vm.stategon.habitats.byconditionset" style="clear:both;">
<table class="stategonInfoTable" cellspacing="0">
<thead>
<tr>
<th ng-if="$index === 0">Habitat Type</th>
<th ng-if="$index !== 0"></th>
<th ng-repeat="condtion in habitatSets.setConditions">{{condtion}}</th>
<th ng-if="habitatSets.setConditions.length < 2">{{condtion}}</th>
<th ng-if="habitatSets.setConditions.length < 3">{{condtion}}</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="habitat in habitatSets.setData" ng-class="{odd:($index+1)%2!==0}">
<td>{{habitat.ASSOCIATION}}</td>
<td ng-repeat="conditiontotal in habitat.CONDITION_TOTALS track by $index" class="total">{{conditiontotal}}</td>
<td ng-if="habitat.CONDITION_TOTALS.length < 2" class="total"></td>
<td ng-if="habitat.CONDITION_TOTALS.length < 3" class="total"></td>
<td class="total">{{habitat.TOTAL}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--
SPECIES INFORMATION (FOR STATEGON)
-->
<div id="speciesInformationContainer" ng-show="vm.stategon">
<h2>Species Populations</h2>
<table id="speciesTable" cellspacing="0">
<thead>
<tr>
<th>Species Name</th>
<th>Occupied Acres</th>
<th>Population Estimate</th>
<th>Population Objective</th>
<th>Objective Increase</th>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="species in vm.stategon.speciestable" class="speciesTableRow" ng-class="{odd:($index+1)%2!==0}">
<td>{{species.SpeciesName}}</td>
<td>{{species.OccupiedAcres}}</td>
<td>{{species.PopEstimate}}</td>
<td>{{species.PopObjective}}</td>
<td>{{species.ObjectiveIncrease}}</td>
<td class="before">{{vm.estimate.before[species.SPECIES]}}</td>
<td class="after">{{vm.estimate.after[species.SPECIES]}}</td>
</tr>
</tbody>
</table>
</div>
<!--
POPULATION WORKSHEET
-->
<div id="populationWorksheetsContainer" ng-show="vm.stategon">
<h2>Population Worksheet</h2>
<p>
Enter acres <b>below</b> for each habitat you have (before) and will restore (after), then select 'calculate'.<br>
Estimates appear in before/after columns of Species Population table, <b>above</b>, for those species occurring in the location selected.<br>
For descriptions of the habitats/conditions, click on the links in the worksheet <b>below</b>.
</p>
<div class="calculateButtonContainer">
<button class="defaultButton" type="button" ng-click="vm.clearAll()">Clear All</button>
<button class="defaultButton" type="button" ng-click="vm.submitWorksheets()">Calculate</button>
</div>
<div class="worksheetContainer" ng-repeat="habitatSets in vm.stategon.habitats.byconditionset" ng-init="parentIndex = $index" style="clear: both;">
<table class="worksheetTable" cellspacing="0">
<thead>
<tr ng-if="$index === 0">
<th>Habitat Type</th>
<th colspan="3" class="before">Condition Before<br>(Acres)</th>
<th colspan="3" class="after">Condition After<br>(Acres)</th>
</tr>
<tr>
<th> </th>
<!-- before columns -->
<th ng-repeat="condition in habitatSets.setConditions" class="before">{{condition}}</th>
<th ng-if="habitatSets.setConditions.length < 2" class="before"></th>
<th ng-if="habitatSets.setConditions.length < 3" class="before"></th>
<!-- after columns -->
<th ng-repeat="condition in habitatSets.setConditions" class="after">{{condition}}</th>
<th ng-if="habitatSets.setConditions.length < 2" class="after"></th>
<th ng-if="habitatSets.setConditions.length < 3" class="after"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="habitat in habitatSets.setData" ng-init="habitatIndex = $index" ng-class="{odd:($index+1)%2!==0}">
<td><a ng-href="uploads/pdf/{{habitat.LINK}}" target="_blank">{{habitat.ASSOCIATION}}</a></td>
<!-- before columns -->
<td ng-repeat="condition in habitat.setConditionsBefore" class="before">
<input type="number" ng-model="vm.worksheetModels['before'][habitat.MASTERCODE + '.' + ($index + 1)]"
title="Acres of {{habitat.ASSOCIATION}} as {{habitatSets.setConditions[$index]}} (before)">
</td>
<td ng-if="habitat.CONDITION_TOTALS.length < 2" class="before"></td>
<td ng-if="habitat.CONDITION_TOTALS.length < 3" class="before"></td>
<!-- after columns -->
<td ng-repeat="condition in habitat.setConditionsAfter" class="after">
<input type="number" ng-model="vm.worksheetModels['after'][habitat.MASTERCODE + '.' + ($index + 1)]"
title="Acres of {{habitat.ASSOCIATION}} as {{habitatSets.setConditions[$index]}} (after)">
</td>
<td ng-if="habitat.CONDITION_TOTALS.length < 2" class="after"></td>
<td ng-if="habitat.CONDITION_TOTALS.length < 3" class="after"></td>
</tr>
</tbody>
</table>
</div>
<div class="calculateButtonContainer">
<button class="defaultButton" type="button" ng-click="vm.clearAll()">Clear All</button>
<button class="defaultButton" type="button" ng-click="vm.submitWorksheets()">Calculate</button>
</div>
</div>
</div>
<div class="footer">
<div id="prbo"><a href="http://www.pointblue.org/" target="_blank" ><img src="images/PB_logo_notag_sm90.jpg"></a></div>
<div id="abc"><a href="http://www.abcbirds.org/" target="_blank" ><img src="./uploads/img/ABC_logo.jpg" /></a></div>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-40690497-30']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>