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;
    }

    #loading{
        position:absolute;
        z-index: 10000;
        width: 100%;
        height: 100%;
        margin-top: 0px;
        margin-left: 0px;
        background-color: rgba(255,255,255,1);
    }

    #facts {
        position: relative;
        margin-top:200px;
    }

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

<div id="loading" style="display:none">
      <div class="row">
          <div class="span12">
              <div id="facts" class="alert alert-info">
                  Loading task...
              </div>
              <div class="progress progress-striped">
                 <div id="bar" class="bar" style="width: 0%;"></div>
              </div>
          </div>
      </div>
</div>

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <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
        </div>
        <div id="loading" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            Loading next task...
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <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
        </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<div id="maps" class="row">
    <!--<div style="font-size:10px;">Marker Icons by <a href="http://mapicons.nicolasmollet.com/">Nicolas Mollet</a></div>-->
    <div id="answer" class="skeleton span7">
      <div id="question">
          <h1>Question</h1>
          <p>When you find a deforested area, use the black toolbar to mark it. You can draw polygons or add points of interest to be reviewed.</p>
          <p>You are working on task: <span id="task-id" class="label label-warning"></span>
          <a href="../tutorial" class="btn btn-primary pull-right" style="margin-left:-15px;">Tutorial</a>
          </p>
          <hr>
          <div class="well well-small">
          <h4>Legend</h4>
          <div class="row">
              <div class="span2">
                <strong>Indigenous Areas</strong>
              </div>
              <div class="span2" style="background-color:rgb(166,75,0); width:30px;height:14px;margin-top:2px;margin-left:-3px;">&nbsp;</div>
          </div>
          <div class="row">
              <div class="span2">
                <strong>Conservation Areas</strong>
              </div>
              <div class="span2" style="background-color:rgb(133,0,75); width:30px;height:14px;margin-top:2px;margin-left:-3px;">&nbsp;</div>
          </div>
          <div class="row">
              <div class="span2">
                <strong>Hydrography</strong>
              </div>
              <div class="span2" style="background-color:steelblue; width:30px;height:14px;margin-top:2px;margin-left:-3px;">&nbsp;</div>
          </div>
          </div>
          <h4>Your progress</h4>
          <p><strong>You have covered</strong> until now <strong><span id="km"></span> km<sup>2</sup>of forest</strong></p>
          <!--<p>And your <strong>covered area</strong> has been <strong>taking <span id="co2"></span> CO2 grams per km<sup>2</sup></strong></p>-->
          <!--<p style="font-size:10px"><a href="http://earthobservatory.nasa.gov/Features/BOREASCarbon/missing_carbon_2.php">Ratio based on this NASA article</a></p>-->
          <div class="progress progress-striped">
              <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
          </div>
          <span class="label label-warning"><i class="icon icon-bullhorn"></i> Tip</span> You can take a break whenever you want!
          <hr>
      </div>
      <div id="controls" class="btn-group" data-toggle="buttons-radio" style="padding-bottom:5px;">
        <button id="navigate" class="btn btn-inverse btn-map-ctrl">
          <i class="icon icon-white icon-move"></i> Navigate
        </button>
        <button id="polygon"  class="btn btn-inverse btn-map-ctrl ">
          <i class="icon icon-white icon-map-marker"></i> Polygon
        </button>
        <!-- <button id="polygon"  class="btn btn-inverse" onClick="toggleControl('path');">
          <i class="icon icon-white icon-pencil"></i> Line-->
        </button>
        <button id="point"    class="btn btn-inverse btn-map-ctrl ">
          <i class="icon icon-white icon-flag"></i> Point
        </button>
        <button id="modify"    class="btn btn-inverse btn-map-ctrl ">
          <i class="icon icon-white icon-edit"></i> Edit 
        </button>
        <button id="delete"    class="btn btn-inverse btn-map-ctrl ">
          <i class="icon icon-white icon-trash"></i> Delete
        </button>
      </div>
      <button id="answerbtn" class="btn btn-success btn-submit" value="coordinates" style="display:none"><i class="icon-check icon-white"></i> Save these the polygons or points</button>
      <hr>
        <!--<button class="btn" onclick="pybossa.newTask('deforestedareas', 'http://forestwatchers.net/pybossa').done(function(data) {loadData(data)})">Try another area</button>-->
        <button class="btn btn-submit" value="no-deforestation"><i class="icon icon-thumbs-up"></i> I do not see deforestation, give me another one!</button>
    </div>
