Merge pull request #436 from sigcorporativo-ja/develop

v6.4.0

mapea-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapea",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "Herramienta para desarrollo de mapas interactivos de forma sencilla",
   "keywords": [
     "map",
@@ -18,10 +18,6 @@
     "url": "https://github.com/sigcorporativo-ja/Mapea4/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.51",
-    "@babel/preset-env": "^7.4.4",
-    "babel-loader": "^8.0.0-beta.4",
     "chromedriver": "^2.46.0",
     "copy-webpack-plugin": "^6.1.0",
     "cross-env": "^5.2.0",
@@ -32,41 +28,41 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "expect.js": "^0.3.1",
+    "expect.js": "0.3.1",
     "expose-loader": "^0.7.5",
     "file-loader": "^1.1.11",
     "fs-extra": "2.0.0",
-    "get-image-colors": "^2.0.0",
+    "get-image-colors": "^4.0.1",
     "html-loader": "^0.5.5",
-    "jsdoc-plugin-typescript": "^2.0.5",
-    "karma": "^5.2.2",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-mocha": "^2.0.1",
+    "jsdoc-plugin-typescript": "^2.2.0",
+    "karma": "^6.3.8",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-mocha": "2.0.1",
     "karma-webpack": "^3.0.5",
     "mini-css-extract-plugin": "^0.4.1",
-    "mocha": "^8.1.3",
-    "nightwatch": "^1.4.2",
+    "mocha": "10.2.0",
+    "nightwatch": "^2.6.13",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "style-loader": "^0.21.0",
     "terser-webpack-plugin": "^4.2.1",
     "uglify-js": "^2.6.1",
     "uglifycss": "0.0.29",
     "url-loader": "^1.0.1",
-    "walk": "^2.3.14",
+    "walk": "^2.3.9",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
-    "yargs": "^16.0.3"
+    "yargs": "17.0.0"
   },
   "dependencies": {
     "chroma-js": "^1.3.7",
     "draggabilly": "^2.2.0",
     "handlebars": "4.5.2",
     "jsdoc": "^3.6.4",
     "jsts": "^2.0.2",
-    "ol": "6.15.1",
-    "proj4": "^2.8.0"
+    "ol": "7.2.2",
+    "proj4": "2.8.1"
   },
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=2048 ./node/npm run build:core && ./node/npm run build:plugins && ./node/npm run build:plugins-extern",

mapea-js/pom.xml

@@ -6,7 +6,7 @@
    <parent>
       <groupId>es.juntadeandalucia.mapea</groupId>
       <artifactId>mapea-parent</artifactId>
-      <version>6.3.1</version>
+      <version>6.4.0</version>
       <relativePath>../mapea-parent/pom.xml</relativePath>
    </parent>
    <licenses>

mapea-js/src/facade/js/Map.js

@@ -2804,6 +2804,34 @@ class Map extends Base {
     const resolution = getResolutionFromScale(scale, this.getProjection().units);
     this.getImpl().setToClosestScale(resolution);
   }
+
+  /**
+   * This function gets no-base layers added to the map
+   *
+   * @function
+   * @returns {Array<Layer>}
+   * @api
+   */
+  getOverlayLayers() {
+    const layers = this.getLayers().filter(layer => layer.name !== '__draw__' && layer.transparent === true);
+    return layers;
+  }
+
+  /**
+   * This function removes no-base layers to the map
+   *
+   * @function
+   * @returns {Array<Layer>}
+   * @api
+   */
+  removeOverlayLayers() {
+  // gets the layers to remove
+    const layers = this.getOverlayLayers();
+
+    this.removeLayers(layers);
+
+    return this;
+  }
 }
 
 /**

mapea-js/src/facade/js/event/eventtype.js

@@ -273,6 +273,14 @@ export const CHANGE_ZOOM = 'change:zoom';
  */
 export const CHANGE_ROTATION = 'change:rotation';
 
