Merge remote-tracking branch 'origin/2.3'

.travis.yml

@@ -53,10 +53,9 @@ before_script:
 script:
 # Lint
 - make lint
+- make spell
 - make check-examples-checker
-# Unit tests
 - make test
-- make spell
 # Webpack build of ngeo/gmf examples and gmf apps
 - if [ "${TRAVIS_PULL_REQUEST}" = false ]; then export NODE_ENV=production; fi
 - make examples-hosted

contribs/gmf/apps/desktop/index.html.ejs

@@ -318,6 +318,7 @@
         ngeo-resizemap-state="profileChartActive">
       </gmf-profile>
     </footer>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
     <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCYnqxEQA5sz13sWSgMr97ejzvUeGP8gz4"></script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>

contribs/gmf/apps/desktop_alt/index.html.ejs

@@ -349,6 +349,7 @@
         ngeo-resizemap-state="queryGridActive">
       </gmf-displayquerygrid>
     </footer>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
     <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCYnqxEQA5sz13sWSgMr97ejzvUeGP8gz4"></script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>

contribs/gmf/apps/mobile/index.html.ejs

@@ -169,6 +169,7 @@
         </gmf-authentication>
       </div>
     </ngeo-modal>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>

contribs/gmf/apps/mobile_alt/index.html.ejs

@@ -163,6 +163,7 @@
         gmf-mobile-nav-back="authCtrl.gmfUser.username !== null">
       </gmf-authentication>
     </nav>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>

contribs/gmf/apps/oeedit/index.html.ejs

@@ -170,6 +170,7 @@
         ngeo-resizemap-state="profileChartActive">
       </gmf-profile>
     </footer>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>

contribs/gmf/src/controllers/AbstractAppController.js

@@ -559,7 +559,7 @@ const exports = function(config, $scope, $injector) {
    * @type {?string}
    * @export
    */
-  this.displaywindowHeight = null;
+  this.displaywindowHeight = '50vh';
 
   /**
    * @type {boolean}
@@ -583,7 +583,7 @@ const exports = function(config, $scope, $injector) {
    * @type {?string}
    * @export
    */
-  this.displaywindowWidth = null;
+  this.displaywindowWidth = '50vw';
 };
 
 

contribs/gmf/src/controllers/desktop.scss

@@ -554,6 +554,13 @@ gmf-featurestyle {
   right: $app-margin;
 }
 
+/** ngeo-displayquery-window */
+main div.ngeo-displaywindow {
+  top: $topbar-height + 2 * $app-margin + 2 * $map-tools-size;
+  left: $nav-width + $app-margin;
+  right: inherit
+}
+
 /** Disclaimer */
 $bgselector-image-size: 3.00rem;
 .gmf-app-map-messages {

contribs/gmf/src/controllers/mobile.scss

@@ -171,3 +171,10 @@ main .gmf-app-map-messages {
     width: 0.94rem;
   }
 }
+
+/** ngeo-displayquery-window */
+main div.ngeo-displaywindow {
+  top: $map-tools-size + 2 * $app-margin;
+  left: $app-margin;
+  right: initial;
+}

contribs/gmf/src/datasource/ExternalDataSourcesManager.js

@@ -15,6 +15,7 @@ import ngeoDatasourceOGC from 'ngeo/datasource/OGC.js';
 import ngeoDatasourceOGCGroup from 'ngeo/datasource/OGCGroup.js';
 import ngeoDatasourceWMSGroup from 'ngeo/datasource/WMSGroup.js';
 import * as olBase from 'ol/index.js';
+import {isEmpty} from 'ol/extent.js';
 import * as olEvents from 'ol/events.js';
 import olCollection from 'ol/Collection.js';
 import olFormatGPX from 'ol/format/GPX.js';
