add ngeo and layermanager

tobias-hotz · Jun 23, 2014 · cf42993 · cf42993
1 parent 4bee2c2
commit cf42993
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 184 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/common/map/mapService.js b/web-ui/src/main/resources/catalog/components/common/map/mapService.js
@@ -3,13 +3,14 @@
 
 
   var module = angular.module('gn_map_service', [
+    'go'
   ]);
 
   module.provider('gnMap', function() {
     this.$get = [
+      'goDecorateLayer',
       'gnConfig',
-      'gnDefinePropertiesForLayer',
-      function(gnConfig, gnDefinePropertiesForLayer) {
+      function(goDecorateLayer, gnConfig) {
 
         var defaultMapConfig = {
           'useOSM': 'true',
@@ -191,7 +192,7 @@
                 attribution: options.attribution,
                 source: source
               });
-              gnDefinePropertiesForLayer(layer);
+              goDecorateLayer(layer);
               layer.preview = options.preview;
               layer.label = options.label;
               layer.displayInLayerManager = true;
@@ -210,135 +211,7 @@
       }];
   });
 
-  /**
-   * This service is a function that define properties (data and accessor
-   * descriptors) for the OpenLayers layer passed as an argument.
-   *
-   * Adding descriptors to layers makes it possible to control the states
-   * of layers (visibility, opacity, etc.) through ngModel. (ngModel indeed
-   * requires the expression to be "assignable", and there's currently no
-   * way pass to pass getter and setter functions to ngModel.)
-   */
-  module.provider('gnDefinePropertiesForLayer', function() {
-
-    this.$get = function() {
-      return function defineProperties(olLayer) {
-        Object.defineProperties(olLayer, {
-          attribution: {
-            get: function() {
-              return this.get('attribution');
-            },
-            set: function(val) {
-              this.set('attribution', val);
-            }
-          },
-          visible: {
-            get: function() {
-              return this.getVisible();
-            },
-            set: function(val) {
-              this.setVisible(val);
-            }
-          },
-          invertedOpacity: {
-            get: function() {
-              return (Math.round((1 - this.getOpacity()) * 100) / 100) + '';
-            },
-            set: function(val) {
-              this.setOpacity(1 - val);
-            }
-          },
-          id: {
-            get: function() {
-              return this.get('id') || this.bodId;
-            },
-            set: function(val) {
-              this.set('id', val);
-            }
-          },
-          bodId: {
-            get: function() {
-              return this.get('bodId');
-            },
-            set: function(val) {
-              this.set('bodId', val);
-            }
-          },
-          label: {
-            get: function() {
-              return this.get('label');
-            },
-            set: function(val) {
-              this.set('label', val);
-            }
-          },
-          url: {
-            get: function() {
-              return this.get('url');
-            },
-            set: function(val) {
-              this.set('url', val);
-            }
-          },
-          type: {
-            get: function() {
-              return this.get('type');
-            },
-            set: function(val) {
-              this.set('type', val);
-            }
-          },
-          timeEnabled: {
-            get: function() {
-              return this.get('timeEnabled');
-            },
-            set: function(val) {
-              this.set('timeEnabled', val);
-            }
-          },
-          time: {
-            get: function() {
-              if (this instanceof ol.layer.Layer) {
-                var src = this.getSource();
-                if (src instanceof ol.source.WMTS) {
-                  return src.getDimensions().Time;
-                } else if (src instanceof ol.source.ImageWMS ||
-                    src instanceof ol.source.TileWMS) {
-                  return src.getParams().TIME;
-                }
-              }
-              return undefined;
-            },
-            set: function(val) {
-              if (this instanceof ol.layer.Layer) {
-                var src = this.getSource();
-                if (src instanceof ol.source.WMTS) {
-                  src.updateDimensions({'Time': val});
-                } else if (src instanceof ol.source.ImageWMS ||
-                    src instanceof ol.source.TileWMS) {
-                  src.updateParams({'TIME': val});
-                }
-              }
-            }
-          },
-          background: {
-            writable: true,
-            value: false
-          },
-          displayInLayerManager: {
-            writable: true,
-            value: true
-          },
-          preview: {
-            writable: true,
-            value: false
-          }
-        });
-      };
-    };
-  });
-
-  module.provider('gaLayerFilters', function() {
+  module.provider('gnLayerFilters', function() {
     this.$get = function() {
       return {
         /**
@@ -350,14 +223,6 @@
          */
         selected: function(layer) {
           return layer.displayInLayerManager;
-        },
-        /**
-         * Keep only time enabled layer
-         */
-        timeEnabledLayersFilter: function(layer) {
-          return !layer.background &&
-              layer.timeEnabled &&
-              layer.visible;
         }
       };
     };

diff --git a/web-ui/src/main/resources/catalog/components/viewer/draw/DrawDirective.js b/web-ui/src/main/resources/catalog/components/viewer/draw/DrawDirective.js
@@ -16,9 +16,9 @@
     '$rootScope',
     '$timeout',
     '$translate',
-    'gnDefinePropertiesForLayer',
+    'goDecorateLayer',
     'gaLayerFilters',
-    function($rootScope, $timeout, $translate, gnDefinePropertiesForLayer, gaLayerFilters) {
+    function($rootScope, $timeout, $translate, goDecorateLayer, gaLayerFilters) {
       return {
         restrict: 'A',
         replace: true,
@@ -414,7 +414,7 @@
             visible: true,
             style: scope.options.styleFunction
           });
-          gnDefinePropertiesForLayer(layer);
+          goDecorateLayer(layer);
           layer.displayInLayerManager = false;
           scope.layers = scope.map.getLayers().getArray();
           scope.layerFilter = gaLayerFilters.selected;

diff --git a/web-ui/src/main/resources/catalog/components/viewer/layermanager/LayerManagerDirective.js b/web-ui/src/main/resources/catalog/components/viewer/layermanager/LayerManagerDirective.js
@@ -13,23 +13,18 @@
    * The server list is given in global properties.
    */
   module.directive('gnLayermanager', [
-    'gnOwsCapabilities',
-    'gaLayerFilters',
-    '$translate',
-    function (gnOwsCapabilities, gaLayerFilters, $translate) {
+    'gnLayerFilters',
+    function (gnLayerFilters) {
     return {
       restrict: 'A',
-      replace: true,
       templateUrl: '../../catalog/components/viewer/layermanager/' +
         'partials/layermanager.html',
       scope: {
         map: '=gnLayermanagerMap'
       },
       link: function (scope, element, attrs) {
 
-        scope.layers = scope.map.getLayers().getArray();
-
-        scope.layerFilter = gaLayerFilters.selected;
+        scope.layerFilterFn = gnLayerFilters.selected;
 
         scope.removeLayerFromMap = function(layer) {
           scope.map.removeLayer(layer);

diff --git a/web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanager.html b/web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanager.html
@@ -1,7 +1,18 @@
-<ul>
-  <li ng-if="!(filteredLayers = (layers | filter:layerFilter)).length" translate>no_layers_info</li>
-  <li ng-repeat="layer in filteredLayers" class="ga-layer-folded {{layer.time ? 'ga-layer-time-enabled' : ''}}">
-    <button type="button" ng-click="toggleVisibility(layer)" class="btn btn-primary btn-xs">&times;</button>
+<ul class="list-group">
+  <li ng-repeat="layer in (map.getLayers().getArray() | filter:layerFilterFn)" class="list-group-item">
+    <span class="badge fa fa-cog"></span>
+
+      <label for="checkbox">{{layer.label}}</label>
+      <input id="checkbox" type="checkbox" ng-model="layer.visible"  />
+      <input id="range" type="range" min="0" max="1" step="0.05" ng-model="layer.opacity" />
+  </li>
+</ul>
+
+<!--
+    <ul>
+      <li ng-if="!(filteredLayers = (layers | filter:layerFilter)).length" translate>no_layers_info</li>
+      <li ng-repeat="layer in filteredLayers" class="ga-layer-folded {{layer.time ? 'ga-layer-time-enabled' : ''}}">
+        <button type="button" ng-click="toggleVisibility(layer)" class="btn btn-primary btn-xs">&times;</button>
     <label class="ga-checkbox">
       <input type="checkbox" data-ng-model="layer.visible"/>
       <span></span>
@@ -23,4 +34,4 @@
     </span>
     <i class="icon-gear"></i>
   </li>
-</ul>
+</ul>-->
diff --git a/web-ui/src/main/resources/catalog/components/viewer/measure/MeasureDirective.js b/web-ui/src/main/resources/catalog/components/viewer/measure/MeasureDirective.js
@@ -53,9 +53,9 @@
   module.directive('gnMeasure', [
     '$document',
     '$rootScope',
-    'gnDefinePropertiesForLayer',
+    'goDecorateLayer',
     'gaLayerFilters',
-    function($document, $rootScope, gnDefinePropertiesForLayer, gaLayerFilters) {
+    function($document, $rootScope, goDecorateLayer, gaLayerFilters) {
       return {
         restrict: 'A',
         replace: true,
@@ -144,7 +144,7 @@
             source: new ol.source.Vector(),
             style: scope.options.styleFunction
           });
-          gnDefinePropertiesForLayer(layer);
+          goDecorateLayer(layer);
           layer.displayInLayerManager = false;
           scope.layers = scope.map.getLayers().getArray();
           scope.layerFilter = gaLayerFilters.selected;

diff --git a/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html b/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html
@@ -1,7 +1,6 @@
 <div class="wrapper" data-ng-controller="gnViewerController">
 
-  <div id="map" class="map" gn-map="" gn-map-map="map"></div>
-
+  <div id="map" go-map="" class="map"></div>
   <div class="search-container">
     <input type="search" class="form-control" placeholder="Recherche">
   </div>
@@ -50,28 +49,7 @@
         <h5>Couches thématiques</h5>
       </div>
 
-      <ul class="list-group">
-        <li class="list-group-item">
-          <span class="badge fa fa-cog"></span>
-          Cras justo odio
-        </li>
-        <li class="list-group-item">
-          <span class="badge fa fa-cog"></span>
-          Cras justo odio
-        </li>
-        <li class="list-group-item">
-          <span class="badge fa fa-cog"></span>
-          Cras justo odio
-        </li>
-        <li class="list-group-item">
-          <span class="badge fa fa-cog"></span>
-          Cras justo odio
-        </li>
-        <li class="list-group-item">
-          <span class="badge fa fa-cog"></span>
-          Cras justo odio
-        </li>
-      </ul>
+      <div gn-layermanager="" gn-layermanager-map="map"></div>
     </div>
 
     <div class="panel-body">

diff --git a/web-ui/src/main/resources/catalog/tmp/gn_bootstrap.less b/web-ui/src/main/resources/catalog/tmp/gn_bootstrap.less
@@ -18,7 +18,7 @@
 // Components
 @import "../lib/style/bootstrap/less/component-animations.less";
 @import "../lib/style/bootstrap/less/glyphicons.less";
-/* @import "../lib/style/bootstrap/less/dropdowns.less"; */
+@import "../lib/style/bootstrap/less/dropdowns.less";
 @import "../lib/style/bootstrap/less/button-groups.less";
 @import "../lib/style/bootstrap/less/input-groups.less";
 @import "../lib/style/bootstrap/less/navs.less";

diff --git a/web-ui/src/main/resources/web-ui-wro-sources.xml b/web-ui/src/main/resources/web-ui-wro-sources.xml
@@ -18,6 +18,7 @@
             <jsSource webappPath="catalog/lib/bootstrap-3.0.1.min.js"/>
             <jsSource webappPath="catalog/lib/proj4js-compressed.js" minimize="false"/>
             <jsSource webappPath="catalog/lib/ol.js"/>
+            <jsSource webappPath="catalog/lib/ngeo.js"/>
             <jsSource webappPath="catalog/lib/d3.v3.min.js"/>
             <jsSource webappPath="catalog/lib/nv.d3.min.js"/>
             <jsSource webappPath="catalog/lib/jquery.ext/jquery.ui.widget.js"/>

diff --git a/web/src/main/webapp/xslt/base-layout-cssjs-loader.xsl b/web/src/main/webapp/xslt/base-layout-cssjs-loader.xsl
@@ -53,6 +53,7 @@
         <script src="{$uiResourcesPath}lib/jquery.ext/jquery-ui-slider.min.js"></script>
         <script src="{$uiResourcesPath}lib/proj4js-compressed.js"></script>
         <script src="{$uiResourcesPath}lib/ol-whitespace.js"></script>
+        <script src="{$uiResourcesPath}lib/ngeo.js"></script>
         <xsl:if test="$withD3">
           <script src="{$uiResourcesPath}lib/d3.v3.js"></script>
           <script src="{$uiResourcesPath}lib/nv.d3.js"></script>