Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/index.html

Created November 18, 2017 20:39
Show Gist options
  • Save rustyb/9c822b08f67247e6ad61f3fad97577c9 to your computer and use it in GitHub Desktop.
Save rustyb/9c822b08f67247e6ad61f3fad97577c9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sentinel Lambda Tiler</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<link href="https://api.mapbox.com/mapbox-assembly/v0.2.0/assembly.min.css" rel="stylesheet">
<script async defer src="https://api.mapbox.com/mapbox-assembly/v0.2.0/assembly.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="main-container">
<div class="right-panel">
<div class="close-button" title="close" onclick="closeRightPanel()">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-close'/></svg>
</div>
<div class="right-panel-content">
<div class="list-img">
<span class="nodata-error">Click on Tile</span>
</div>
<div class="img-display-options">
<span>RGB Combination </span>
<div class='toggle-group mr18'>
<label class='toggle-container'>
<input data='11,8A,04' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>vegetation analysis</div>
</label>
<label class='toggle-container'>
<input data='12,11,04' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>urban</div>
</label>
<label class='toggle-container'>
<input data='04,03,02' checked name='toggle' type='radio'/>
<div class='btn btn--stroke btn--darken50 toggle'>natural color</div>
</label>
<label class='toggle-container'>
<input data='08,04,03' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>false color</div>
</label>
<label class='toggle-container'>
<input data='8A,11,04' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>land/water</div>
</label>
<label class='toggle-container'>
<input data='12,11,8A' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>atmospheric penetration</div>
</label>
<label class='toggle-container'>
<input data='11,8A,02' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>agriculture</div>
</label>
<label class='toggle-container'>
<input data='8A,11,02' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>healthy veg</div>
</label>
<label class='toggle-container'>
<input data='12,8A,04' name='toggle' type='radio' />
<div class='btn btn--stroke btn--darken50 toggle'>shortwave_ir</div>
</label>
</div>
<span>Histogramm cut </span>
<div class="inputHisto">
<input id="minCount" class='input col--2' value='5' />
<span class="col--2 center"> - </span>
<input id="maxCount" class='input col--2' value='95' />
<span class="col--2 pl6"> %</span>
<button class='btn' onclick="updateMetadata()">Apply</button>
</div>
<button id='btn-clear' class='btn'><span>Clear</span></button>
</div>
<span class="spin none">
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</span>
</div>
</div>
<div id="map" class="map">
<div class="sentinel-info none">
<span class="s2id"></span>
<span class="s2date"></span>
<span class="s2rgb"></span>
</div>
<div class="loading-map">
<div class="middle-center">
<span>Loading</span>
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</div>
</div>
<span class="metaloader none">
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</span>
<span class="errorMessage none">
<svg class='icon icon--l'><use xlink:href='#icon-alert'/></svg>
<span >Error</span>
</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src='https://npmcdn.com/@turf/[email protected]/turf.min.js'></script>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment