Add types for the UTFGrid and TileJSON JSON responses

src/ol/source/TileJSON.js

@@ -17,6 +17,25 @@ import SourceState from '../source/State.js';
 import TileImage from '../source/TileImage.js';
 import {createXYZ, extentFromProjection} from '../tilegrid.js';
 
+
+/**
+ * @typedef {Object} Config
+ * @property {string} [name] The name.
+ * @property {string} [description] The description.
+ * @property {string} [version] The version.
+ * @property {string} [attribution] The attribution.
+ * @property {string} [template] The template.
+ * @property {string} [legend] The legend.
+ * @property {string} [scheme] The scheme.
+ * @property {Array<string>} tiles The tile URL templates.
+ * @property {Array<string>} [grids] Optional grids.
+ * @property {number} [minzoom] Minimum zoom level.
+ * @property {number} [maxzoom] Maximum zoom level.
+ * @property {Array<number>} [bounds] Optional bounds.
+ * @property {Array<number>} [center] Optional center.
+ */
+
+
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
@@ -29,7 +48,7 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js';
  * Useful when the server does not support CORS..
  * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels).
  * Higher values can increase reprojection performance, but decrease precision.
- * @property {tileJSON} [tileJSON] TileJSON configuration for this source.
+ * @property {Config} [tileJSON] TileJSON configuration for this source.
  * If not provided, `url` must be configured.
  * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is
  * ```js
@@ -67,7 +86,7 @@ class TileJSON extends TileImage {
     });
 
     /**
-     * @type {TileJSON}
+     * @type {Config}
      * @private
      */
     this.tileJSON_ = null;
@@ -122,7 +141,7 @@ class TileJSON extends TileImage {
   }
 
   /**
-   * @return {TileJSON} The tilejson object.
+   * @return {Config} The tilejson object.
    * @api
    */
   getTileJSON() {
@@ -131,7 +150,7 @@ class TileJSON extends TileImage {
 
   /**
    * @protected
-   * @param {TileJSON} tileJSON Tile JSON.
+   * @param {Config} tileJSON Tile JSON.
    */
   handleTileJSONResponse(tileJSON) {
 
@@ -139,14 +158,14 @@ class TileJSON extends TileImage {
 
     const sourceProjection = this.getProjection();
     let extent;
-    if (tileJSON.bounds !== undefined) {
+    if (tileJSON['bounds'] !== undefined) {
       const transform = getTransformFromProjections(
         epsg4326Projection, sourceProjection);
-      extent = applyTransform(tileJSON.bounds, transform);
+      extent = applyTransform(tileJSON['bounds'], transform);
     }
 
-    const minZoom = tileJSON.minzoom || 0;
-    const maxZoom = tileJSON.maxzoom || 22;
+    const minZoom = tileJSON['minzoom'] || 0;
+    const maxZoom = tileJSON['maxzoom'] || 22;
     const tileGrid = createXYZ({
       extent: extentFromProjection(sourceProjection),
       maxZoom: maxZoom,
@@ -154,15 +173,15 @@ class TileJSON extends TileImage {
     });
     this.tileGrid = tileGrid;
 
-    this.tileUrlFunction = createFromTemplates(tileJSON.tiles, tileGrid);
+    this.tileUrlFunction = createFromTemplates(tileJSON['tiles'], tileGrid);
 
-    if (tileJSON.attribution !== undefined && !this.getAttributions()) {
+    if (tileJSON['attribution'] !== undefined && !this.getAttributions()) {
       const attributionExtent = extent !== undefined ?
         extent : epsg4326Projection.getExtent();
 
       this.setAttributions(function(frameState) {
         if (intersects(attributionExtent, frameState.extent)) {
-          return [tileJSON.attribution];
+          return [tileJSON['attribution']];
         }
         return null;
       });

src/ol/source/UTFGrid.js

@@ -16,6 +16,13 @@ import TileSource from '../source/Tile.js';
 import {getKeyZXY} from '../tilecoord.js';
 import {createXYZ, extentFromProjection} from '../tilegrid.js';
 
+/**
+ * @typedef {Object} UTFGridJSON
+ * @property {Array<string>} grid The grid.
+ * @property {Array<string>} keys The keys.
+ * @property {Object<string, Object>} [data] Optional data.
+ */
+
 
 export class CustomTile extends Tile {
 
@@ -177,9 +184,9 @@ export class CustomTile extends Tile {
    * @private
    */
   handleLoad_(json) {
-    this.grid_ = json.grid;
-    this.keys_ = json.keys;
-    this.data_ = json.data;
+    this.grid_ = json['grid'];
+    this.keys_ = json['keys'];
+    this.data_ = json['data'];
 
     this.state = TileState.EMPTY;
     this.changed();
@@ -258,7 +265,7 @@ export class CustomTile extends Tile {
  * will ever be loaded.
  * @property {boolean} [jsonp=false] Use JSONP with callback to load the TileJSON.
  * Useful when the server does not support CORS..
- * @property {tileJSON} [tileJSON] TileJSON configuration for this source.
+ * @property {import("./TileJSON.js").Config} [tileJSON] TileJSON configuration for this source.
  * If not provided, `url` must be configured.
  * @property {string} [url] TileJSON endpoint that provides the configuration for this source.
  * Request will be made through JSONP. If not provided, `tileJSON` must be configured.
@@ -335,7 +342,7 @@ class UTFGrid extends TileSource {
     if (!client.status || client.status >= 200 && client.status < 300) {
       let response;
       try {
-        response = /** @type {TileJSON} */(JSON.parse(client.responseText));
+        response = /** @type {import("./TileJSON.js").Config} */(JSON.parse(client.responseText));
       } catch (err) {
         this.handleTileJSONError();
         return;
@@ -408,7 +415,7 @@ class UTFGrid extends TileSource {
   /**
    * TODO: very similar to ol/source/TileJSON#handleTileJSONResponse
    * @protected
-   * @param {TileJSON} tileJSON Tile JSON.
+   * @param {import("./TileJSON.js").Config} tileJSON Tile JSON.
    */
   handleTileJSONResponse(tileJSON) {
 
@@ -416,14 +423,14 @@ class UTFGrid extends TileSource {
 
     const sourceProjection = this.getProjection();
     let extent;
-    if (tileJSON.bounds !== undefined) {
+    if (tileJSON['bounds'] !== undefined) {
       const transform = getTransformFromProjections(
         epsg4326Projection, sourceProjection);
-      extent = applyTransform(tileJSON.bounds, transform);
+      extent = applyTransform(tileJSON['bounds'], transform);
     }
 
-    const minZoom = tileJSON.minzoom || 0;
-    const maxZoom = tileJSON.maxzoom || 22;
+    const minZoom = tileJSON['minzoom'] || 0;
+    const maxZoom = tileJSON['maxzoom'] || 22;
     const tileGrid = createXYZ({
       extent: extentFromProjection(sourceProjection),
       maxZoom: maxZoom,
@@ -431,9 +438,9 @@ class UTFGrid extends TileSource {
     });
     this.tileGrid = tileGrid;
 
-    this.template_ = tileJSON.template;
+    this.template_ = tileJSON['template'];
 
-    const grids = tileJSON.grids;
+    const grids = tileJSON['grids'];
     if (!grids) {
       this.setState(SourceState.ERROR);
       return;
@@ -441,13 +448,13 @@ class UTFGrid extends TileSource {
 
     this.tileUrlFunction_ = createFromTemplates(grids, tileGrid);
 
-    if (tileJSON.attribution !== undefined) {
+    if (tileJSON['attribution'] !== undefined) {
       const attributionExtent = extent !== undefined ?
         extent : epsg4326Projection.getExtent();
 
       this.setAttributions(function(frameState) {
         if (intersects(attributionExtent, frameState.extent)) {
-          return [tileJSON.attribution];
+          return [tileJSON['attribution']];
         }
         return null;
       });