+/**
+ * Event type
+ * @public
+ * @type {string}
+ * @api
+ */
+export const LAYER_VISIBILITY_CHANGE = 'changed:layer-visibility';
+
 /**
  * Event type
  * @public

mapea-js/src/facade/js/layer/Layer.js

@@ -6,6 +6,7 @@ import * as parserParameter from '../parameter/parameter.js';
 import Base from '../Base.js';
 import { isNullOrEmpty, concatUrlPaths, isUndefined, normalize, isString, isFunction, generateRandom, isBoolean, isArray, isObject } from '../util/Utils.js';
 import { getValue } from '../i18n/language.js';
+import * as EventType from '../event/eventtype';
 
 /**
  * @classdesc
@@ -425,6 +426,8 @@ class LayerBase extends Base {
     visibility = /^1|(true)$/i.test(visibility);
 
     this.getImpl().setVisible(visibility);
+
+    this.fire(EventType.LAYER_VISIBILITY_CHANGE, [{ visibility, layer: this }, this]);
   }
 
   /**

mapea-js/src/facade/js/style/Category.js

@@ -207,19 +207,15 @@ class Category extends Composite {
         getImageSize(style.get('icon.src')).then((img) => {
           image.width = style.get('icon.scale') ? img.width * style.get('icon.scale') : img.width;
           image.height = style.get('icon.scale') ? img.height * style.get('icon.scale') : img.height;
-          style.toImage().then((data) => {
-            image.src = data;
-          });
+        });
+      }
+      const src = style.toImage();
+      if (src instanceof Promise) {
+        src.then((data) => {
+          image.src = data;
         });
       } else {
-        const src = style.toImage();
-        if (src instanceof Promise) {
-          src.then((data) => {
-            image.src = data;
-          });
-        } else {
-          image.src = src;
-        }
+        image.src = src;
       }
     }
   }

mapea-js/src/facade/js/style/Choropleth.js

@@ -365,7 +365,7 @@ class Choropleth extends StyleComposite {
         }
       }
       for (let i = this.breakPoints_.length - 1; i > -1; i -= 1) {
-        const filterLTE = new Filter.LTE(this.attributeName_, this.breakPoints_[i]);
+        const filterLTE = Filter.LTE(this.attributeName_, this.breakPoints_[i]);
         filterLTE.execute(features).forEach(f => f.setStyle(this.choroplethStyles_[i]));
       }
       this.updateCanvas();
@@ -405,7 +405,7 @@ class Choropleth extends StyleComposite {
           opacity: 1,
         },
         stroke: {
-          color: c,
+          color: 'black',
           width: 1,
         },
       },

mapea-js/src/impl/ol/Map.js

@@ -1222,7 +1222,7 @@ class Map extends MObject {
           }
           // recalculates resolution if there are not
           // any base layer
-          if (!existsBaseLayer) {
+          if (!existsBaseLayer && layer.name.indexOf('cluster_cover_') === -1) {
             this.updateResolutionsFromBaseLayer();
           }
         }

mapea-js/src/impl/ol/control/Control.js

@@ -34,10 +34,7 @@ class Control extends OLControl {
    */
   addTo(map, element) {
     this.facadeMap_ = map;
-    OLControl.call(this, {
-      element,
-      target: null,
-    });
+    this.element = element;
     map.getMapImpl().addControl(this);
   }
 

mapea-js/src/impl/ol/control/GetFeatureInfo.js

@@ -3,7 +3,6 @@
  */
 import OLFormatWFS from 'ol/format/WFS';
 import { unByKey } from 'ol/Observable';
-import OLControl from 'ol/control/Control';
 import * as dialog from 'M/dialog';
 import { isString, addParameters } from 'M/util/Utils';
 import getfeatureinfoPopupTemplate from 'templates/getfeatureinfo_popup.html';
@@ -69,10 +68,7 @@ class GetFeatureInfo extends Control {
     const hasControl = olControls.some(control => control instanceof GetFeatureInfo);
     if (hasControl === false) {
       this.facadeMap_ = map;
-      OLControl.call(this, {
-        element,
-        target: null,
-      });
+      this.element = element;
       map.getMapImpl().addControl(this);
     }
   }

mapea-js/src/impl/ol/control/Mouse.js