@@ -464,33 +465,48 @@ const exports = class {
 
   /**
    * @param {!File} file File.
+   * @param {function(boolean):*?} opt_callback Callback called with true if the file is loaded and added.
+   *     Otherwise with false.
    * @export
    */
-  createAndAddDataSourceFromFile(file) {
+  createAndAddDataSourceFromFile(file, opt_callback) {
     this.getFileDataSource_(file).then(
       (dataSource) => {
+        let success = true;
         const fileGroup = this.fileGroup_;
 
-        // (1) No need to do anything if the file has already been added...
-        if (fileGroup.dataSources.includes(dataSource)) {
-          return;
-        }
+        // Look if the extent is valid (and so at least one geometry)
+        if (isEmpty(dataSource.extent)) {
+          success = false;
+
+        } else {
+          // (1) No need to do anything if the file has already been added...
+          if (fileGroup.dataSources.includes(dataSource)) {
+            return;
+          }
 
-        // (2) Okay, we need to add this data source. First, add its layer
-        //     to the map.
-        this.addLayer_(dataSource.layer);
+          // (2) Okay, we need to add this data source. First, add its layer  to the map.
+          this.addLayer_(dataSource.layer);
 
-        // (3) Add it to the file group
-        fileGroup.addDataSource(dataSource);
+          // (3) Add it to the file group
+          fileGroup.addDataSource(dataSource);
 
-        // (4) Recenter the map view onto its extent
-        this.map_.getView().fit(dataSource.extent);
+          // (4) Recenter the map view onto its extent if there is at least one geometry (and so a valid extent)
+          this.map_.getView().fit(dataSource.extent);
 
-        // (5) Finally, add it to the ngeo collection
-        this.dataSources_.push(dataSource);
+          // (5) Finally, add it to the ngeo collection
+          this.dataSources_.push(dataSource);
+        }
+        // Call the callback.
+        if (opt_callback) {
+          opt_callback(success);
+        }
       },
       (rejections) => {
-        googAsserts.fail(`Failed to load file: ${file.name}`);
+        console.error(`Failed to load file: ${file.name}`);
+        if (opt_callback) {
+          opt_callback(false);
+        }
       }
     );
   }

contribs/gmf/src/import/import.scss

@@ -9,6 +9,9 @@ gmf-importdatasource {
   .gmf-importdatasource-url-form-group {
     background-color: #fff;
   }
+  .btn.has-error {
+    color: $danger;
+  }
 }
 
 gmf-wmscapabilitylayertreenode,

contribs/gmf/src/import/importdatasourceComponent.html

@@ -2,7 +2,8 @@
   <select
     class="form-control"
     ng-model="$ctrl.mode"
-    ng-options="mode | translate for mode in $ctrl.modes">
+    ng-options="mode | translate for mode in $ctrl.modes"
+    ng-click="$ctrl.hasError = false">
   </select>
 </div>
 
@@ -39,12 +40,14 @@
     <div class="form-group">
       <button
         class="btn btn-sm btn-default form-control"
+        ng-class="{'has-error': $ctrl.hasError}"
         title="{{'Load a file from local' | translate}}"
         type="submit"
         ng-click="idsl_form.$valid && $ctrl.load()"
-        ng-disabled="$ctrl.file === undefined"
+        ng-disabled="$ctrl.file === undefined || $ctrl.hasError"
       >
-        <span>{{'Load local file' | translate}}</span>
+        <span ng-if="!$ctrl.hasError">{{'Load local file' | translate}}</span>
+        <span ng-if="$ctrl.hasError">{{'Unable to load the file' | translate}}</span>
       </button>
     </div>
   </form>
@@ -68,6 +71,7 @@
     <div class="form-group">
       <button
         class="btn btn-sm btn-default form-control gmf-importdatasource-connect-btn"
+        ng-class="{'has-error': $ctrl.hasError}"
         title="{{'Connect to online resource' | translate}}"
         type="submit"
         ng-click="idsc_form.$valid && $ctrl.connect()"

contribs/gmf/src/import/importdatasourceComponent.js

@@ -290,6 +290,7 @@ exports.Controller_ = class {
    * @export
    */
   browse() {
+    this.hasError = false;
     this.element_.find('input[type=file][name=file]').click();
   }
 
@@ -338,7 +339,11 @@ exports.Controller_ = class {
    */
   load() {
     const file = googAsserts.assert(this.file);
-    this.gmfExternalDataSourcesManager_.createAndAddDataSourceFromFile(file);
+    this.gmfExternalDataSourcesManager_.createAndAddDataSourceFromFile(file, (success) => {
+      if (!success) {
+        this.hasError = true;
+      }
+    });
   }
 
   /**

contribs/gmf/src/layertree/TreeManager.js

@@ -407,7 +407,7 @@ exports.prototype.notifyCantAddGroups_ = function(groups) {
   const names = [];
   const gettextCatalog = this.gettextCatalog_;
   groups.forEach((group) => {
-    names.push(group.name);
+    names.push(gettextCatalog.getString(group.name));
   });
   const msg = (names.length < 2) ?
     gettextCatalog.getString('group is already loaded.') :

contribs/gmf/src/layertree/component.html

@@ -246,8 +246,8 @@
     {{'Hide legend'|translate}}
   </a>
   <div ng-if="gmfLayertreeCtrl.isNodeLegendVisible('#gmf-layertree-node-' + layertreeCtrl.uid + '-legend')">
-    <div ng-repeat="(title, url) in ::gmfLayertreeCtrl.getLegendsObject(layertreeCtrl)">
-      <p ng-if="::gmfLayertreeCtrl.getNumberOfLegendsObject(layertreeCtrl) > 1">{{title|translate}}</p>
+    <div ng-repeat="(title, url) in gmfLayertreeCtrl.getLegendsObject(layertreeCtrl)">
+      <p ng-if="gmfLayertreeCtrl.getNumberOfLegendsObject(layertreeCtrl) > 1">{{title|translate}}</p>
       <img ng-src="{{url}}"></img>
     </div>
   </div>

contribs/gmf/src/permalink/Permalink.js

@@ -58,14 +58,15 @@ import olLayerGroup from 'ol/layer/Group.js';
  * @param {angular.Scope} $rootScope Angular rootScope.
  * @param {angular.$injector} $injector Main injector.
  * @param {ngeox.miscDebounce} ngeoDebounce ngeo Debounce factory.
+ * @param {angularGettext.Catalog} gettextCatalog Gettext service.
  * @param {ngeo.misc.EventHelper} ngeoEventHelper Ngeo event helper service
  * @param {ngeo.statemanager.Service} ngeoStateManager The ngeo statemanager service.
  * @param {ngeo.statemanager.Location} ngeoLocation ngeo location service.
  * @ngInject
  * @ngdoc service
  * @ngname gmfPermalink
  */
-const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, ngeoEventHelper,
+const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, gettextCatalog, ngeoEventHelper,
   ngeoStateManager, ngeoLocation) {
 
   /**
@@ -330,6 +331,12 @@ const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, ngeo
       'showMeasure': ngeoFormatFeatureProperties.SHOW_MEASURE,
       'strokeColor': ngeoFormatFeatureProperties.COLOR,
       'strokeWidth': ngeoFormatFeatureProperties.STROKE
+    },
+    defaultValues: {
+      'name': feature => gettextCatalog.getString(feature.getGeometry().getType()),
+      'fillOpacity': () => 0.5,
+      'showLabel': () => false,
+      'showMeasure': () => false
     }
   });
 

contribs/gmf/src/print/component.js

@@ -843,9 +843,18 @@ exports.Controller_ = class {
     }
 
     if (this.layoutInfo.legend) {
-      const legend = this.getLegend_(scale);
+      const center = this.map.getView().getCenter();
+      const deltaX = this.paperSize_[0] * scale / 2 / ngeoPrintUtils.INCHES_PER_METER_ / ngeoPrintUtils.DOTS_PER_INCH_;
+      const deltaY = this.paperSize_[1] * scale / 2 / ngeoPrintUtils.INCHES_PER_METER_ / ngeoPrintUtils.DOTS_PER_INCH_;
+      const bbox = [
+        center[0] - deltaX,
+        center[1] - deltaY,
+        center[0] + deltaX,
+        center[1] + deltaY,
+      ];
+      const legend = this.getLegend_(scale, this.layoutInfo.dpi, bbox);
       if (legend !== null) {
-        customAttributes['legend'] = this.getLegend_(scale);
+        customAttributes['legend'] = legend;
       }
     }
 
@@ -1072,10 +1081,12 @@ exports.Controller_ = class {
 
   /**
    * @param {number} scale The scale to get the legend (for wms layers only).
+   * @param {number} dpi The DPI.
+   * @param {Array.number} bbox The bbox.
    * @return {Object?} Legend object for print report or null.
    * @private
    */
-  getLegend_(scale) {
+  getLegend_(scale, dpi, bbox) {
     const legend = {'classes': []};
     let classes, layerNames, layerName, icons;
     const gettextCatalog = this.gettextCatalog_;
@@ -1111,7 +1122,9 @@ exports.Controller_ = class {
             icons = this.getMetadataLegendImage_(name);
             if (!icons) {
               icons = this.ngeoLayerHelper_.getWMSLegendURL(source.getUrl(), name,
-                scale);
+                scale, undefined, undefined, undefined, source.serverType_, dpi, bbox,
+                this.map.getView().getProjection().getCode()
+              );
             }
             // Don't add classes without legend url or from layers without any
             // active name.

contribs/gmf/src/query/grid.scss

@@ -8,6 +8,8 @@ $table-height: $grid-height - $app-margin - 2 * $map-tools-size;
   border-top: solid 0.06rem black;
   background-color: white;
   height: $grid-height;
+  position: fixed;
+  width: 100%;
 
   .ngeo-grid-table-container {
     height: $table-height;

contribs/gmf/src/query/window.scss

@@ -5,31 +5,29 @@ $displayquerywindow-detailed-header-height: 3.12rem;
 $displayquerywindow-detailed-details-line-height: 1.25rem;
 $displayquerywindow-detailed-details-height: 8 * $displayquerywindow-detailed-details-line-height;
 
-.gmf-displayquerywindow {
+div.gmf-displayquerywindow {
   .details {
     display: none;
   }
-  .animation-container {
-    // height with 2em: 1em per text (title, subtitle)
-    height: 4 * $app-margin + $half-app-margin + $map-tools-size + 1.25rem;
-  }
 }
 
-.ngeo-displaywindow {
+div.ngeo-displaywindow {
+  margin: 0 auto;
   .animation-container {
     height: 100%;
     width: 100%;
   }
+  .details.iframe {
+    overflow: hidden;
+  }
 }
 
 .gmf-displayquerywindow, .ngeo-displaywindow {
   right: $app-margin + $map-tools-size + $app-margin;
   left: initial;
   bottom: $app-margin;
   width: $displayquerywindow-tablet-width;
-  max-width: $displayquerywindow-tablet-width;
   margin-left: -$displayquerywindow-tablet-width / 2;
-  max-height: 10 * $map-tools-size;
   position: fixed;
   z-index: $above-all;
   .collapse-button {
@@ -208,8 +206,11 @@ $displayquerywindow-detailed-details-height: 8 * $displayquerywindow-detailed-de
       height: calc(100% - ($map-tools-size + $app-margin));
     }
 
-    .animation-container-detailed {
-      height: ($displayquerywindow-detailed-header-height + $displayquerywindow-detailed-details-height / 2 + $app-margin * 3) + $map-tools-size;
+    .animation-container {
+      height: $map-tools-size * 2;
+      &.animation-container-detailed {
+        height: ($displayquerywindow-detailed-header-height + $displayquerywindow-detailed-details-height / 2 + $app-margin * 3) + $map-tools-size;
+      }
     }
   }
 }