Merge pull request #49 from milafrerichs/32-metadata-layers

32 metadata layers

source/index.html.haml

@@ -61,11 +61,9 @@ title: Recovery Dashboard
           %input(type="checkbox" ng-model="layer.displayed" ng-change="toggleVisibility()")
             %label
         .name(ng-model="visibleLayers" ng-click="toggleDisplayed()") {{layer.metadata.name}}
-        .info(ng-model="layer.metadata.show" ng-mouseover="showMetadata()" ng-mouseout="hideMetadata()") i
+        .info(ng-model="layer.metadata.show" ng-click="toggleMetadata()") i
         .sub-styles(ng-show="layer.styleOptions")
           .subcheck( ng-model="styleOptions" ng-repeat="styleOptions in layer.styleOptions")
             %input(type="radio" name="layerSubStyle" ng-model="layer.selectedStyle" ng-value="styleOptions.styleParam" ng-change="changeStyle()")
             %p {{styleOptions.styleName}}
-        .metadata(ng-show="layer.metadata.show")
-          .name Name: {{layer.metadata.name}}
-          .source Source: {{layer.metadata.source}}
+  = partial "partials/metadata_info"

source/javascripts/components/dashboard_controller.coffee

@@ -1,9 +1,10 @@
 class RecoveryDashboardCtrl
   constructor: ($scope, $http, olData, olHelpers, layerListService, styleHelper) ->
     $scope.hideMetadata = () ->
-      this.layer.metadata.show = false
-    $scope.showMetadata = () ->
-      this.layer.metadata.show = true
+      $scope.metadata.show = false
+    $scope.toggleMetadata = () ->
+      this.layer.metadata.show = !this.layer.metadata.show
+      $scope.metadata = this.layer.metadata
     $scope.toggleVisibility = ->
       this.layer.visible = this.layer.displayed
     $scope.toggleDisplayed = ->

source/javascripts/components/layerListModel.coffee

@@ -24,7 +24,12 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Damaged Buildings"
-      source: "Worldbank"
+      source: ""
+      text: "Using remotely sensed data, international organizations have been interpreting damage to structures building by building. The GFDRR team has collated and standardized the damage levels used in all three datasets by applying some assumptions and merged into a single GIS data layer. Areas covered are limited to areas where cloud free images were available.   
+      
+      During past events (2010 Haiti EQ, 2011 Christchurch EQ), it was understood that this type of damage assessment underestimates the number of destroyed and damaged buildings significantly due to the fact that some types of damage to structures are not visible from above. 
+      
+      The practical usage of this data is still being debated. Without baseline statistics on the number of buildings in the area, it would be difficult to assess the percentage of impacted buildings, which would be a useful starting point for housing assessment. Currently, OpenStreetMap (OSM) volunteers are mapping building footprints using pre-event images, if OSM building footprints are delineated for entire districts, it is possible to estimate the percentage of structures impacted per district with the caveat that it will be an underestimate, judging from past experiences.  "
     }
   }
   povertyLayer = {
@@ -55,6 +60,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     metadata: {
       name: "Poverty Levels"
       source: "Worldbank"
+      text: "The World Bank Poverty Global Practice group have prepared poverty data for Nepal that can be visualized on a map. This layer will be useful for social protection, as well as to prioritize areas for resources in light of the level of damage estimated using the landslide inventory map, and building damage map above. "
     }
   }
   schoolPolygonLayer = {
@@ -166,7 +172,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Landslides BGS"
-      source: "Worldbank"
+      source: ""
     }
   }
   mediaLayer = {
@@ -180,7 +186,9 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Mainstream Media text"
-      source: "Worldbank"
+      source: ""
+      text: "The World Bank ITS unit has been extracting information on damage being reported in mainstream media since the 25th of April. The information is linked to a place on the map and is available in GIS format. Photographs and video footage are also available. This would be useful for validation of other data sources on damage.
+      "
     }
   }
   valleyLandslidesLayer= {
@@ -194,7 +202,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Valley Landslides"
-      source: "Worldbank"
+      source: ""
     }
   }
   valleyBlockingLayer = {
@@ -208,7 +216,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Valley Blockings"
-      source: "Worldbank"
+      source: ""
     }
   }
   landslideLayer = {
@@ -222,7 +230,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Landslides"
-      source: "Worldbank"
+      source: ""
     }
   }
   damagedBuildingsLayer = {
@@ -236,7 +244,7 @@ angular.module('dashboard').service('layerListModel', ['$rootScope', 'styleHelpe
     }
     metadata: {
       name: "Damages Buildings"
-      source: "Worldbank"
+      source: ""
     }
   }
   nasaLayer = {

source/partials/_metadata_info.html.haml

@@ -0,0 +1,8 @@
+#metadata-info(ng-model="metadata" ng-show="metadata.show")
+  .metadata
+    .close(ng-click="hideMetadata()")
+      x
+    %h2.name {{metadata.name}}
+    .content
+      %p.source Source: {{metadata.source}}
+      %p {{metadata.text}}

source/partials/_sidebar.html.haml

@@ -4,7 +4,7 @@
     .close(ng-click="toggleSidebar()")
     .content
       %h1 Recovery Dashboard: Nepal Earthquake
-      %p This project is ...
+      %p Following the Mw 7.8 earthquake in Nepal, the World Bank Nepal response team has been collating and curating spatial data useful for damage assessments and recovery planning generated by the International community. Below is a summary of the datasets that are in the public domain, with a brief mention of their usefulness and limitations. Baseline spatial datasets available from KLL and OpenCities are described elsewhere.  
       = link_to "http://gfdrr.org", target: "_blank" do
         = image_tag "images/logo.png"
       = link_to "http://worldbank.org", target: "_blank" do

source/stylesheets/_main.sass

@@ -9,4 +9,28 @@
   padding: 0
   .dashboard-map
     height: 100%
+#metadata-info
+  position: absolute
+  top: 30%
+  left: 35%
+  width: 450px
+  background: rgba(200,200,200,0.9)
+  .metadata
+    postion: relative
+    border: 1px solid #dcdcdc
+    .close
+      position: absolute
+      right: 5px
+      top: 5px
+      border: 1px solid #fff
+      cursor: pointer
+      padding: 0 5px
+    h2
+      background: #ddd
+      border-bottom: 1px solid #dcdcdc
+      padding: 10px
+    .content
+      padding: 10px
+      max-height: 400px
+      overflow: auto
 

source/stylesheets/components/_layers.sass

@@ -30,13 +30,6 @@
         color: white
         line-height: 20px
         text-align: center
-      .metadata
-        position: absolute
-        right: -150px
-        top: 0px
-        width: 150px
-        background: rgba(200,200,200,0.7)
-        padding: 10px
       .sub-styles
         clear: left
         float: left