@opengeoweb/webmap 2.1.1 → 2.1.2

package/lib/components/WMDrawMarker.d.ts

@@ -1,2 +1,2 @@
-declare const WMDrawMarker: (context: CanvasRenderingContext2D, coordx: number, coordy: number, fillColor?: string, outlineColor?: string) => void;
+declare const WMDrawMarker: (context: CanvasRenderingContext2D, coordx: number, coordy: number, fillColor?: string) => void;
 export default WMDrawMarker;

package/lib/components/WMJSMap.d.ts

@@ -15,6 +15,7 @@ export default class WMJSMap {
     mapPin: MapPin;
     mapdimensions: WMJSDimension[];
     stopAnimating: () => void;
+    showLayerInfo: boolean;
     isAnimating: boolean;
     animationDelay: number;
     animationList: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "GeoWeb webmap library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/webmap.esm.js

@@ -3399,7 +3399,6 @@ var WMJSDimension = /*#__PURE__*/function () {
  * */
 var WMDrawMarker = function WMDrawMarker(context, coordx, coordy) {
   var fillColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#FFF';
-  var outlineColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '#000';
   var ctx = context;
   var coord = {
     x: parseInt(coordx.toString(), 10),
@@ -3408,8 +3407,8 @@ var WMDrawMarker = function WMDrawMarker(context, coordx, coordy) {
   ctx.fillStyle = fillColor;
   ctx.globalAlpha = 1.0;
   ctx.beginPath();
-  var topRadius = 9;
-  var topHeight = 2.5 * topRadius;
+  var topRadius = 7;
+  var topHeight = 2 * topRadius;
   ctx.arc(coord.x, coord.y - topHeight, topRadius, Math.PI, Math.PI * 2);
   ctx.bezierCurveTo(coord.x + topRadius, coord.y - topHeight, coord.x + topRadius / 1.6, coord.y - topRadius, coord.x, coord.y);
   ctx.bezierCurveTo(coord.x, coord.y, coord.x - topRadius / 1.6, coord.y - topRadius, coord.x - topRadius, coord.y - topHeight);
@@ -3419,13 +3418,7 @@ var WMDrawMarker = function WMDrawMarker(context, coordx, coordy) {
 
   ctx.fillStyle = '#FFF';
   ctx.beginPath();
-  ctx.arc(coord.x, coord.y - topHeight, topRadius / 2, Math.PI * 2, 0);
-  ctx.fill();
-  /* Fill marker exact location */
-
-  ctx.fillStyle = outlineColor;
-  ctx.beginPath();
-  ctx.arc(coord.x, coord.y, 2, Math.PI * 2, 0);
+  ctx.arc(coord.x, coord.y - topHeight, topRadius / 2.5, Math.PI * 2, 0);
   ctx.fill();
 };
 
@@ -3506,7 +3499,7 @@ var MapPin = /*#__PURE__*/function () {
     key: "drawMarker",
     value: function drawMarker(ctx) {
       if (isDefined(this.x) && isDefined(this.y)) {
-        WMDrawMarker(ctx, this.x, this.y, '#9090FF', '#000');
+        WMDrawMarker(ctx, this.x, this.y, '#051039');
       }
     }
   }]);
@@ -4419,6 +4412,7 @@ var WMJSMap = /*#__PURE__*/function () {
 
       ctx.font = '10px Helvetica';
       ctx.textBaseline = 'middle';
+      ctx.textAlign = 'left';
 
       if (isDefined(this.mouseGeoCoordXY)) {
         var roundingFactor = 1.0 / Math.pow(10, parseInt(Math.log((this.bbox.right - this.bbox.left) / this.width) / Math.log(10), 10) - 2);
@@ -4453,6 +4447,30 @@ var WMJSMap = /*#__PURE__*/function () {
 
       ctx.fillStyle = '#000000';
       ctx.fillText("Map projection: ".concat(this.srs), 5, this.height - 26);
+      /* Show layer metadata */
+
+      if (this.showLayerInfo === true) {
+        var metadataX = 100;
+        var metadataY = 100;
+        var dimStartX = 150;
+        var rowHeight = 26;
+        var rowNumber = 0;
+        drawTextBG(ctx, 'Layer name', metadataX, metadataY + rowNumber * rowHeight, 10);
+        drawTextBG(ctx, 'Dimensions', metadataX + dimStartX, metadataY + rowNumber * rowHeight, 10);
+        rowNumber += 1;
+
+        for (var _j3 = 0; _j3 < this.layers.length; _j3 += 1) {
+          var layer = this.layers[_j3];
+          drawTextBG(ctx, "#".concat(_j3, ":").concat(layer.name), metadataX, metadataY + rowNumber * rowHeight, 10);
+
+          for (var d = 0; d < layer.dimensions.length; d += 1) {
+            var dimension = layer.dimensions[d];
+            drawTextBG(ctx, "".concat(dimension.name, " = ").concat(dimension.currentValue), metadataX + d * 200 + dimStartX, metadataY + rowNumber * rowHeight, 10);
+          }
+
+          rowNumber += 1;
+        }
+      }
     }
     /* Is called when the WebMapJS object is created */
 
@@ -4604,8 +4622,8 @@ var WMJSMap = /*#__PURE__*/function () {
       }
 
       for (var i = 0; i < this.layers.length; i += 1) {
-        for (var _j3 = 0; _j3 < this.layers[i].dimensions.length; _j3 += 1) {
-          var dim = this.layers[i].dimensions[_j3];
+        for (var _j4 = 0; _j4 < this.layers[i].dimensions.length; _j4 += 1) {
+          var dim = this.layers[i].dimensions[_j4];
           var mapdim = this.getDimension(dim.name);
 
           if (isDefined(mapdim)) {
@@ -4618,10 +4636,10 @@ var WMJSMap = /*#__PURE__*/function () {
         }
       }
 
-      for (var _j4 = 0; _j4 < this.mapdimensions.length; _j4 += 1) {
-        if (this.mapdimensions[_j4].used === false) {
-          this.mapdimensions.splice(_j4, 1);
-          _j4 -= 1;
+      for (var _j5 = 0; _j5 < this.mapdimensions.length; _j5 += 1) {
+        if (this.mapdimensions[_j5].used === false) {
+          this.mapdimensions.splice(_j5, 1);
+          _j5 -= 1;
         }
       }
 
@@ -6659,17 +6677,17 @@ var WMJSMap = /*#__PURE__*/function () {
             this.WMProjectionTempUndo[j] = this.WMProjectionUndo[j];
           }
 
-          for (var _j5 = 0; _j5 <= this.UndoPointer; _j5 += 1) {
-            this.WMProjectionUndo[_j5] = this.WMProjectionTempUndo[this.UndoPointer - _j5];
+          for (var _j6 = 0; _j6 <= this.UndoPointer; _j6 += 1) {
+            this.WMProjectionUndo[_j6] = this.WMProjectionTempUndo[this.UndoPointer - _j6];
           }
 
           this.UndoPointer = 0;
         }
 
-        for (var _j6 = this.MaxUndos - 1; _j6 > 0; _j6 -= 1) {
-          this.WMProjectionUndo[_j6].bbox.setBBOX(this.WMProjectionUndo[_j6 - 1].bbox);
+        for (var _j7 = this.MaxUndos - 1; _j7 > 0; _j7 -= 1) {
+          this.WMProjectionUndo[_j7].bbox.setBBOX(this.WMProjectionUndo[_j7 - 1].bbox);
 
-          this.WMProjectionUndo[_j6].srs = this.WMProjectionUndo[_j6 - 1].srs;
+          this.WMProjectionUndo[_j7].srs = this.WMProjectionUndo[_j7 - 1].srs;
         }
 
         this.WMProjectionUndo[0].bbox.setBBOX(this.bbox);

package/webmap.umd.js

@@ -3433,15 +3433,11 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var WMDrawMarker = function WMDrawMarker(context, coordx, coordy, fillColor, outlineColor) {
+  var WMDrawMarker = function WMDrawMarker(context, coordx, coordy, fillColor) {
     if (fillColor === void 0) {
       fillColor = '#FFF';
     }
 
-    if (outlineColor === void 0) {
-      outlineColor = '#000';
-    }
-
     var ctx = context;
     var coord = {
       x: parseInt(coordx.toString(), 10),
@@ -3450,8 +3446,8 @@
     ctx.fillStyle = fillColor;
     ctx.globalAlpha = 1.0;
     ctx.beginPath();
-    var topRadius = 9;
-    var topHeight = 2.5 * topRadius;
+    var topRadius = 7;
+    var topHeight = 2 * topRadius;
     ctx.arc(coord.x, coord.y - topHeight, topRadius, Math.PI, Math.PI * 2);
     ctx.bezierCurveTo(coord.x + topRadius, coord.y - topHeight, coord.x + topRadius / 1.6, coord.y - topRadius, coord.x, coord.y);
     ctx.bezierCurveTo(coord.x, coord.y, coord.x - topRadius / 1.6, coord.y - topRadius, coord.x - topRadius, coord.y - topHeight);
@@ -3461,13 +3457,7 @@
 
     ctx.fillStyle = '#FFF';
     ctx.beginPath();
-    ctx.arc(coord.x, coord.y - topHeight, topRadius / 2, Math.PI * 2, 0);
-    ctx.fill();
-    /* Fill marker exact location */
-
-    ctx.fillStyle = outlineColor;
-    ctx.beginPath();
-    ctx.arc(coord.x, coord.y, 2, Math.PI * 2, 0);
+    ctx.arc(coord.x, coord.y - topHeight, topRadius / 2.5, Math.PI * 2, 0);
     ctx.fill();
   };
 
@@ -3563,7 +3553,7 @@
 
     MapPin.prototype.drawMarker = function (ctx) {
       if (isDefined(this.x) && isDefined(this.y)) {
-        WMDrawMarker(ctx, this.x, this.y, '#9090FF', '#000');
+        WMDrawMarker(ctx, this.x, this.y, '#051039');
       }
     };
 
@@ -4474,6 +4464,7 @@
 
       ctx.font = '10px Helvetica';
       ctx.textBaseline = 'middle';
+      ctx.textAlign = 'left';
 
       if (isDefined(this.mouseGeoCoordXY)) {
         var roundingFactor = 1.0 / Math.pow(10, parseInt(Math.log((this.bbox.right - this.bbox.left) / this.width) / Math.log(10), 10) - 2);
@@ -4505,6 +4496,30 @@
 
       ctx.fillStyle = '#000000';
       ctx.fillText("Map projection: " + this.srs, 5, this.height - 26);
+      /* Show layer metadata */
+
+      if (this.showLayerInfo === true) {
+        var metadataX = 100;
+        var metadataY = 100;
+        var dimStartX = 150;
+        var rowHeight = 26;
+        var rowNumber = 0;
+        drawTextBG(ctx, 'Layer name', metadataX, metadataY + rowNumber * rowHeight, 10);
+        drawTextBG(ctx, 'Dimensions', metadataX + dimStartX, metadataY + rowNumber * rowHeight, 10);
+        rowNumber += 1;
+
+        for (var j = 0; j < this.layers.length; j += 1) {
+          var layer = this.layers[j];
+          drawTextBG(ctx, "#" + j + ":" + layer.name, metadataX, metadataY + rowNumber * rowHeight, 10);
+
+          for (var d = 0; d < layer.dimensions.length; d += 1) {
+            var dimension = layer.dimensions[d];
+            drawTextBG(ctx, dimension.name + " = " + dimension.currentValue, metadataX + d * 200 + dimStartX, metadataY + rowNumber * rowHeight, 10);
+          }
+
+          rowNumber += 1;
+        }
+      }
     };
     /* Is called when the WebMapJS object is created */