</div>
<div class="row">
    <hr>
    <div id="disqus_thread" class="span12"></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>

<script src="http://d3js.org/d3.v2.js"></script>
<script src="/static/openlayers/OpenLayers.js"></script>
<script src="/static/js/pybossa/pybossa.js" type="text/javascript"></script>
<!-- PyBossa interface -->
<script>
// Map Server URL
var rasterLayer = 'map=/home/forestwatchers/map/maps2012.map';
var infoLayer = 'map=/home/forestwatchers/map/infoshapes.map';
var server = "http://forestwatchers.net/cgi-bin/mapserv?";
// 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'
}
// Area per tile (km2)
var totalArea = 2071105.5827344113;
// CO2 grams per meter see: http://earthobservatory.nasa.gov/Features/BOREASCarbon/missing_carbon_2.php
// grams per square meter
var coTwo = 30 * 1; 
// As we measure in km:
coTwo = coTwo * 1000;

var step = 0;
var steps = 2;

function updateBar(fact) {
    if (step < steps) {
        step = step + 1;
    }
    if (fact != null) {
        $("#facts").html(fact);
    }
    pct = Math.floor(( step*100 )/steps);
    if (pct >= 100) {
        $("#facts").html("Task loaded!");
        $("#loading").delay(2000).fadeOut(400);
    }
    $("#bar").css("width", pct + "%");
}

$("#loading").show();

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

// Function to enable/disable the drawing controls. Only one can be active at a time
function toggleControl(task, control) {
    console.log("Activating control " + control + " for Task " + task.id);
    for (key in task.drawControls) {
        var ctrl = task.drawControls[key];
        if ( (control == key) && (!ctrl.active) ) {
            ctrl.activate();
        }
        else {
            ctrl.deactivate();
        }
    }
}

// This function will center the map for a given tile
function center(task) {
    // bounds = [left, bottom, right, top]
    // restrictedExtent = [left, bottom, right, top]
    // As this action could take some time, start the spinner
    updateBar("Loading tile...");
    // Clean previous markers from the answer layers
    //answerLayer.removeAllFeatures();
    task.areaLayer.removeAllFeatures();
    $("#answerbtn").addClass("disabled");
    //$("#answerbtn").unbind('click');
    // Convert the bounds and restrictedExtent to valid OpenLayers objects
    var b = new OpenLayers.Bounds.fromArray(task.info.tile.bounds);
    var r = new OpenLayers.Bounds.fromArray(task.info.tile.restrictedExtent);
    //var a = r.toGeometry();
    //totalArea = (a.getGeodesicArea()/1000);
    //console.log(totalArea);
    // 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
    task.map.setOptions({
        maxExtent: r,
        restrictedExtent: r
    })
    task.map.zoomToExtent(r);
}

