Lets Git This Going

Leave a comment

Initialization

The last few weeks of my placement have been focused on identifying the best publicly available datasets to identify physiological stress in trees from space.

This began with time spent in the JavaScript Google Earth Engine API visualizing datasets and developing ways of observing various indices. The ones that offered the best qualitative change with tree mortality were the Tasseled Cap wetness index and ALOS/PULSAR 2 derived Radar Forest Degradation index.

Following the dataset selection we have moved into working in Google Colab (similar to Jupyter notebooks). Here we’ve been working in Python 3 to develop ways of visualizing data in the notebooks and building temporal models. I’ve been following many scripting tutorials and working with contributions on Github.

Learning these new skills and debugging have been the greatest challenges of the past few weeks. A funny thing I’ve found with Google Colab environments is getting a script to work, then returning to it another day to find it doesn’t totally work anymore. Then I often identify the change I had made lower in the code that messed with the first few steps such as a directory change or duplicated variable. It’s a bit of a new world to someone with an introductory course in Python 2, but I’m enjoying it! I’ve found there are loads of ways to learn online if one’s willing.

Some preliminary data for your entertainment:
(copy and paste into textfile and save as whatever.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Preliminary Data Layers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>

    .map-overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      background: rgba(255, 255, 255, 1);
      margin-right: 20px;
      font-family: 'Quicksand', sans-serif;
      overflow: auto;
      border-radius: 3px;
    }

    #features {
      top: 0;
      height: 80px;
      left: 0;
      margin-top: 20px;
      width: 260px;
      text-align: center;
      vertical-align: middle;
      background: rgba(255, 255, 255, 0);

      -webkit-text-fill-color: white; /* Will override color (regardless of order) */
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #424243;
      font-family: 'Varela Round', sans-serif;
      font-size: 1.4em;
    }

    #logo {
        left: 0;
        bottom: 0;
        margin-bottom: 25px;
        margin-left: 20px;
        height: 60px;
        width: 60px;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0);
    }
    #menu {
        background: #F8AAAA;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }

    #menu a:last-child {
        border: none;
    }

    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #menu a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #3074a4;
    }

    .map-overlay-inner {
        padding: 5px;
    }

    .map-overlay label {
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

</style>

<body>

<div class='map-overlay' id='features'>
    <h2>The California Forest Observatory</h2>
</div>

<div class='map-overlay' id='logo'>
    <a href="https://salo.ai">
        <img src="https://salo.ai/assets/img/logo-white.png"></img>
    </a>
</div>

<nav id="menu"></nav>
<div id="map"></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam5kYW5pZWxzIiwiYSI6ImNqbWt0bGF4czAxNjIzcHBkdHJnMXNiazIifQ.iJWFtcOq-FpiIO9yTxQb8g';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/jndaniels/cjvrm3usb0lp11co6ex4elz6i',
    center: [-118.722390, 36.983732],
    zoom: 7.8
});

var toggleableLayerIds = [ 'SAR_Mosaic ', 'NDVI_Spring', 'NDVI_Latesrping', 'NDVI_Summer', 'SAVI_Summer', 'SAVI_LateSpring', 'SAVI_Spring'];
var layernames = [ 'SAR_Mosaic', 'NDVI Spring', 'NDVI Late Spring', 'SAVI Summer', 'SAVI Spring', 'SAVI Late Spring', 'SAVI Summer'];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();

        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

</script>

</body>
</html>

Leave a comment