Merge pull request #9043 from openlayers/examples_types

Fix type notation in examples

examples/canvas-gradient-pattern.js

@@ -61,8 +61,8 @@ const style = new Style({
  * The styling function for the vector layer, will return an array of styles
  * which either contains the aboove gradient or pattern.
  *
- * @param {module:ol/Feature~Feature} feature The feature to style.
+ * @param {import("../src/ol/Feature.js").default} feature The feature to style.
- * @return {module:ol/style/Style} The style to use for the feature.
+ * @return {Style} The style to use for the feature.
  */
 const getStackedStyle = function(feature) {
   const id = feature.getId();

examples/center.js

@@ -50,7 +50,7 @@ const map = new Map({
 const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
 zoomtoswitzerlandbest.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
 }, false);
 
@@ -58,7 +58,7 @@ const zoomtoswitzerlandconstrained =
     document.getElementById('zoomtoswitzerlandconstrained');
 zoomtoswitzerlandconstrained.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
@@ -66,21 +66,21 @@ const zoomtoswitzerlandnearest =
     document.getElementById('zoomtoswitzerlandnearest');
 zoomtoswitzerlandnearest.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
 }, false);
 
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
+  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/custom-controls.js

@@ -9,14 +9,11 @@ import OSM from '../src/ol/source/OSM.js';
 // Define rotate to north control.
 //
 
-
-/**
- * @constructor
- * @extends {module:ol/control/Control~Control}
- * @param {Object=} opt_options Control options.
- */
 class RotateNorthControl extends Control {
 
+  /**
+   * @param {Object=} opt_options Control options.
+   */
   constructor(opt_options) {
     const options = opt_options || {};
 

examples/custom-interactions.js

@@ -8,10 +8,6 @@ import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
-/**
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- */
 class Drag extends PointerInteraction {
   constructor() {
     super({
@@ -22,7 +18,7 @@ class Drag extends PointerInteraction {
     });
 
     /**
-     * @type {module:ol/pixel~Pixel}
+     * @type {import("../src/ol/coordinate.js").Coordinate}
      * @private
      */
     this.coordinate_ = null;
@@ -34,7 +30,7 @@ class Drag extends PointerInteraction {
     this.cursor_ = 'pointer';
 
     /**
-     * @type {module:ol/Feature~Feature}
+     * @type {Feature}
      * @private
      */
     this.feature_ = null;
@@ -49,7 +45,7 @@ class Drag extends PointerInteraction {
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
  */
 function handleDownEvent(evt) {
@@ -70,7 +66,7 @@ function handleDownEvent(evt) {
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  */
 function handleDragEvent(evt) {
   const deltaX = evt.coordinate[0] - this.coordinate_[0];
@@ -85,7 +81,7 @@ function handleDragEvent(evt) {
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
  */
 function handleMoveEvent(evt) {
   if (this.cursor_) {
@@ -141,13 +137,13 @@ const map = new Map({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
       style: new Style({
-        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+        image: new Icon({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           opacity: 0.95,
           src: 'data/icon.png'
-        })),
+        }),
         stroke: new Stroke({
           width: 3,
           color: [255, 0, 0, 1]

examples/export-pdf.js

@@ -53,7 +53,7 @@ exportButton.addEventListener('click', function() {
   const dim = dims[format];
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const size = map.getSize();
   const extent = map.getView().calculateExtent(size);
 
   map.once('rendercomplete', function(event) {

examples/feature-move-animation.js

@@ -53,7 +53,7 @@ const polyline = [
   '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
 ].join('');
 
-const route = /** @type {module:ol/geom/LineString~LineString} */ (new Polyline({
+const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline({
   factor: 1e6
 }).readGeometry(polyline, {
   dataProjection: 'EPSG:4326',
@@ -192,8 +192,8 @@ function stopAnimation(ended) {
 
   // if animation cancelled set the marker at the beginning
   const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  /** @type {module:ol/geom/Point~Point} */ (geoMarker.getGeometry())
+  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
-    .setCoordinates(coord);
+  geometry.setCoordinates(coord);
   //remove listener
   vectorLayer.un('postrender', moveFeature);
 }

examples/geolocation-orientation.js

@@ -36,7 +36,7 @@ map.addOverlay(marker);
 // LineString to store the different geolocation positions. This LineString
 // is time aware.
 // The Z dimension is actually used to store the rotation (heading).
-const positions = new LineString([], /** @type {module:ol/geom/GeometryLayout} */ ('XYZM'));
+const positions = new LineString([], 'XYZM');
 
 // Geolocation Control
 const geolocation = new Geolocation({

examples/icon-color.js

@@ -22,27 +22,27 @@ const madrid = new Feature({
 });
 
 rome.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 london.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: '#4271AE',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 madrid.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: [113, 140, 0],
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 

examples/icon-negative.js

@@ -11,13 +11,13 @@ import {Icon, Style} from '../src/ol/style.js';
 
 function createStyle(src, img) {
   return new Style({
-    image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+    image: new Icon({
       anchor: [0.5, 0.96],
       crossOrigin: 'anonymous',
       src: src,
       img: img,
       imgSize: img ? [img.width, img.height] : undefined
-    }))
+    })
   });
 }
 

examples/icon.js

@@ -17,12 +17,12 @@ const iconFeature = new Feature({
 });
 
 const iconStyle = new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
     src: 'data/icon.png'
-  }))
+  })
 });
 
 iconFeature.setStyle(iconStyle);

examples/igc.js

@@ -183,7 +183,7 @@ document.getElementById('time').addEventListener('input', function() {
   const value = parseInt(this.value, 10) / 100;
   const m = time.start + (time.duration * value);
   vectorSource.forEachFeature(function(feature) {
-    const geometry = /** @type {module:ol/geom/LineString~LineString} */ (feature.getGeometry());
+    const geometry = /** @type {import("../src/ol/geom/LineString.js").default} */ (feature.getGeometry());
     const coordinate = geometry.getCoordinateAtM(m, true);
     let highlight = feature.get('highlight');
     if (highlight === undefined) {

examples/image-load-events.js

@@ -6,7 +6,7 @@ import ImageWMS from '../src/ol/source/ImageWMS.js';
 
 /**
  * Renders a progress bar.
- * @param {Element} el The target element.
+ * @param {HTMLElement} el The target element.
  * @constructor
  */
 function Progress(el) {

examples/measure.js

@@ -38,35 +38,35 @@ const vector = new VectorLayer({
 
 /**
  * Currently drawn feature.
- * @type {module:ol/Feature~Feature}
+ * @type {import("../src/ol/Feature.js").default}
  */
 let sketch;
 
 
 /**
  * The help tooltip element.
- * @type {Element}
+ * @type {HTMLElement}
  */
 let helpTooltipElement;
 
 
 /**
  * Overlay to show the help messages.
- * @type {module:ol/Overlay}
+ * @type {Overlay}
  */
 let helpTooltip;
 
 
 /**
  * The measure tooltip element.
- * @type {Element}
+ * @type {HTMLElement}
  */
 let measureTooltipElement;
 
 
 /**
  * Overlay to show the measurement.
- * @type {module:ol/Overlay}
+ * @type {Overlay}
  */
 let measureTooltip;
 
@@ -87,7 +87,7 @@ const continueLineMsg = 'Click to continue drawing the line';
 
 /**
  * Handle pointer move.
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
+ * @param {import("../src/ol/MapBrowserEvent").default} evt The event.
  */
 const pointerMoveHandler = function(evt) {
   if (evt.dragging) {
@@ -97,7 +97,7 @@ const pointerMoveHandler = function(evt) {
   let helpMsg = 'Click to start drawing';
 
   if (sketch) {
-    const geom = (sketch.getGeometry());
+    const geom = sketch.getGeometry();
     if (geom instanceof Polygon) {
       helpMsg = continuePolygonMsg;
     } else if (geom instanceof LineString) {
@@ -134,7 +134,7 @@ let draw; // global so we can remove it later
 
 /**
  * Format length output.
- * @param {module:ol/geom/LineString~LineString} line The line.
+ * @param {LineString} line The line.
  * @return {string} The formatted length.
  */
 const formatLength = function(line) {
@@ -153,7 +153,7 @@ const formatLength = function(line) {
 
 /**
  * Format area output.
- * @param {module:ol/geom/Polygon~Polygon} polygon The polygon.
+ * @param {Polygon} polygon The polygon.
  * @return {string} Formatted area.
  */
 const formatArea = function(polygon) {
@@ -205,7 +205,7 @@ function addInteraction() {
       // set sketch
       sketch = evt.feature;
 
-      /** @type {module:ol/coordinate~Coordinate|undefined} */
+      /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
       let tooltipCoord = evt.coordinate;
 
       listener = sketch.getGeometry().on('change', function(evt) {
@@ -221,7 +221,7 @@ function addInteraction() {
         measureTooltipElement.innerHTML = output;
         measureTooltip.setPosition(tooltipCoord);
       });
-    }, this);
+    });
 
   draw.on('drawend',
     function() {
@@ -233,7 +233,7 @@ function addInteraction() {
       measureTooltipElement = null;
       createMeasureTooltip();
       unByKey(listener);
-    }, this);
+    });
 }
 
 

examples/reprojection.js

@@ -109,7 +109,7 @@ fetch(url).then(function(response) {
   options.projection = 'EPSG:3413';
   options.wrapX = false;
   layers['wmts3413'] = new TileLayer({
-    source: new WMTS(/** @type {!module:ol/source/WMTS~Options} */ (options))
+    source: new WMTS(options)
   });
 });
 

examples/tile-load-events.js

@@ -6,7 +6,7 @@ import TileJSON from '../src/ol/source/TileJSON.js';
 
 /**
  * Renders a progress bar.
- * @param {Element} el The target element.
+ * @param {HTMLElement} el The target element.
  * @constructor
  */
 function Progress(el) {

examples/wmts-hidpi.js

@@ -34,6 +34,6 @@ fetch(capabilitiesUrl).then(function(response) {
   });
   options.tilePixelRatio = tilePixelRatio;
   map.addLayer(new TileLayer({
-    source: new WMTS(/** @type {!module:ol/source/WMTS~Options} */ (options))
+    source: new WMTS(options)
   }));
 });

examples/wmts-layer-from-capabilities.js

@@ -25,7 +25,7 @@ fetch('data/WMTSCapabilities.xml').then(function(response) {
       }),
       new TileLayer({
         opacity: 1,
-        source: new WMTS(/** @type {!module:ol/source/WMTS~Options} */ (options))
+        source: new WMTS(options)
       })
     ],
     target: 'map',

examples/zoomslider.js

@@ -9,7 +9,7 @@ import OSM from '../src/ol/source/OSM.js';
  * Helper method for map-creation.
  *
  * @param {string} divId The id of the div for the map.
- * @return {module:ol/PluggableMap} The map instance.
+ * @return {Map} The map instance.
  */
 function createMap(divId) {
   const source = new OSM();