long_description.html

<div class="row-fluid">
    <div class="span2">
        <img class="img-polaroid" src="http://img443.imageshack.us/img443/2027/capturadepantallade2012tm.png"/>
    </div>
    <div class="span10">
       <p>This is a first version of an application for ForestWatchers, where you will be able to <strong>mark deforested areas</strong>, or paths where you think there is some deforestation. You can even mark interesting points that the researchers will review in a later stage.
        </p>   
        <p>The application will show you a tile, that has been previously cleaned by the volunteers, and you will have a black tool bar to draw polygons to identify the deforested area.</p>
        <p>The application will show you where Indigineous Areas are, as well as Federal Conservation ones with the hydrography, so you will be able to learn where deforestation is happening.</p>
        <p>If you finish all the tasks and you want to keep processing deforestation, <a href="http://forestwatchers.net/pybossa/app/besttile">help us to clean more tiles from the forest</a>.</p>
</div>
</div>
<div class="row-fluid">
    <div class="span12">
        <h1>Preliminary results</h1>
        <hr>
    </div>
</div>
<div class="row-fluid">
    <div class="span12">
        <p>In the following map you can see the deforestation reported by the volunteers. The map and deforested areas are updated 4 times per day.</p>
        <p>The <strong>deforested areas</strong> are marked in red, while the <strong>interesting points</strong> are the blue icons.</p>
        <p><span class="label label-info">Info</span> Zoom in the map in order to see more clearly the candidate deforested areas.</p>
        <p><span class="label label-warning"><i class="icon-bullhorn"></i> Note</span> These data have not been reviewed yet. It only represents the discovered areas by the volunteers as deforested ones.</p>

        <div id="map" style="width:400px; height:850px;border:1px solid black;"></div>
    </div>
</div>
<script src="/static/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
     var map, layerBestTile, layerPoly, layerPoint, layerDeter, layerIntersec, vector1;
     var mapfile = "map=/home/forestwatchers/map/maps2012.map"
     var infofile = "map=/home/forestwatchers/map/infoshapes.map"
     var server = "http://forestwatchers.net/cgi-bin/mapserv?"
     var resultserver = server + mapfile
     var infoserver = server + infofile

     var point1 = new OpenLayers.Geometry.Point(-58.6, -13.2);
     var point2 = new OpenLayers.Geometry.Point(-49.4, 5.7);

     var bounds = new OpenLayers.Bounds();
     bounds.extend(point1);
     bounds.extend(point2);
     bounds.toBBOX();
     var bounds2;

     function init(){
         map = new OpenLayers.Map( 'map' );
         layerBestTile = new OpenLayers.Layer.WMS( "Cleaned Image by Best Tile", resultserver, 
           {
             layers: 'preliminaryall',
             isBaseLayer: true
            },
           {
             opacity: 0.9
           } );
         layerPoly = new OpenLayers.Layer.WMS( "Deforestation areas", resultserver, 
           {
             layers: 'shapePolyDeforVol',
             transparent: true
            } );
         layerPoint = new OpenLayers.Layer.WMS( "Interesting Points", resultserver, 
           {
             layers: 'shapePointDeforVol',
             transparent: true
            },
           {
             visibility: true
           } );
         vector1 = new OpenLayers.Layer.WMS( "Brazil (political map)", infoserver, 
           {
             layers: 'shp_brazil',
             transparent: true
           }, {
             opacity: 0.4
            } );
         map.addLayer(layerBestTile);
         map.addLayer(layerPoly);
         map.addLayer(layerPoint);
         map.addLayer(vector1);

         //map.zoomToMaxExtent();
         map.zoomToExtent(bounds);
         map.setOptions({
             maxExtent: bounds,
             restrictedExtent: bounds
         });
         map.zoomTo(6);
         map.addControl(new OpenLayers.Control.LayerSwitcher());

     };

     init();

 </script>