function loadUserProgress() {
    pybossa.userProgress('deforestedareas', 'http://forestwatchers.net/pybossa').done(function(data){
        var f = d3.format("2.2s");
        $("#km").text(f(totalArea*data.done));
        //$("#co2").text(f(coTwo*totalArea*data.done));
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'left'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

pybossa.taskLoaded(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        var map_div = $("<div/>", {id:"map_task_" + task.id, 'class': 'span4'});
        var map_canvas = $("<div/>", {id: "map_" + task.id, 'class': 'map_canvas'});
        map_canvas.css("width", "259px");
        map_canvas.css("height", "595px");
        map_div.append(map_canvas);
        $("#maps").prepend(map_div);

        updateBar("Loading task data...");
        task.map = new OpenLayers.Map("map_" + task.id, {
            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,
            minScale: 160000*2,
            numZoomLevels: 10,
            unit: 'degrees'
        });

        // Layers
        // Satellite Imagery Map (default layer)
        task.map.addLayer(new OpenLayers.Layer.WMS("Satellite", server + rasterLayer, 
        {
            layers: 'preliminarycompleted',
            isBaseLayer: true
        }
        ));
        // Brazil political borders 
        task.map.addLayer(new OpenLayers.Layer.WMS("Political map", server + infoLayer, 
        {
            layers: 'shp_brazil',
            transparent: true,
        },{
            visibility: true,
            opacity: 0.5,
        }
        ));

        //  Hydrography
        task.map.addLayer(new OpenLayers.Layer.WMS("Hydrography", server + infoLayer, 
        {
            layers: 'amazonhydro',
            transparent: true,
        },{
            visibility: true,
            opacity: 0.5,
        }
        ));

        // Indigenous reservations 
        task.map.addLayer(new OpenLayers.Layer.WMS("Indigenous reserves", server + infoLayer, 
        {
            layers: 'shp_indigenous',
            transparent: true,
        },{
            visibility: true,
            opacity: 0.5,
        }
        ));

        // Federal Conservation areas
        task.map.addLayer(new OpenLayers.Layer.WMS("Federal Conservation Areas", server + infoLayer, 
        {
            layers: 'shp_conservation',
            transparent: true,
        },{
            visibility: true,
            opacity: 0.5,
        }
        ));



        // 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 drawing deforested areas to review
        task.areaLayer = new OpenLayers.Layer.Vector("Deforested Areas", {
            styleMap: styleBlack
        });

        task.areaLayer.events.on({
            featureselected: function(e) {
                if (!task.drawControls['modify'].active) {
                    var remove = confirm("Are you sure you want to REMOVE this element?");
                    if (remove == true) {
                        var id = e.feature.id;
                        var feature = task.areaLayer.getFeatureById(id);
                        task.areaLayer.removeFeatures(feature);
                    }
                }
            }
        });
        task.map.addLayer(task.areaLayer);


        // Drawing controls
        task.drawControls = {
            polygon:    new OpenLayers.Control.DrawFeature(task.areaLayer, 
                                                           OpenLayers.Handler.Polygon,
                                                           {'featureAdded': enableBtn}
                                                          ),
            point:      new OpenLayers.Control.DrawFeature(task.areaLayer, 
                                                           OpenLayers.Handler.Point,
                                                           {'featureAdded': enableBtn}
                                                          ),
            modify:     new OpenLayers.Control.ModifyFeature(task.areaLayer),
            delete:     new OpenLayers.Control.SelectFeature(task.areaLayer),
        }

        // Add them to the map
        for (var key in task.drawControls) {
            task.map.addControl(task.drawControls[key]);
        }

        center(task);
        map_div.hide();
        deferred.resolve(task);
    }

    else {
        deferred.resolve(task);
    }


});

pybossa.presentTask(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        updateBar("Loading task data...");
        //console.log(data);
        $("#question h1").text(task.info.tile.question);
        $("#task-id").text(task.id);
        loadUserProgress();

        $(".btn-map-ctrl").off('click').on('click', function(evt){
            var ctrlClicked = $(evt.target).attr("id");
            toggleControl(task, ctrlClicked);
        });

        $(".btn-submit").off('click').on('click', function(evt){
            var btnClicked = $(evt.target).attr("value");
            console.log("The answer for task " + task.id + " is " + btnClicked);
            if (btnClicked != 'no-deforestation') {
                // Convert the feature location into the GeoJSON format
                var geojson = new OpenLayers.Format.GeoJSON({
                    'internalProjection': task.map.baseLayer.projection,
                    'externalProjection': new OpenLayers.Projection("EPSG:4326")
                    });
                // The user can provide several answers, indicating areas, paths or even points of interest
                // Thus, the answer is a list of GeoJSON objects
                var answer = [];
                // Cache the number of features added to the areaLayer
                var numAnswers = task.areaLayer.features.length;
                if (numAnswers > 0) {
                    // Iterate over them, and save them into the answer list variable
                    for (i=0;i<numAnswers;i++) {
                        answer.push(JSON.parse(geojson.write(task.areaLayer.features[i])));
                    }
                } 
                else {
                    alert("Please, add a point or polygon. If you do not see deforestation click in the other button.");
                    $("#answerbtn").addClass("disabled");
                    $("#answerbtn").hide();
                    return;
                }
            }
            else {
                var answer = btnClicked;
            }

            pybossa.saveTask(task.id, {'deforestedareas': answer}).done( function(data) {
                // Show the feedback div
                console.log(answer);
                $("#success").fadeIn(); 
                // Fade out the pop-up after a 1000 miliseconds
                setTimeout(function() { $("#success").fadeOut() }, 1000);
                $("#map_" + task.id).remove();
                deferred.resolve();
            });
        });
        $("#navigate").addClass("active");
        $("#polygon").removeClass("active");
        $("#point").removeClass("active");
        $("#modify").removeClass("active");
        $("#delete").removeClass("active");
        $("#answerbtn").hide();
        $("#map_task_" + task.id).show();
    }
    else {
        $(".skeleton").hide();
        $("#finish").fadeIn();
    }
});

pybossa.setEndpoint('http://forestwatchers.net/pybossa/');
pybossa.run('deforestedareas');
</script>