@@ -15,7 +15,7 @@ class Mouse extends OLControlMousePosition {
     const opts = extend({
       coordinateFormat: createStringXY(options.precision || 4),
       label: options.label,
-      undefinedHTML: '',
+      placeholder: '',
       className: 'm-mouse-position g-cartografia-flecha',
     }, vendorOptions, true);
 

mapea-js/src/impl/ol/control/OverviewMap.js

@@ -185,24 +185,28 @@ class OverviewMap extends OLControlOverviewMap {
    */
   addLayers(map) {
     const olLayers = [];
-    map.getLayers().forEach((layer) => {
-      if ((layer.type === WMSType || layer.transparent === false) && layer.isVisible()) {
-        // const olLayer = layer.getImpl().cloneOLLayer();
-        const olLayer = layer.getImpl().getOLLayer();
-        let layerAux = null;
-        const properties = olLayer.getProperties();
-        delete properties.map;
-        if (layer.tiled === true) {
-          layerAux = new OLLayerTile(properties);
-        } else {
-          layerAux = new OLLayerImage(properties);
+    map.getLayers().forEach((l) => {
+      [l].forEach((layer) => {
+        if ((layer.type === WMSType || layer.transparent === false) && layer.isVisible()) {
+          // const olLayer = layer.getImpl().cloneOLLayer();
+          const olLayer = layer.getImpl().getOLLayer();
+          let layerAux = null;
+          if (!isNullOrEmpty(olLayer)) {
+            const properties = olLayer.getProperties();
+            delete properties.map;
+            if (layer.tiled === true) {
+              layerAux = new OLLayerTile(properties);
+            } else {
+              layerAux = new OLLayerImage(properties);
+            }
+          }
+          if (isNullOrEmpty(layerAux)) {
+            layer.getImpl().on(EventType.ADDED_TO_MAP, this.addLayer_.bind(this));
+          } else {
+            olLayers.push(layerAux);
+          }
         }
-        if (isNullOrEmpty(layerAux)) {
-          layer.getImpl().on(EventType.ADDED_TO_MAP, this.addLayer_.bind(this));
-        } else {
-          olLayers.push(layerAux);
-        }
-      }
+      });
     });
     const newView = new View({
       projection: getProj(map.getProjection().code),

mapea-js/src/impl/ol/control/ScaleLine.js

@@ -2,7 +2,7 @@
  * @module M/impl/control/ScaleLine
  */
 import OLControlScaleLine from 'ol/control/ScaleLine';
-import ProjUnits from 'ol/proj/Units';
+// import ProjUnits from 'ol/proj/Units';
 import { getPointResolution, METERS_PER_UNIT } from 'ol/proj';
 import { assert } from 'ol/asserts';
 
@@ -108,13 +108,11 @@ class ScaleLine extends OLControlScaleLine {
     const center = viewState.center;
     const projection = viewState.projection;
     const units = this.getUnits();
-    const pointResolutionUnits = units === Units.DEGREES ?
-      ProjUnits.DEGREES :
-      ProjUnits.METERS;
+    const pointResolutionUnits = units === Units.DEGREES ? 'degrees' : 'm';
     let pointResolution =
       getPointResolution(projection, viewState.resolution, center, pointResolutionUnits);
-    if (projection.getUnits() !== ProjUnits.DEGREES && projection.getMetersPerUnit() &&
-      pointResolutionUnits === ProjUnits.METERS) {
+    if (projection.getUnits() !== 'degrees' && projection.getMetersPerUnit() &&
+      pointResolutionUnits === 'm') {
       pointResolution *= projection.getMetersPerUnit();
     }
 
@@ -124,8 +122,8 @@ class ScaleLine extends OLControlScaleLine {
     let nominalCount = this.minWidth_ * pointResolution;
     let suffix = '';
     if (units === Units.DEGREES) {
-      const metersPerDegree = METERS_PER_UNIT[ProjUnits.DEGREES];
-      if (projection.getUnits() === ProjUnits.DEGREES) {
+      const metersPerDegree = METERS_PER_UNIT.degrees;
+      if (projection.getUnits() === 'degrees') {
         nominalCount *= metersPerDegree;
       } else {
         pointResolution /= metersPerDegree;

mapea-js/src/impl/ol/ext/OLMouse.js

@@ -75,7 +75,7 @@ class Mouse extends MousePosition {
    * @function
    */
   updateHTML_(pixel) {
-    let html = this.undefinedHTML_;
+    let html = this.placeholder_;
     const projection = this.getProjection();
     if (pixel && this.mapProjection_) {
       if (!this.transform_) {

mapea-js/src/impl/ol/format/KML.js

@@ -3,7 +3,7 @@
  */
 import { decodeHtml } from 'M/util/Utils';
 import OLFormatKML from 'ol/format/KML';
-import IconAnchorUnits from 'ol/style/IconAnchorUnits';
+import Icon from 'ol/style/Icon';
 import OLStyleIcon from 'ol/style/Icon';
 import { parse as parseXML } from 'ol/xml';
 
@@ -119,8 +119,8 @@ class KML extends OLFormatKML {
         screenYUnits = KML.DEFAULT_IMAGE_STYLE_ANCHOR_Y_UNITS;
       } else if (/^http:\/\/maps\.(?:google|gstatic)\.com\//.test(src)) {
         screenXY = [0.5, 0];
-        screenXUnits = IconAnchorUnits.FRACTION;
-        screenYUnits = IconAnchorUnits.FRACTION;
+        screenXUnits = Icon.FRACTION;
+        screenYUnits = Icon.FRACTION;
       }
 
       // rotation
@@ -197,15 +197,15 @@ KML.DEFAULT_IMAGE_STYLE_ANCHOR = [20, 2]; // FIXME maybe [8, 32] ?
  *  See https://github.com/openlayers/openlayers/blob/v4.0.1/src/ol/format/kml.js#L168
  * See https://github.com/openlayers/openlayers/blob/c27aac20b7642f7878abe1e23ace07a851511829/src/ol/style/IconAnchorUnits.js#L11
  * @const
- * @type {ol.style.IconAnchorUnits}
+ * @type {ol.style.Icon}
  */
 KML.DEFAULT_IMAGE_STYLE_ANCHOR_X_UNITS = 'pixels';
 
 /**
  * See https://github.com/openlayers/openlayers/blob/v4.0.1/src/ol/format/kml.js#L176
  * See https://github.com/openlayers/openlayers/blob/c27aac20b7642f7878abe1e23ace07a851511829/src/ol/style/IconAnchorUnits.js#L11
  * @const
- * @type {ol.style.IconAnchorUnits}
+ * @type {ol.style.Icon}
  */
 KML.DEFAULT_IMAGE_STYLE_ANCHOR_Y_UNITS = 'pixels';