task_presenter.html

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="span6 offset2" style="height:50px">
        <div id="success" class="alert alert-success" style="display:none;">
            <a class="close">×</a>
            Well done! Your answer was 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;">
            The task has been finished! Many thanks!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            Congratulations! You have participated on all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or take a look at other projects</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            An error occurred! Please contact the site administrators!
        </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!-- see http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio -->
<style>
.wrapper {
  width: 75%;
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 50%;
  /* 2:1 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

</style>

<!-- Start Skeleton Row-->
<div class="row skeleton"> 
    <!-- Start of Question, Photo and Submission DIV -->
    <div class="span12">
        <!-- The question will be loaded here -->
        <h1 id="question">Can you see human settlements or roads in the satellite imagery?</h1>
        
        <!-- Photo DIV -->
		
        <div class="wrapper" style="background-color:blue">
            <div class="main" id="leaflet_map" style="background-color:grey"></div>
        </div>
        
        <!-- Start DIV for the submission buttons -->
        <div id="answer"> 
            <!-- If the user clicks this button, the saved answer will be value="many"-->
            <button class="btn btn-success btn-answer" value='Yes' id='Sub_Yes'><i class="icon icon-white icon-thumbs-up"></i>Yes</button>
            <!-- If the user clicks this button, the saved answer will be value="no"-->
            <button class="btn btn-danger btn-answer" value='No' id='Sub_No'><i class="icon icon-white icon-thumbs-down"></i>No</button>
            <!-- If the user clicks this button, the saved answer will be value="NoPhoto"-->
            <button class="btn btn-inverse btn-answer" value='NoPhoto' id='Sub_NoPhoto'><i class="icon icon-exclamation"></i>No/Bad imagery</button>
        </div><!-- End of DIV for the submission buttons -->
              
        <!-- Feedback items for the user -->
        <p>You are working on task: <span id="task-id" class="label label-warning">#</span></p>
        <!-- Progress bar for the user -->
        <!-- <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="height: 0%;"></div>
        </div> -->
        
        <!-- Information area that may be expanded -->
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#information">Show/Hide additional information</button>
    </div><!-- End of Question, Photo and Submission DIV (column) -->
</div><!-- End of Skeleton Row -->  

<!-- Start of Information DIV -->
<div class="row">    
    <div class="span8.offset2, collapse" id="information">
        <h1>Additional information</h1>
        <p>Put some additional information here</p>
        <h2>Hints</h2>
        <ul>
            <li><b>Short-cuts</b>: You may use short-cuts in order to speed up the questionare:<br>
                A or Y for "Yes", W or N for "No", D or B for "No/Bad Imagery"
			<li><b>Zooming</b>: You may zoom the map by using the mouse-wheel or using <b>+</b> and <b>-</b> keys
            <li><b>Moving</b>: You may navigate the map by dragging it with the mouse or using the arrow keys.</li>
        </ul>
    </div>
</div><!-- End of Information Row -->

<!-- Here you should the links to the javascript libraries you are using -->
<!-- leaflet.css -->
<link rel="stylesheet" href="https://www.dropbox.com/s/zdl2ta4glyt0gan/leaflet.css?dl=1" />
<!-- leaflet.js -->
<script src="https://www.dropbox.com/s/9ejsdosgt90m06a/leaflet.js?dl=1"></script>
<!-- omnivore.js -->
<script src="https://www.dropbox.com/s/3bw4u2iu7kqmtvb/omnivore.js?dl=1"></script>
<!-- bing.js -->
<script src="https://www.dropbox.com/s/gtq3d26vjnk1rxh/Bing.js?dl=1"></script>
<script>
function show_map(wktP,X,Y){
    console.log("map should be shown");
    
    var wkt = wktP;
    var x_center = X;
    var y_center = Y;
	
	if (typeof l_map !== 'undefined') {
    // the variable is defined
	l_map.remove()
	}
    
	l_map = L.map('leaflet_map', {
		center: [y_center, x_center],
		zoom: 17,
		minZoom: 15,
		maxZoom: 19,
		crs: L.CRS.EPSG3857
	});
	
	L.control.scale().addTo(l_map);
	
	// You should change that access code and get one directly from microsoft, if you would like to use Bing imagery
	var tileLayer = new L.BingLayer('LfO3DMI9S6GnXD7d0WGs~bq2DRVkmIAzSOFdodzZLvw~Arx8dclDxmZA0Y38tHIJlJfnMbGq5GXeYmrGOUIbS2VLFzRKCK0Yv_bAl6oe-DOc', {type: 'Aerial'});
	
	l_map.addLayer(tileLayer);
	
	omnivore.wkt.parse(wkt).addTo(l_map);
	
}

function loadUserProgress() {
    pybossa.userProgress('your_project_name').done(function(data){
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("height", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'left'}); 
    });
}

pybossa.taskLoaded(function(task, deferred) {
    console.log("task was loaded");
    if (!$.isEmptyObject(task) ) {
        console.log("task is not empty")
        console.log(task.info.WKT);
    }
    deferred.resolve(task);
    console.log("taskLoaded done");
});

pybossa.presentTask(function(task, deferred) {
    console.log("task should be presented");
    if (!$.isEmptyObject(task) ) {
        loadUserProgress();
        console.log("user progress updated");
        $('#openlayers_map').empty();
        console.log("cleared map view");
		// this will scroll down to the right place, so that we "hide" the heading.
        window.scroll(0,150);
           
		show_map(task.info.WKT, task.info.x_center, task.info.y_center);
        console.log("created map");
		
        $('#task-id').html(task.id);
        $('.btn-answer').off('click').on('click', function(evt) {
            var btn = $(this);
            var answer = btn.attr("value");
            console.log("clicked button: " + answer);
            if (typeof answer != 'undefined') {
                pybossa.saveTask(task.id, answer).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
            }
            else {
                $("#error").show();
            }
        });
        
        // establish short-cuts for submission buttons
        $(document).keydown(function(e) {
            console.log(e);
            console.log(e.key);
            switch (e.key) {
                case 'a': case 'A': case 'y': case 'Y':
                    console.log(e.keyKode); $('#Sub_Yes').click();
                    return false; //"return false" will avoid further events
                case 'w': case 'W': case 'n': case 'N':
                    console.log(e.keyKode); $('#Sub_No').click();
                    return false; //"return false" will avoid further events
                case 'd': case 'D': case 'b': case 'B':
                    console.log(e.keyKode); $('#Sub_NoPhoto').click();
                    return false; //"return false" will avoid further events
            }
            return; //using "return" other attached events will execute
        });
        
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
  
    console.log("presentTask done");
});

pybossa.run('your_project_name');


</script>