index.html

<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
<!-- Licensed under the MIT License. -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>Building damage visualizer</title>

    <link href="css/leaflet.css" rel="stylesheet" />
    <link href="css/easy-button.css" rel="stylesheet" />
    <link href="css/leaflet-slider.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/noty.css" rel="stylesheet" />

    <script src="js/leaflet.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/noty.js" type="text/javascript"></script>
    <script src="js/leaflet-slider.js" type="text/javascript"></script>
    <script src="js/easy-button.js" type="text/javascript"></script>
    <script src="js/leaflet-side-by-side.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        body,
        table,
        tr,
        td,
        th,
        div,
        h1,
        h2,
        input {
            font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif;
            font-size: 11pt;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #help{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% , -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 40%;
            color:rgb(50, 50, 50);
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 15px rgb(0 0 0 / 20%);
            border-radius: 5px;
            z-index: 1000;
            padding: 20px;
        }

        .helpTitle {
            font-size: 2rem;
        }

        .helpParagraph {
            font-size: 1.5rem;
        }

        .helpList {
            font-size: 1.5rem;
        }

        .ctl {
            padding: 2px 10px 2px 10px;
            background: white;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            text-align: center;
        }

        .title {
            font-size: 18pt;
            font-weight: bold;
        }

        .src {
            font-size: 20pt;
        }

        .legend {
            background: rgba(255, 255, 255, 1.0) !important;
        }

        .noselect {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        a.leaflet-control-slider-toggle {
            width: 171px;
        }
    </style>

</head>

<body>

<div id="help" style="display:None;" class="noselect">
    <h1 class='helpTitle noselect'>Usage Instructions</h1>

    <p class='helpParagraph'>
        This is a simple tool for comparing satellite imagery from two points in time along side a modeled building damage overlay.
    </p>
    <p class='helpParagraph'>
        The imagery on the left half of the screen shows the imagery from the earlier point in time, while the imagery on the right half of the screen shows the imagery from the later point in time.
        Drag the slider in the middle of the screen left and right to show/hide more of either layer of imagery and see how the world changed between the two points in time.
    </p>
    <p class='helpParagraph'>
        The building damage predictions are shown in varying shades of red on top of the imagery over <i>both</i> layers. These damage estimates come from a machine learning model that takes both layers
        of imagery into account. You can turn off this overlay by clicking the checkbox in the bottom right-hand corner.
    </p>
    <p class='helpParagraph'>
        Keyboard shortcuts:
        <ul class="helpList">
            <li>'a' - moves the slider all the way to the left of the screen</li>
            <li>'s' - resets the slider to the middle of the screen</li>
            <li>'d' - moves the slider all the way to the right of the screen</li>
            <li>'space' - toggles the building damage layer visibility</li>
        </ul>
    </p>
</div>

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


<script type="text/javascript">

gHelpShown = false;
gDefaultConfig = "default_example.json";

var getTitleControl = function(location, imageryAttribution, license){
    var titleControl = L.control({ position: 'bottomleft' });
    titleControl.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'ctl');
        this.update();
        return this._div;
    };
    titleControl.update = function (props) {
        var content = "";
        content += "<div class='title'>Microsoft AI for Good - Building damage visualizer</div>";
        content += "<div style='text-align:left;'>";
        content += location + "<br/>";
        content += "Imagery: " + imageryAttribution + "<br/>";
        content += "License: " + license;
        content += "</div>";
        this._div.innerHTML = content;
    };
    return titleControl;
};

var getLegendControl = function(){
    var legendControl = L.control({position: 'bottomright'});
    legendControl.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'ctl legend');
        this.update();
        return this._div;
    };
    legendControl.update = function (props) {
        this._div.innerHTML = '<img src="images/legend.png">';
    };
    return legendControl;
};

var getLabelControl = function(date, label, position="topleft"){
    var labelControl = L.control({ position: position });
    labelControl.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'ctl src');
        this.update();
        return this._div;
    };
    labelControl.update = function (props) {
        this._div.innerHTML = label + "<br/><small>" + date + "</small>";
    };
    return labelControl;
};

var addZoomControl = function(position="topleft"){
    return L.control.zoom({
        position: position
    })
};

var addHelpControl = function(){
    var helpControl = L.easyButton('fa-question', function(){
        if(gHelpShown){
            $("#help").hide();
            gHelpShown=false;
        }else{
            $("#help").show();
            gHelpShown=true;
        }
    })
    return helpControl;
};

var notifySuccessMessage = function(message, timeout=2000){
    new Noty({
        type: 'success',
        text: message,
        layout: 'topRight',
        timeout: timeout,
        theme: 'metroui'
    }).show();
};

var notifyInfoMessage = function(message, timeout=2000){
    new Noty({
        type: 'info',
        text: message,
        layout: 'topRight',
        timeout: timeout,
        theme: 'metroui'
    }).show();
};

