itowns 2.44.3-next.33 → 2.44.3-next.35

package/lib/Core/StyleOptions.js

@@ -0,0 +1,486 @@
+import { FEATURE_TYPES } from "./Feature.js";
+import * as maplibre from '@maplibre/maplibre-gl-style-spec';
+
+/**
+ * An object that can contain any properties (zoom, fill, stroke, point,
+ * text or/and icon) and sub properties of a Style.
+ * Used for the instanciation of a {@link Style}.
+ *
+ * @typedef {Object} StyleOptions
+ *
+ * @property {Object} [zoom] - Level on which to display the feature
+ * @property {Number} [zoom.max] - max level
+ * @property {Number} [zoom.min] - min level
+ *
+ * @property {Object} [fill] - Fill style for polygons.
+ * @property {String|Function|THREE.Color} [fill.color] - Defines the main fill color. Can be
+ * any [valid color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Default is no value, which means no fill.
+ * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.
+ * @property {Image|Canvas|String|Object|Function} [fill.pattern] - Defines a pattern to fill the
+ * surface with. It can be an `Image` to use directly, an url to fetch the pattern or an object containing
+ * the url of the image to fetch and the transformation to apply.
+ * from. See [this example](http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster)
+ * for how to use.
+ * @property {Image|String} [fill.pattern.source] - The image or the url to fetch the pattern image
+ * @property {Object} [fill.pattern.cropValues] - The x, y, width and height (in pixel) of the sub image to use.
+ * @property {THREE.Color} [fill.pattern.color] - Can be any
+ * [valid color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * It will change the color of the white pixels of the source image.
+ * @property {Number|Function} [fill.opacity] - The opacity of the color or of the
+ * pattern. Can be between `0.0` and `1.0`. Default is `1.0`.
+ * For a `GeometryLayer`, this opacity property isn't used.
+ * @property {Number|Function} [fill.base_altitude] - `GeometryLayer` style option, defines altitude
+ * for each coordinate.
+ * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist
+ * then the altitude value is set to 0.
+ * @property {Number|Function} [fill.extrusion_height] - `GeometryLayer` style option, if defined,
+ * polygons will be extruded by the specified amount
+ *
+ * @property {Object} [stroke] - Lines and polygons edges.
+ * @property {String|Function|THREE.Color} [stroke.color] The color of the line. Can be any [valid
+ * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Default is no value, which means no stroke.
+ * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.
+ * @property {Number|Function} [stroke.opacity] - The opacity of the line. Can be between
+ * `0.0` and `1.0`. Default is `1.0`.
+ * For a `GeometryLayer`, this opacity property isn't used.
+ * @property {Number|Function} [stroke.width] - The width of the line. Default is `1.0`.
+ * @property {Number|Function} [stroke.base_altitude] - `GeometryLayer` style option, defines altitude
+ * for each coordinate.
+ * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist
+ * then the altitude value is set to 0.
+ *
+ * @property {Object} [point] - Point style.
+ * @property {String|Function} [point.color] - The color of the point. Can be any [valid
+ * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Default is no value, which means points won't be displayed.
+ * @property {Number|Function} [point.radius] - The radius of the point, in pixel. Default
+ * is `2.0`.
+ * @property {String|Function} [point.line] - The color of the border of the point. Can be
+ * any [valid color
+ * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Not supported for a `GeometryLayer`.
+ * @property {Number|Function} [point.width] - The width of the border, in pixel. Default
+ * is `0.0` (no border).
+ * @property {Number|Function} [point.opacity] - The opacity of the point. Can be between
+ * `0.0` and `1.0`. Default is `1.0`.
+ * Not supported for `GeometryLayer`.
+ * @property {Number|Function} [point.base_altitude] - `GeometryLayer` style option, defines altitude
+ * for each coordinate.
+ * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist
+ * then the altitude value is set to 0.
+ * @property {Object} [point.model] - 3D model to instantiate at each point position.
+ *
+ * @property {Object} [text] - All things {@link Label} related. (Supported for Points features, not yet
+ * for Lines and Polygons features.)
+ * @property {String|Function} [text.field] - A string representing a property key of
+ * a `FeatureGeometry` enclosed in brackets, that will be replaced by the value of the
+ * property for each geometry. For example, if each geometry contains a `name` property,
+ * `text.field` can be set to `{name}`. Default is no value, indicating that no
+ * text will be displayed.
+ *
+ * It's also possible to create more complex expressions. For example, you can combine
+ * text that will always be displayed (e.g. `foo`) and variable properties (e.g. `{bar}`)
+ * like the following: `foo {bar}`. You can also use multiple variables in one field.
+ * Let's say for instance that you have two properties latin name and local name of a
+ * place, you can write something like `{name_latin} - {name_local}` which can result
+ * in `Marrakesh - مراكش` for example.
+ * @property {String|Function} [text.color] - The color of the text. Can be any [valid
+ * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Default is `#000000`.
+ * @property {String|Number[]|Function} [text.anchor] - The anchor of the text compared to its
+ * position (see {@link Label} for the position). Can be one of the following values: `top`,
+ * `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`
+ * or `bottom-right`. Default is `center`.
+ *
+ * It can also be defined as an Array of two numbers. Each number defines an offset (in
+ * fraction of the label width and height) between the label position and the top-left
+ * corner of the text. The first value is the horizontal offset, and the second is the
+ * vertical offset. For example, `[-0.5, -0.5]` will be equivalent to `center`.
+ * @property {Array|Function} [text.offset] - The offset of the text, depending on its
+ * anchor, in pixels. First value is from `left`, second is from `top`. Default
+ * is `[0, 0]`.
+ * @property {Number|Function} [text.padding] - The padding outside the text, in pixels.
+ * Default is `2`.
+ * @property {Number|Function} [text.size] - The size of the font, in pixels. Default is
+ * `16`.
+ * @property {Number|Function} [text.wrap] - The maximum width, in pixels, before the text
+ * is wrapped, because the string is too long. Default is `10`.
+ * @property {Number|Function} [text.spacing] - The spacing between the letters, in `em`.
+ * Default is `0`.
+ * @property {String|Function} [text.transform] - A value corresponding to the [CSS
+ * property
+ * `text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).
+ * Default is `none`.
+ * @property {String|Function} [text.justify] - A value corresponding to the [CSS property
+ * `text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
+ * Default is `center`.
+ * @property {Number|Function} [text.opacity] - The opacity of the text. Can be between
+ * `0.0` and `1.0`. Default is `1.0`.
+ * @property {Array|Function} [text.font] - A list (as an array of string) of font family
+ * names, prioritized in the order it is set. Default is `Open Sans Regular,
+ * Arial Unicode MS Regular, sans-serif`.
+ * @property {String|Function} [text.haloColor] - The color of the halo. Can be any [valid
+ * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * Default is `#000000`.
+ * @property {Number|Function} [text.haloWidth] - The width of the halo, in pixels.
+ * Default is `0`.
+ * @property {Number|Function} [text.haloBlur] - The blur value of the halo, in pixels.
+ * Default is `0`.
+ *
+ * @property {Object} [icon] - Defines the appearance of icons attached to label.
+ * @property {String} [icon.source] - The url of the icons' image file.
+ * @property {String} [icon.id] - The id of the icons' sub-image in a vector tile data set.
+ * @property {String} [icon.cropValues] - the x, y, width and height (in pixel) of the sub image to use.
+ * @property {String} [icon.anchor] - The anchor of the icon compared to the label position.
+ * Can be `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`
+ * or `bottom-right`. Default is `center`.
+ * @property {Number} [icon.size] - If the icon's image is passed with `icon.source` and/or
+ * `icon.id`, its size when displayed on screen is multiplied by `icon.size`. Default is `1`.
+ * @property {String|Function} [icon.color] - The color of the icon. Can be any [valid
+ * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+ * It will change the color of the white pixels of the icon source image.
+ * @property {Number|Function} [icon.opacity] - The opacity of the icon. Can be between
+ * `0.0` and `1.0`. Default is `1.0`.
+*/
+
+/**
+ * generate a StyleOptions from (geojson-like) properties.
+ * @param {Object} properties (geojson-like) properties.
+ * @param {FeatureContext} featCtx the context of the feature
+ *
+ * @returns {StyleOptions} containing all properties for itowns.Style
+ */
+function setFromProperties(properties, featCtx) {
+  const type = featCtx.type;
+  const style = {};
+  if (type === FEATURE_TYPES.POINT) {
+    const point = {
+      ...(properties.fill !== undefined && {
+        color: properties.fill
+      }),
+      ...(properties['fill-opacity'] !== undefined && {
+        opacity: properties['fill-opacity']
+      }),
+      ...(properties.stroke !== undefined && {
+        line: properties.stroke
+      }),
+      ...(properties.radius !== undefined && {
+        radius: properties.radius
+      })
+    };
+    if (Object.keys(point).length) {
+      style.point = point;
+    }
+    const text = {
+      ...(properties['label-color'] !== undefined && {
+        color: properties['label-color']
+      }),
+      ...(properties['label-opacity'] !== undefined && {
+        opacity: properties['label-opacity']
+      }),
+      ...(properties['label-size'] !== undefined && {
+        size: properties['label-size']
+      })
+    };
+    if (Object.keys(point).length) {
+      style.text = text;
+    }
+    const icon = {
+      ...(properties.icon !== undefined && {
+        source: properties.icon
+      }),
+      ...(properties['icon-scale'] !== undefined && {
+        size: properties['icon-scale']
+      }),
+      ...(properties['icon-opacity'] !== undefined && {
+        opacity: properties['icon-opacity']
+      }),
+      ...(properties['icon-color'] !== undefined && {
+        color: properties['icon-color']
+      })
+    };
+    if (Object.keys(icon).length) {
+      style.icon = icon;
+    }
+  } else {
+    const stroke = {
+      ...(properties.stroke !== undefined && {
+        color: properties.stroke
+      }),
+      ...(properties['stroke-width'] !== undefined && {
+        width: properties['stroke-width']
+      }),
+      ...(properties['stroke-opacity'] !== undefined && {
+        opacity: properties['stroke-opacity']
+      })
+    };
+    if (Object.keys(stroke).length) {
+      style.stroke = stroke;
+    }
+    if (type !== FEATURE_TYPES.LINE) {
+      const fill = {
+        ...(properties.fill !== undefined && {
+          color: properties.fill
+        }),
+        ...(properties['fill-opacity'] !== undefined && {
+          opacity: properties['fill-opacity']
+        })
+      };
+      if (Object.keys(fill).length) {
+        style.fill = fill;
+      }
+    }
+  }
+  return style;
+}
+function readVectorProperty(property, options) {
+  if (property != undefined) {
+    if (maplibre.expression.isExpression(property)) {
+      return maplibre.expression.createExpression(property, options).value;
+    } else {
+      return property;
+    }
+  }
+}
+const inv255 = 1 / 255;
+function rgba2rgb(orig) {
+  if (!orig) {
+    return {};
+  } else if (orig.stops || orig.expression) {
+    return {
+      color: orig
+    };
+  } else if (typeof orig == 'string') {
+    const result = orig.match(/(?:((hsl|rgb)a? *\(([\d.%]+(?:deg|g?rad|turn)?)[ ,]*([\d.%]+)[ ,]*([\d.%]+)[ ,/]*([\d.%]*)\))|(#((?:[\d\w]{3}){1,2})([\d\w]{1,2})?))/i);
+    if (result === null) {
+      return {
+        color: orig,
+        opacity: 1.0
+      };
+    } else if (result[7]) {
+      let opacity = 1.0;
+      if (result[9]) {
+        opacity = parseInt(result[9].length == 1 ? `${result[9]}${result[9]}` : result[9], 16) * inv255;
+      }
+      return {
+        color: `#${result[8]}`,
+        opacity
+      };
+    } else if (result[1]) {
+      return {
+        color: `${result[2]}(${result[3]},${result[4]},${result[5]})`,
+        opacity: result[6] ? Number(result[6]) : 1.0
+      };
+    }
+  }
+}
+
+/**
+ * generate a StyleOptions from vector tile layer properties.
+ * @param {Object} layer vector tile layer.
+ * @param {Object} sprites vector tile layer.
+ * @param {Boolean} [symbolToCircle=false]
+ *
+ * @returns {StyleOptions} containing all properties for itowns.Style
+ */
+function setFromVectorTileLayer(layer, sprites) {
+  let symbolToCircle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const style = {
+    fill: {},
+    stroke: {},
+    point: {},
+    text: {},
+    icon: {}
+  };
+  layer.layout = layer.layout || {};
+  layer.paint = layer.paint || {};
+  if (layer.type === 'fill') {
+    const {
+      color,
+      opacity
+    } = rgba2rgb(readVectorProperty(layer.paint['fill-color'] || layer.paint['fill-pattern'], {
+      type: 'color'
+    }));
+    style.fill.color = color;
+    style.fill.opacity = readVectorProperty(layer.paint['fill-opacity']) || opacity;
+    if (layer.paint['fill-pattern']) {
+      try {
+        style.fill.pattern = {
+          id: layer.paint['fill-pattern'],
+          source: sprites.source,
+          cropValues: sprites[layer.paint['fill-pattern']]
+        };
+      } catch (err) {
+        err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.paint['fill-pattern']`;
+        throw err;
+      }
+    }
+    if (layer.paint['fill-outline-color']) {
+      const {
+        color,
+        opacity
+      } = rgba2rgb(readVectorProperty(layer.paint['fill-outline-color'], {
+        type: 'color'
+      }));
+      style.stroke.color = color;
+      style.stroke.opacity = opacity;
+      style.stroke.width = 1.0;
+    } else {
+      style.stroke.width = 0.0;
+    }
+  } else if (layer.type === 'line') {
+    const prepare = readVectorProperty(layer.paint['line-color'], {
+      type: 'color'
+    });
+    const {
+      color,
+      opacity
+    } = rgba2rgb(prepare);
+    style.stroke.dasharray = readVectorProperty(layer.paint['line-dasharray']);
+    style.stroke.color = color;
+    style.stroke.lineCap = layer.layout['line-cap'];
+    style.stroke.width = readVectorProperty(layer.paint['line-width']);
+    style.stroke.opacity = readVectorProperty(layer.paint['line-opacity']) || opacity;
+  } else if (layer.type === 'circle' || symbolToCircle) {
+    const {
+      color,
+      opacity
+    } = rgba2rgb(readVectorProperty(layer.paint['circle-color'], {
+      type: 'color'
+    }));
+    style.point.color = color;
+    style.point.opacity = opacity;
+    style.point.radius = readVectorProperty(layer.paint['circle-radius']);
+  } else if (layer.type === 'symbol') {
+    // if symbol we shouldn't draw stroke but defaut value is 1.
+    style.stroke.width = 0.0;
+    // overlapping order
+    style.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);
+    if (style.text.zOrder == 'auto') {
+      style.text.zOrder = readVectorProperty(layer.layout['symbol-sort-key']) || 'Y';
+    } else if (style.text.zOrder == 'viewport-y') {
+      style.text.zOrder = 'Y';
+    } else if (style.text.zOrder == 'source') {
+      style.text.zOrder = 0;
+    }
+
+    // position
+    style.text.anchor = readVectorProperty(layer.layout['text-anchor']);
+    style.text.offset = readVectorProperty(layer.layout['text-offset']);
+    style.text.padding = readVectorProperty(layer.layout['text-padding']);
+    style.text.size = readVectorProperty(layer.layout['text-size']);
+    style.text.placement = readVectorProperty(layer.layout['symbol-placement']);
+    style.text.rotation = readVectorProperty(layer.layout['text-rotation-alignment']);
+
+    // content
+    style.text.field = readVectorProperty(layer.layout['text-field']);
+    style.text.wrap = readVectorProperty(layer.layout['text-max-width']); // Units ems
+    style.text.spacing = readVectorProperty(layer.layout['text-letter-spacing']);
+    style.text.transform = readVectorProperty(layer.layout['text-transform']);
+    style.text.justify = readVectorProperty(layer.layout['text-justify']);
+
+    // appearance
+    const {
+      color,
+      opacity
+    } = rgba2rgb(readVectorProperty(layer.paint['text-color'], {
+      type: 'color'
+    }));
+    style.text.color = color;
+    style.text.opacity = readVectorProperty(layer.paint['text-opacity']) || opacity !== undefined && opacity;
+    style.text.font = readVectorProperty(layer.layout['text-font']);
+    const haloColor = readVectorProperty(layer.paint['text-halo-color'], {
+      type: 'color'
+    });
+    if (haloColor) {
+      style.text.haloColor = haloColor.color || haloColor;
+      style.text.haloWidth = readVectorProperty(layer.paint['text-halo-width']);
+      style.text.haloBlur = readVectorProperty(layer.paint['text-halo-blur']);
+    }
+
+    // additional icon
+    const iconImg = readVectorProperty(layer.layout['icon-image']);
+    if (iconImg) {
+      const cropValueDefault = {
+        x: 0,
+        y: 0,
+        width: 1,
+        height: 1
+      };
+      try {
+        style.icon.id = iconImg;
+        if (iconImg.stops) {
+          const iconCropValue = {
+            ...(iconImg.base !== undefined && {
+              base: iconImg.base
+            }),
+            stops: iconImg.stops.map(stop => {
+              let cropValues = sprites[stop[1]];
+              if (stop[1].includes('{')) {
+                cropValues = function (p) {
+                  const id = stop[1].replace(/\{(.+?)\}/g, (a, b) => p[b] || '').trim();
+                  if (cropValues === undefined) {
+                    // const warning = `WARNING: "${id}" not found in sprite file`;
+                    sprites[id] = cropValueDefault; // or return cropValueDefault;
+                  }
+                  return sprites[id];
+                };
+              } else if (cropValues === undefined) {
+                // const warning = `WARNING: "${stop[1]}" not found in sprite file`;
+                cropValues = cropValueDefault;
+              }
+              return [stop[0], cropValues];
+            })
+          };
+          style.icon.cropValues = iconCropValue;
+        } else {
+          style.icon.cropValues = sprites[iconImg];
+          if (iconImg.includes('{')) {
+            style.icon.cropValues = function (p) {
+              const id = iconImg.replace(/\{(.+?)\}/g, (a, b) => p[b] || '').trim();
+              if (sprites[id] === undefined) {
+                // const warning = `WARNING: "${id}" not found in sprite file`;
+                sprites[id] = cropValueDefault; // or return cropValueDefault;
+              }
+              return sprites[id];
+            };
+          } else if (sprites[iconImg] === undefined) {
+            // const warning = `WARNING: "${iconImg}" not found in sprite file`;
+            style.icon.cropValues = cropValueDefault;
+          }
+        }
+        style.icon.source = sprites.source;
+        style.icon.size = readVectorProperty(layer.layout['icon-size']) ?? 1;
+        const {
+          color,
+          opacity
+        } = rgba2rgb(readVectorProperty(layer.paint['icon-color'], {
+          type: 'color'
+        }));
+        // https://docs.mapbox.com/style-spec/reference/layers/#paint-symbol-icon-color
+        if (iconImg.sdf) {
+          style.icon.color = color;
+        }
+        style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) ?? (opacity !== undefined && opacity);
+      } catch (err) {
+        err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.layout['icon-image']`;
+        throw err;
+      }
+    }
+  }
+  // VectorTileSet: by default minZoom = 0 and maxZoom = 24
+  // https://docs.mapbox.com/style-spec/reference/layers/#maxzoom and #minzoom
+  // Should be move to layer properties, when (if) one mapBox layer will be considered as several itowns layers.
+  // issue https://github.com/iTowns/itowns/issues/2153 (last point)
+  style.zoom = {
+    min: layer.minzoom || 0,
+    max: layer.maxzoom || 24
+  };
+  return style;
+}
+export default {
+  setFromProperties,
+  setFromVectorTileLayer
+};

package/lib/Core/Tile/Tile.js

@@ -10,7 +10,7 @@ const r = {
   col: 0,
   invDiff: 0
 };
-function _rowColfromParent(/** @type {Tile} */tile, /** @type {number} */zoom) {
+function _rowColfromParent(tile, zoom) {
   const diffLevel = tile.zoom - zoom;
   const diff = 2 ** diffLevel;
   r.invDiff = 1 / diff;
@@ -18,17 +18,18 @@ function _rowColfromParent(/** @type {Tile} */tile, /** @type {number} */zoom) {
   r.col = (tile.col - tile.col % diff) * r.invDiff;
   return r;
 }
-const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
-const _extent2 = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _extent = new Extent('EPSG:4326');
+const _extent2 = new Extent('EPSG:4326');
 const _c = new Coordinates('EPSG:4326', 0, 0);
 class Tile {
   /**
-   * Tile is a geographical bounding rectangle defined by zoom, row and column.
+   * A tile is a geographical bounding rectangle uniquely defined by its zoom,
+   * row and column.
    *
-   * @param {String} crs projection of limit values.
-   * @param {number} [zoom=0] zoom value
-   * @param {number} [row=0] row value
-   * @param {number} [col=0] column value
+   * @param crs - projection of limit values.
+   * @param zoom - `zoom` value. Default is 0.
+   * @param row - `row` value. Default is 0.
+   * @param col - `column` value. Default is 0.
    */
   constructor(crs) {
     let zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -42,22 +43,21 @@ class Tile {
   }
 
   /**
-   * Clone this tile
-   * @return {Tile} cloned tile
+   * Returns a new tile with the same bounds and crs as this one.
    */
   clone() {
     return new Tile(this.crs, this.zoom, this.row, this.col);
   }
 
   /**
-   * Convert tile to the specified extent.
-   * @param {string} crs the projection of destination.
-   * @param {Extent} target copy the destination to target.
-   * @return {Extent}
+   * Converts this tile to the specified extent.
+   * @param crs - target's projection.
+   * @param target - The target to store the projected extent. If this not
+   * provided a new extent will be created.
    */
-  toExtent(crs, target) {
+  toExtent(crs) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Extent('EPSG:4326');
     CRS.isValid(crs);
-    target = target || new Extent('EPSG:4326', [0, 0, 0, 0]);
     const {
       epsg,
       globalExtent,
@@ -70,16 +70,13 @@ class Tile {
     target.south = globalExtent.south + _dimensionTile.y * (countTiles.y - this.row - 1);
     target.north = target.south + _dimensionTile.y;
     target.crs = epsg;
-    target.zoom = this.zoom;
     return crs == epsg ? target : target.as(crs, target);
   }
 
   /**
-   * Return true if `tile` is inside this tile.
+   * Checks whether another tile is inside this tile.
    *
-   * @param {Tile} tile the tile to check
-   *
-   * @return {boolean}
+   * @param extent - the tile to check.
    */
   isInside(tile) {
     if (this.zoom == tile.zoom) {
@@ -87,36 +84,35 @@ class Tile {
     } else if (this.zoom < tile.zoom) {
       return false;
     } else {
-      _rowColfromParent(this, tile.zoom);
+      const r = _rowColfromParent(this, tile.zoom);
       return r.row == tile.row && r.col == tile.col;
     }
   }
 
   /**
-   * Return the translation and scale to transform this tile to input tile.
+   * Returns the translation and scale to transform this tile to the input
+   * tile.
    *
-   * @param {Tile} tile input tile
-   * @param {THREE.Vector4} target copy the result to target.
-   * @return {THREE.Vector4} {x: translation on west-east, y: translation on south-north, z: scale on west-east, w: scale on south-north}
+   * @param tile - the input tile.
+   * @param target - copy the result to target.
    */
   offsetToParent(tile) {
     let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector4();
     if (this.crs != tile.crs) {
       throw new Error('unsupported mix');
     }
-    _rowColfromParent(this, tile.zoom);
+    const r = _rowColfromParent(this, tile.zoom);
     return target.set(this.col * r.invDiff - r.col, this.row * r.invDiff - r.row, r.invDiff, r.invDiff);
   }
 
   /**
-   * Return parent tile with input level
+   * Returns the parent tile at the given level.
    *
-   * @param {number} levelParent level of parent.
-   * @return {Tile}
+   * @param levelParent - the level of the parent tile.
    */
   tiledExtentParent(levelParent) {
     if (levelParent && levelParent < this.zoom) {
-      _rowColfromParent(this, levelParent);
+      const r = _rowColfromParent(this, levelParent);
       return new Tile(this.crs, levelParent, r.row, r.col);
     } else {
       return this;
@@ -124,13 +120,11 @@ class Tile {
   }
 
   /**
-   * Set zoom, row and column values
-   *
-   * @param {number} [zoom=0] zoom value
-   * @param {number} [row=0] row value
-   * @param {number} [col=0] column value
+   * Sets zoom, row and column values.
    *
-   * @return {Tile}
+   * @param zoom - zoom value.
+   * @param row - row value.
+   * @param col - column value.
    */
   set() {
     let zoom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -143,9 +137,8 @@ class Tile {
   }
 
   /**
-   * Copy to this tile to input tile.
-   * @param {Tile} tile
-   * @return {Tile} copied extent
+   * Copies the passed tile to this tile.
+   * @param tile - tile to copy.
    */
   copy(tile) {
     this.crs = tile.crs;
@@ -154,20 +147,13 @@ class Tile {
 
   /**
    * Return values of tile in string, separated by the separator input.
-   * @param {string} separator
-   * @return {string}
+   * @param separator - string separator
    */
   toString() {
     let separator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return `${this.zoom}${separator}${this.row}${separator}${this.col}`;
   }
 }
-
-/**
- * @param {Extent} e
- * @param {string} tms
- * @returns {Tile[]}
- */
 export function tiledCovering(e, tms) {
   if (e.crs == 'EPSG:4326' && tms == 'EPSG:3857') {
     const WMTS_PM = [];
@@ -179,7 +165,7 @@ export function tiledCovering(e, tms) {
     } = getInfoTms(tms);
     extent.clampByExtent(globalExtent);
     extent.planarDimensions(_dimensionTile);
-    const zoom = e.zoom + 1 || Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const zoom = Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
     const countTiles = getCountTiles(tms, zoom);
     const center = extent.center(_c);
     _tmsCoord.x = center.x - globalExtent.west;
@@ -203,12 +189,14 @@ export function tiledCovering(e, tms) {
     const center = e.center(_c);
     e.planarDimensions(_dimensionTile);
     // Each level has 2^n * 2^n tiles...
-    // ... so we count how many tiles of the same width as tile we can fit in the layer
+    // ... so we count how many tiles of the same width as tile we can fit
+    // in the layer
     // ... 2^zoom = tilecount => zoom = log2(tilecount)
     const zoom = Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
     const countTiles = getCountTiles(tms, zoom);
 
-    // Now that we have computed zoom, we can deduce x and y (or row / column)
+    // Now that we have computed zoom, we can deduce x and y (or row /
+    // column)
     _tmsCoord.x = center.x - globalExtent.west;
     _tmsCoord.y = isInverted ? globalExtent.north - center.y : center.y - globalExtent.south;
     _tmsCoord.divide(globalDimension).multiply(countTiles).floor();