Merge branch 'crop-layer'

Author: mihow

app/angular/templates/choropleth.controller.js

@@ -2,7 +2,7 @@ cropApp.controller('choroplethCtrl', function($scope) {
   $scope.mapInfo = [
     {
       mapName: "Land Capability",
-      mapDescription: "Land Capability Classification is a measure of the suitability of soils for field crops. The classification system was developed by the US Department of Agriculture to inform farm planning and soil manament. Soil is divided into eight capability classes, ranging from Class 1 (soils have slight limitations that restrict agricultural use) to Class 8 (soils or area are unsuitable for agriculture). With proper management, soils in classes 1-4 can be utilized to grow crops with long-term productivity, while soils in classes 4-8 are not suitable for commercial crop production and are best used for pasture, forestland, or non-agricultural uses.  Soils are classified for both irrigated and non-irrigated agriculture; the 'Land Capability' map on crop compass shows the soil classification for Oregon land suitable for growing commercial crops with irrigation. See [UDEL] for more information about each class."
+      mapDescription: "Land Capability Classification is a measure of the suitability of soils for field crops (developed by USDA). Soil is divided into eight capability classes, ranging from Class 1 (soils have slight limitations that restrict agricultural use) to Class 8 (soils or area are unsuitable for agriculture). With proper management, soils in classes 1-4 can be utilized to grow crops with long-term productivity, while soils in classes 4-8 are not suitable for commercial crop production and are best used for pasture, forestland, or non-agricultural uses."
     },
     {
       mapName: "Where crops are growing",
@@ -18,27 +18,4 @@ cropApp.controller('choroplethCtrl', function($scope) {
     $scope.currentMapName = $scope.mapInfo[index].mapName;
     $scope.currentMapDescription = $scope.mapInfo[index].mapDescription;
   };
-
-  // $scope.currentMap = 'assets/images/maps/oregon_county_outlines-simplified-aligned.svg';
-  // $scope.currentMapDescription = '';
-  //
-  // $scope.maps = [
-  //   {
-  //     mapURL: 'assets/images/maps/oregon_county_outlines-simplified-aligned.svg',
-  //     mapDescription: 'Veggies es county lines lorem ipsum vos postulo essum magis kohlrabi.'
-  //   },
-  //   {
-  //     mapURL: 'assets/images/maps/irrigatedlandcapability_range-simplified-aligned.svg',
-  //     mapDescription: 'Veggies es land capability lorem ipsum vos postulo essum magis kohlrabi.'
-  //   },
-  //   {
-  //     mapURL: 'assets/images/maps/all_crops_from_CDL_2012-simplified-aligned.svg',
-  //     mapDescription: 'Veggies es where crops can grow lorem ipsum vos postulo essum magis kohlrabi.'
-  //   }
-  // ];
-  //
-  // $scope.selectMap = function(index) {
-  //   $scope.currentMap = $scope.maps[index].mapURL;
-  //   $scope.currentMapDescription = $scope.maps[index].mapDescription;
-  // };
 });

app/angular/templates/choropleth.html

@@ -31,27 +31,30 @@ <h5>Irrigation Capability</h5>
         <div ng-show="toggleCropsGrowing" class="all-crops-legend">
           <ul>
             <li>
-              <div class="legend-box" id="crop-legend-box"></div> All Field Crops 
+              <div class="legend-box" id="crop-legend-box"></div> All Field Crops
             </li>
           </ul>
         </div>
         <div ng-show="selection" >
           <ul>
             <li>
-              <div class="legend-box" id="selected-crop-legend-box"></div> {{selection.commodity.CDL_name}}
+              <div class="legend-box" id="selected-crop-legend-box"></div>
+              <span ng-hide="!selection || selection.commodity.CDL_name === 'any'">{{selection.commodity.CDL_name}}</span>
             </li>
           </ul>
         </div>
       </div>
-      <!-- <img ng-show="toggleIrrigated" src="assets/images/maps/legends/irrigatedlandcapability_range_legend.png" alt="" /> -->
     </div>
     <div class="overlay-wrapper col-xs-12 col-sm-8 col-md-8 col-lg-8">
-      <img src="assets/images/maps/county_outlines-aligned.png" alt="temporary map" height="400" />
+      <img src="assets/images/maps/county_outlines-aligned.png" alt="county outlines map" height="400" />
       <div class="irrigated-map col-xs-12 col-sm-12 col-md-12 col-lg-12">
-        <img ng-show="toggleIrrigated" src="assets/images/maps/irrigatedlandcapability_range-aligned.png" alt="temporary map" height="400" />
+        <img ng-show="toggleIrrigated" src="assets/images/maps/irrigatedlandcapability_range-aligned.png" alt="land capability map" height="400" />
       </div>
       <div class="crops-map col-xs-12 col-sm-12 col-md-12 col-lg-12">
-        <img ng-show="toggleCropsGrowing" src="assets/images/maps/all_crops_from_CDL_2012-aligned.png" alt="temporary map" height="400" />
+        <img ng-show="toggleCropsGrowing" src="assets/images/maps/all_crops_from_CDL_2012-aligned.png" alt="all crops map" height="400" />
+      </div>
+      <div class="selected-crop-map col-xs-12 col-sm-12 col-md-12 col-lg-12">
+        <img ng-src="http://beta.cropcompass.org/assets/images/maps/CDL/{{selection.commodity.CDL_name}}.svg" height="400" />
       </div>
     </div>
     <div id="choropleth-type-selectors" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">

app/assets/css/main.css

@@ -312,7 +312,7 @@ table {
 
 .overlay-wrapper {
   position: relative; }
-  .overlay-wrapper .irrigated-map, .overlay-wrapper .crops-map {
+  .overlay-wrapper .irrigated-map, .overlay-wrapper .crops-map, .overlay-wrapper .selected-crop-map {
     top: 0;
     left: 0;
     z-index: 10;

app/assets/scss/_choropleth.scss

@@ -40,7 +40,7 @@
 
 .overlay-wrapper {
   position: relative;
-  .irrigated-map,.crops-map {
+  .irrigated-map,.crops-map,.selected-crop-map {
     top: 0;
     left: 0;
     z-index: 10;