var notifyFailMessage = function(message, timeout=2000){
    new Noty({
        type: "error",
        text: message,
        layout: 'topRight',
        timeout: timeout,
        theme: 'metroui'
    }).show();
};


//////////////////////////////////////////////
// Runtime entrance
//////////////////////////////////////////////
$(document).ready(function(){

    var config;

    var configURL = gDefaultConfig;
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    if(urlParams.has("config")){
        configURL = urlParams.get("config");
    }

    //////////////////////////////////////////////
    // Load configuration file
    //////////////////////////////////////////////
    $.ajax({
        url: configURL,
        async: false,
        dataType: 'json',
        success: function (response) {
            config = response;
            console.log(response);
            notifySuccessMessage("Loaded configuration file", 3000);
        },
        error: function(){
            notifyFailMessage("Could not load configuration file", 10000);
        }
    });


    //////////////////////////////////////////////
    // Setup the map
    //////////////////////////////////////////////
    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        minZoom: 4,
        maxZoom: 21,
        maxNativeZoom: 17,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    
    var pre_imagery = L.tileLayer(config["preImageryLayer"]["basemapURL"], {
        tms: true,
        attribution: config["preImageryLayer"]["attribution"],
        minZoom: 4,
        maxZoom: 21,
        maxNativeZoom: 19,
        bounds: config["preImageryLayer"]["bounds"]
    });
    
    var post_imagery = L.tileLayer(config["postImageryLayer"]["basemapURL"], {
        tms: true,
        attribution: config["postImageryLayer"]["attribution"],
        minZoom: 4,
        maxZoom: 21,
        maxNativeZoom: 19,
        bounds: config["postImageryLayer"]["bounds"]
    });
    var layers = [osm, pre_imagery, post_imagery];

    var change = null;
    if ("changeImageryLayer" in config){
        change = L.tileLayer(config["changeImageryLayer"]["basemapURL"], {
            tms: true,
            attribution: "",
            minZoom: 4,
            maxNativeZoom: 18,
            maxZoom: 21,
            bounds: config["changeImageryLayer"]["bounds"]
        });
        layers.push(change);
    }else{
        notifyInfoMessage("Building damage predictions not found, just showing imagery", 5000);
    }


    var gMap = L.map('map', {
        center: config["center"],
        zoom: config["initialZoom"],
        minZoom: 4,
        maxZoom: 21,
        zoomControl: false,
        keyboard: true,
        layers: layers
    });

    var basemaps = Object();
    basemaps[config["preImageryLayer"]["date"]] = pre_imagery;
    basemaps[config["postImageryLayer"]["date"]] = post_imagery;


    var overlaymaps = {
        "Predicted damage layer": change
    }


    //////////////////////////////////////////////
    // Build the GUI
    //////////////////////////////////////////////
    var titleControl = getTitleControl(
        config["location"],
        config["imageryAttribution"],
        config["license"]
    );
    titleControl.addTo(gMap);

    var leftLabelControl = getLabelControl(
        config["preImageryLayer"]["date"], "Pre disaster imagery", "topleft"
    );
    leftLabelControl.addTo(gMap);

    var rightLabelControl = getLabelControl(
        config["postImageryLayer"]["date"], "Post disaster imagery", "topright"
    );
    rightLabelControl.addTo(gMap);

    var legendControl = getLegendControl();
    legendControl.addTo(gMap);

    var zoomControl = addZoomControl();
    zoomControl.addTo(gMap);

    var helpControl = addHelpControl();
    helpControl.addTo(gMap);

    // Layer picker
    if (change !== null){
        var layers = L.control.layers({}, {
            "Predicted damage layer": change
        }, {
            collapsed: false,
            position: "bottomright"
        }).addTo(gMap);
    }

    // Initialize side-by-side control
    var divider = L.control.sideBySide(pre_imagery, post_imagery).addTo(gMap);


    //////////////////////////////////////////////
    // Register some event handlers
    //////////////////////////////////////////////
    $(document).keypress(function (e) {
        if (e.which == 32) {       // "space"
            $(".leaflet-control-layers-selector[type='checkbox']").first().click();
        } else if (e.which == 97) { // "a"
            divider._range.value = 0.02;
            divider._updateClip();
        } else if (e.which == 100) { // "d"
            divider._range.value = 0.98;
            divider._updateClip();
        } else if (e.which == 115) { // "s"
            divider._range.value = 0.5;
            divider._updateClip();
        }
    });

    if(sessionStorage.getItem('help') !== 'true'){
        $("#help").show();
        gHelpShown = true;
        sessionStorage.setItem('help', 'true');
    }

    gMap.on("click", function (e) {
        if(gHelpShown){
            $("#help").hide();
            gHelpShown = false;
        }
    });
})
</script>
</body>

</html>