template.html

<! -- Fix for Bootstrap css with Google Maps https://github.com/twitter/bootstrap/issues/1552 -->
<style type="text/css">
    #map_canvas label {
        width: auto;
        display: inline;
    }
    #map_canvas img {
        max-width: none;
    }

    #throbber {
        position:absolute;
        z-index: 10000;
        width: 100px;
        height: 100px;
        margin-top: 105px;
        margin-left: 260px;
    }

    .layersDiv label {
        color: white;
    }
    .olControlOverviewMapElement {
        background-color: white;
    }
</style>

<div class="row">
  <!-- Success and Error Messages for the user --> 
  <!-- Question, task id, photo and action buttons for answering the question-->
  <div class="span12" style="height:50px;">
    <div id="success" class="alert alert-success" style="display:none;">
      <a class="close">×</a>
      <strong>Well done!</strong> Your answer has been saved</strong>
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
      <strong>The task has been completed!</strong> Thanks a lot!</strong>
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
      <strong>Congratulations!</strong> You have participated in all available tasks!</strong>
      <br/>
      <div class="alert-actions">
              <a class="btn small" href="/">Go back</a>
              <a class="btn small" href="/app">or, Check other applications</a>
      </div>
    </div>
    <div id="error" class="alert alert-error" style="display:none;">
      <a class="close">×</a>
      <strong>Error!</strong> Something went wrong, please contact the site administrators</strong>
    </div>
    <div id="warning" class="alert alert-warning" style="display:none;">
      <a class="close">×</a>
      <strong>Oooops!</strong> Tile not found, trying with a new one!</strong>
    </div>
  </div>
</div>

<!-- Header of the task -->
<div class="row">
  <div class="skeleton span12">
    <div id="question">
      <h1>Question</h1>
      <!--<h3 id="area">Area</h3>-->
      <p>Use the black toolbar to measure the covered area by clouds within the red box.</p> 
      <p>Task: <span id="task-id" class="label label-warning">#</span></p>
</div>
<!-- Map Canvas -->
<div class="row">
    <div class="skeleton span8">
      <div id="map_canvas" style="width: 620px; height: 605px;">
          <div id="throbber"></div>
      </div>
    </div>

    <!-- Controls for the map -->
    <div class="skeleton span4">
        <div id="tutorial" style="padding-bottom:10px">
            <a href="../tutorial" class="btn btn-primary btn-large"><i class="icon-info-sign"></i> Video Tutorial</a>
        </div>
        <div id="answer">
            <button onclick="submitTask('Yes')" class="btn btn-large btn-success"><i class="icon-ok icon-white"></i> Yes</button>
            <button onclick="submitTask('No')" class="btn btn-large btn-danger"><i class="icon-remove icon-white"></i> No</button>
        </div>

        <div id="totalarea" style="padding-top:20px;">
            <p>Selected Area covers <span id="pctVal" class="badge badge-inverse">0.00 %</span>
            or <span id="km" class="badge badge-info">0.000 km<sup>2</sup></span> 
            </p>
            <div class="progress progress-striped active">
                <div id="pct" class="bar">
                </div>
            </div>
        </div>

        <div id="controls" class="btn-group" data-toggle="buttons-radio" style="text-align:center">
            <button id="navigate" class="btn btn-inverse active" onClick="toggleControl('navigate');">
                <i class="icon icon-white icon-move"></i> Navigate
            </button>
            <button id="polygon"  class="btn btn-inverse" onClick="toggleControl('polygon');">
                <i class="icon icon-white icon-map-marker"></i> Measure Area
            </button>
        </div>
        <br/>
        <div style="padding-top:20px;">
            <h4>Overview Map</h4>
            <div id="overviewmap"></div>
        </div>
    </div>
</div>

<div class="row skeleton" style="padding-top: 5px;">
<div id="disqus_thread" class="span8" style="width: 620px;"></div>
</div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'forestwatchers'; // required: replace example with your forum shortname
    var disqus_developer = 1;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>


<script src="/static/openlayers/OpenLayers.js"></script>
<script src="/static/js/throbber/throbber.js"></script>
<script src="/static/js/pybossa/pybossa.js" type="text/javascript"></script>
<!-- PyBossa interface -->
<script>
// Map Server URL
var server = "http://forestwatchers.net/cgi-bin/mapserv"
var totalArea = 0;
// Map Bounds
//var bounds = new OpenLayers.Bounds(
//     -57.739609289016386, -12.430917501000005,
//     -53.554929289016385, -8.710952501000005
//)
// Map options
var options = {
    //maxExtent: bounds,
    //maxResolution: 0.0163,
    //projection: "EPSG:4326",
    allowOverlays: true,
    numZoomLevels: 3
    //units: 'degrees'
}
// Map for loading the markers and placing them
var map = null;
// OpenLayers point variable to save the lon & lat
var point;
// Layer for placing markers. This layer allows drag & drop
var answerLayer;
// Draw controls
var drawControls = { };
// Overviewmap options
var overviewmapOptions = {div: document.getElementById('overviewmap')};

