mirror of
https://github.com/NASAWorldWind/WebWorldWind.git
synced 2025-12-08 19:46:18 +00:00
183 lines
5.9 KiB
HTML
183 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--NOTE: Most Web WorldWind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
|
|
<!--required by Web WorldWind. See SimplestExample.html for an example of using Web WorldWind without them.-->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
|
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
|
|
<script data-main="NDVIViewer/NDVIViewer" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
|
|
|
|
<style>
|
|
table tr td:empty {
|
|
width: 5px;
|
|
}
|
|
table tr th:empty {
|
|
width: 5px;
|
|
}
|
|
|
|
/* tell the SVG path to be a thin blue line without any area fill */
|
|
path {
|
|
stroke: steelblue;
|
|
stroke-width: 1;
|
|
fill: none;
|
|
}
|
|
|
|
.axis {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.x.axis line {
|
|
stroke: lightgrey;
|
|
}
|
|
|
|
.x.axis .minor {
|
|
stroke-opacity: .5;
|
|
}
|
|
|
|
.x.axis path {
|
|
display: none;
|
|
}
|
|
|
|
.y.axis line, .y.axis path {
|
|
fill: none;
|
|
stroke: #000;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="jumbotron hidden-xs">
|
|
<h1 style="text-align:center">WorldWind NDVI Viewer</h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<h4>Projection</h4>
|
|
<div class="dropdown" id="projectionDropdown">
|
|
</div>
|
|
<br>
|
|
|
|
<h4>Layers</h4>
|
|
<div class="list-group" id="layerList">
|
|
</div>
|
|
<br>
|
|
<div id="surfacesStatus">
|
|
<h4>NDVI</h4>
|
|
</div>
|
|
<h5>Select region</h5>
|
|
<select id="select-region">
|
|
</select>
|
|
<h5>Change datasource date</h5>
|
|
<div id="scene-slider" style="height:11px;width:200px"></div>
|
|
<p>
|
|
<label>Datasource date:</label>
|
|
<input type="text" id="scene-date" readonly style="border:0; color:#f6931f; font-weight:bold;">
|
|
</p>
|
|
<h5>Change surface transparency</h5>
|
|
<div id="transparency-slider" style="height:11px;width:200px"></div>
|
|
<p>
|
|
<label>Opacity:</label>
|
|
<input type="text" id="transparency" readonly style="border:0; color:#f6931f; font-weight:bold;">
|
|
</p>
|
|
<div>
|
|
<h4>NDVI legend</h4>
|
|
<table>
|
|
<tr>
|
|
<td bgcolor="#B3EBFF"></td>
|
|
<td></td>
|
|
<td>0.0  -  25.5 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#FFFFF0"></td>
|
|
<td></td>
|
|
<td>25.5  -  51.0</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#FFFFE5"></td>
|
|
<td></td>
|
|
<td>51.0  -  76.5 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#F6FBB9"></td>
|
|
<td></td>
|
|
<td>76.5  -  102.0 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="D9F0A2"></td>
|
|
<td></td>
|
|
<td>102.0  -  127.5 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#ACDD8E"></td>
|
|
<td></td>
|
|
<td>127.5  -  153.0</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#40AB5C"></td>
|
|
<td></td>
|
|
<td>153.0  -  178.5 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#238342"></td>
|
|
<td></td>
|
|
<td>175.5  -  204.0 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#005929"></td>
|
|
<td></td>
|
|
<td>204.0  -  229.5 </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td bgcolor="#004529"></td>
|
|
<td></td>
|
|
<td>229.5  -  255.0</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<h4>Destination</h4>
|
|
<div class="input-group" id="searchBox">
|
|
<input type="text" class="form-control" placeholder="GoTo" id="searchText"/>
|
|
<span class="input-group-btn">
|
|
<button id="searchButton" class="btn btn-primary" type="button">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-9" id="globe">
|
|
<canvas id="canvasOne" width="1000" height="1000"
|
|
style="width: 100%; height: auto; background-color: black;">
|
|
Your browser does not support HTML5 Canvas.
|
|
</canvas>
|
|
</div>
|
|
|
|
<div id="graph" class="col-sm-9"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |