Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/index.html

Created November 18, 2017 20:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rustyb/9c822b08f67247e6ad61f3fad97577c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rustyb/9c822b08f67247e6ad61f3fad97577c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rustyb created this gist Nov 18, 2017.
    137 changes: 137 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    <!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>