var boxes  = new OpenLayers.Layer.Boxes( "Limits of the tile" );

// Spinner to give feedback to the user when the map is getting loaded or something is taking place in the background
var spinner = new Throbber({ 
    color: 'black',
    size: 90
});
// The spinner is attached to a div overlayed in top of the map. This div is only shown when the spinner is active, 
// otherwise, the div is hidden from the view to show the map.
spinner.appendTo (document.getElementById('throbber'));

// This function shows the spinner div and starts its animation
function spinnerStart() {
    $("#throbber").show();
    spinner.start();
}

// This function stops the spinner and hides the spinner div
function spinnerStop() {
    spinner.stop();
    $("#throbber").hide();
}

// This function creates the map, the layers, and sets up the map
function initialize() {

    map = new OpenLayers.Map('map_canvas', {
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher({roundedCornerColor: 'black'}),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.Attribution()
            ],

        minScale: 160000,
        numZoomLevels: 3,
        unit: 'degrees'
    });

    // Layers
    // Satellite Imagery Map (default layer)
    map.addLayer(new OpenLayers.Layer.WMS("Satellite", server, 
    {
        layers: 'satellite',
        //tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom,
        isBaseLayer: true
    }
    ));

    // Satellite Imagery Map (default layer)
    map.addLayer(new OpenLayers.Layer.WMS("Segmentation", server, 
    {
        layers: 'demo',
        //tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom,
        transparent: true
    }
    ));


    // Icon for the Deforested Area Marker 
    var styleMapAnswerPark = new OpenLayers.StyleMap({
        pointRadius: 15,
        externalGraphic: 'http://forestwatchers.net/assets/static/img/mapicons/information.png'
    });

    // Black color for the path and polygon control to integrate with black controls
    // and inverse Bootstrap color scheme
    var styleBlack = new OpenLayers.StyleMap({
        pointRadius: 5,
        fillColor: "rgba(0,0,0,0.5)",
        strokeColor: "rgba(0,0,0,1)",
        strokeWidth: 2,
    });


    // Layer for placing the deforested area marker
    answerLayer = new OpenLayers.Layer.Vector("Interesting Points", {
        styleMap: styleMapAnswerPark,
        attribution: 'Marker Icons by <a href="http://mapicons.nicolasmollet.com/">Nicolas Mollet</a>'
    });
    map.addLayer(answerLayer);

    // Layer for drawing deforested areas to review
    areaLayer = new OpenLayers.Layer.Vector("Deforested Areas", {
        styleMap: styleBlack
    });
    map.addLayer(areaLayer);


    // Function to allow only the addition of one urban park per city
    // The function gets the feature (point) and gets its location, transforms it to the right projection
    // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added
    //disablePoint = function(feature) { 
    //    $("#lat").text(feature.geometry.y);
    //    var tmp = feature.geometry.clone();
    //    tmp.transform(
    //            map.getProjectionObject(), // from Spherical Mercator Projection
    //            new OpenLayers.Projection("EPSG:4326") // to transform from WGS 1984
    //    );
    //    $("#lon").text(tmp.x);       
    //    $("#lat").text(tmp.y);       
    //    toolbar.deactivate();
    //}

    // Enable drag & drop in the answer Layer
    var drag = new OpenLayers.Control.DragFeature(answerLayer);
    // Add the drag & drop control into the map
    map.addControl(drag);
    // Activate drag & drop
    drag.activate();

    // Add a layer to load a box that represents the limits for the restrictedExtent
    map.addLayer(boxes);

    // Drawing controls
    drawControls = {
        polygon:    new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon,
        { persist: true}
                                                    ) 
    }

    // Add them to the map
    var control;
    for (var key in drawControls) {
        control = drawControls[key]; 
        control.events.on({
            'measure': handleMeasurement,
            'measurepartial': handleMeasurement
            });
        map.addControl(control);
    }

    // Add the overviewmap
    map.addControl(new OpenLayers.Control.OverviewMap(overviewmapOptions));
}

function handleMeasurement(event) {
    var geometry = event.geometry;
    var units = event.units;
    var order = event.order;
    var measure = event.measure;
    var out = "";
    if(order == 1) {
        out += "Selected Area: " + measure.toFixed(3) + " " + units;
    } else {
        out += "Selected Area: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            $("#km").html(measure.toFixed(3) + " km<sup>2</sup>");
        var tmp = 0;
        tmp = ((geometry.getGeodesicArea()/1000)*100)/totalArea;
        $("#pct").css("width", tmp + "%");
        $("#pctVal").text(tmp.toFixed(2) + " %");
        //console.log(geometry.getGeodesicArea()/1000);
        //console.log("PCT " + tmp + "%");
    }
}

function enableBtn() {
    if ($("#answerbtn").hasClass("disabled")) {
        $("#answerbtn").removeClass('disabled');
        $("#answerbtn").click(submitTask);
    }
}

// Function to enable/disable the drawing controls. Only one can be active at a time
function toggleControl(control) {
    for (key in drawControls) {
        ctrl = drawControls[key];
        if ( (control == key) && (!ctrl.active) ) {
            ctrl.activate();
        }
        else {
            ctrl.deactivate();
        }
    }
}

// Initialize the map
initialize();

// This function will center the map for a given tile
function center(bounds, restrictedExtent) {
    // bounds = [left, bottom, right, top]
    // restrictedExtent = [left, bottom, right, top]
    // As this action could take some time, start the spinner
    spinnerStart();
    // Clean previous markers from the answer layers
    answerLayer.removeAllFeatures();
    areaLayer.removeAllFeatures();
    $("#pct").css("width", 0.00 + "%");
    $("#pctVal").text("0.00 %");
    $("#km").html("0.000 km<sup>2</sup>");
    $("#answerbtn").addClass("disabled");
    $("#answerbtn").unbind('click',submitTask);
    // Convert the bounds and restrictedExtent to valid OpenLayers objects
    var b = new OpenLayers.Bounds.fromArray(bounds);
    var r = new OpenLayers.Bounds.fromArray(restrictedExtent);
    var a = r.toGeometry();
    totalArea = (a.getGeodesicArea()/1000);
    console.log((a.getGeodesicArea()/1000) +" km2");
    // Add a box to mark in red the limited restrictedExtent
    var box = new OpenLayers.Marker.Box(r);
    boxes.addMarker(box);
    // Set limits for the map: the user should only see a small fraction of the tile
    map.setOptions({
        maxExtent: r,
        restrictedExtent: r
    })
    map.zoomToExtent(r);
    // Stop the spinner as the map has been configured
    spinnerStop();
}

// Load the task data into the HTML skeleton
function loadTask ( task_id ) {
    var t = $.ajax({
        url: '/pybossa/api/task/'+task_id,
        dataType: 'json'
    });

    t.done( function (task) {
        if ( !$.isEmptyObject(task) ) {
            spinnerStart();
            if (task.state=='completed') {
                $('#controls').hide();
                $('#answer').hide();
                $('#disqus_thread').hide();
                $('#taskcompleted').show();
            }

            $("#question h1").text(task.info.question);
            //$("#question h3").text(task.info.tile.name);
            $("#task-id").text(task.id);
            spinnerStop();

            // Center the map for this task
            center(task.info.tile.bounds, task.info.tile.restrictedExtent);
        }
        else {
            $(".skeleton").hide();
            $("#finish").fadeIn();
        }
    });
}

var taskId = pybossa.getCurrentTaskId(window.location.pathname);

//pathArray = window.location.pathname.split('/');
//if (window.location.pathname.indexOf('/task/')!=-1) {
if (taskId){
    //var l = pathArray.length;
    //var i = 0;
    //for (i=0;i<l;i++) {
    //    if (pathArray[i]=='task') {
    //        loadTask(pathArray[i+1]);
    //    }
    //}
    loadTask(taskId);
}
else {
    pybossa.newTask("filtering", "http://forestwatchers.net/pybossa").done( function( data ) { 

        if ( !$.isEmptyObject(data.task) ) {
            window.location.pathname = "/pybossa/app/filtering/task/" + data.task.id;
        }
       else {
            $(".skeleton").hide();
            $("#finish").fadeIn();
        }
    });
}


// Saves the answer for the given task
function submitTask(answer) {
    task_id = $("#task-id").text();

    pybossa.saveTask( task_id, {'filtering': answer}, "http://forestwatchers.net/pybossa").done( function(data) {
        // Show the feedback div
        $("#success").fadeIn(); 
        // Fade out the pop-up after a 1000 miliseconds
        setTimeout(function() { $("#success").fadeOut() }, 1000);
        // Request a new task
        window.location.pathname = '/pybossa/app/filtering/newtask';
    });

}
</script>