Openlayers types

package.json

@@ -52,12 +52,13 @@
     "clean:test": "rimraf ./coverage/*",
     "clean:build": "rimraf ./build/*",
     "clean:dist": "rimraf ./dist/*",
-    "pretest": "npm run lint",
+    "pretest": "npm run typecheck && npm run lint",
     "test": "jest --maxWorkers=4 --coverage",
     "test:watch": "jest --watchAll",
     "coveralls": "cat coverage/lcov.info | coveralls",
     "prepublishOnly": "npm run build",
-    "lint:src": "tsc --noEmit --project tsconfig.json && eslint -c .eslintrc.js --ext ts,tsx src/",
+    "typecheck": "tsc --noEmit --project tsconfig.json",
+    "lint:src": "eslint -c .eslintrc.js --ext ts,tsx src/",
     "lint:styleguide": "eslint -c .eslintrc.styleguide.js --no-eslintrc --ext md src/",
     "lint": "npm run lint:styleguide && npm run lint:src",
     "lint:fix": "npm run lint:styleguide -- --fix && npm run lint:src -- --fix",
@@ -80,11 +81,14 @@
     "@ag-grid-community/core": "^23.2.1",
     "@ag-grid-community/react": "^23.2.1",
     "@ant-design/icons": "^4.2.1",
-    "@terrestris/base-util": "^0.2.3",
+    "@hanreev/types-ol": "^3.4.2",
+    "@terrestris/base-util": "^1.0.0",
     "@terrestris/ol-util": "^4.0.1",
+    "@types/geojson": "^7946.0.7",
     "@types/lodash": "^4.14.155",
     "@types/moment": "^2.13.0",
     "@types/node": "^14.0.13",
+    "@types/react": "^16.9.38",
     "@types/react-dom": "^17.0.0",
     "@types/react-rnd": "^8.0.0",
     "lodash": "^4.17.15",
@@ -94,7 +98,7 @@
     "react-dom": "^16.12.0",
     "react-fa": "^5.0.0",
     "react-rnd": "^10.2.1",
-    "typescript": "^4.0.3"
+    "typescript": "^4.1.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",
@@ -108,10 +112,9 @@
     "@babel/preset-typescript": "^7.10.1",
     "@types/enzyme": "^3.10.4",
     "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.38",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^4.1.1",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
     "antd": "^4.5.1",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.2.1",
@@ -134,7 +137,7 @@
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "less-loader": "^6.1.1",
     "np": "^7.0.0",
-    "ol": "^6.4.1",
+    "ol": "^6.5.0",
     "react": "^16.12.0",
     "react-docgen-typescript": "^1.17.1",
     "react-styleguidist": "^11.0.8",

src/Button/DigitizeButton/DigitizeButton.tsx

@@ -12,15 +12,15 @@ import OlStyleStroke from 'ol/style/Stroke';
 import OlStyleFill from 'ol/style/Fill';
 import OlStyleCircle from 'ol/style/Circle';
 import OlStyleText from 'ol/style/Text';
-import OlInteraction from 'ol/interaction/Interaction';
 import OlInteractionDraw, { createBox } from 'ol/interaction/Draw';
 import OlInteractionSelect from 'ol/interaction/Select';
 import OlInteractionModify from 'ol/interaction/Modify';
 import OlInteractionTranslate from 'ol/interaction/Translate';
 import OlFeature from 'ol/Feature';
-import { never, singleClick } from 'ol/events/condition';
+import * as OlEventConditions from 'ol/events/condition';
+import OlGeometry from 'ol/geom/Geometry';
 
-const _isFunction = require('lodash/isFunction');
+import _isFunction from 'lodash/isFunction';
 
 import ToggleButton, { ToggleButtonProps } from '../ToggleButton/ToggleButton';
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
@@ -122,7 +122,7 @@ interface BaseProps {
   /**
    * Style object / style function for drawn feature.
    */
-  drawStyle?: OlStyleStyle | ((feature: OlFeature) => OlStyleStyle);
+  drawStyle?: OlStyleStyle | ((feature: OlFeature<OlGeometry>) => OlStyleStyle);
   /**
    * Listener function for the 'drawend' event of an ol.interaction.Draw.
    * See https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-DrawEvent.html
@@ -251,25 +251,25 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
    * The draw interaction.
    * @private
    */
-  _drawInteraction?: OlInteraction;
+  _drawInteraction?: OlInteractionDraw;
 
   /**
    * The select interaction.
    * @private
    */
-  _selectInteraction?: OlInteraction;
+  _selectInteraction?: OlInteractionSelect;
 
   /**
    * The modify interaction.
    * @private
    */
-  _modifyInteraction?: OlInteraction;
+  _modifyInteraction?: OlInteractionModify;
 
   /**
    * The translate interaction.
    * @private
    */
-  _translateInteraction?: OlInteraction;
+  _translateInteraction?: OlInteractionTranslate;
 
   /**
    * Name of point draw type.
@@ -616,7 +616,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
    * @param text Text for labeled feature (optional).
    * @return The style to use.
    */
-  getSelectedStyleFunction = (feature: OlFeature, res: number, text: React.ReactText) => {
+  getSelectedStyleFunction = (feature: OlFeature<OlGeometry>, res: number, text: string) => {
     const {
       selectFillColor,
       selectStrokeColor
@@ -698,7 +698,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
         type: type,
         geometryFunction: geometryFunction,
         style: this.getDigitizeStyleFunction,
-        freehandCondition: never,
+        freehandCondition: OlEventConditions.never,
         ...drawInteractionConfig
       });
 
@@ -745,7 +745,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
 
     if (!selectInteraction) {
       selectInteraction = new OlInteractionSelect({
-        condition: singleClick,
+        condition: OlEventConditions.singleClick,
         hitTolerance: DigitizeButton.HIT_TOLERANCE,
         style: this.getSelectedStyleFunction,
         ...selectInteractionConfig
@@ -791,7 +791,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
     if (!modifyInteraction) {
       modifyInteraction = new OlInteractionModify({
         features: this._selectInteraction.getFeatures(),
-        deleteCondition: singleClick,
+        deleteCondition: OlEventConditions.singleClick,
         style: this.getSelectedStyleFunction,
         ...modifyInteractionConfig
       });
@@ -1070,10 +1070,11 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
    * Sets formatted label on feature.
    * Calls `onModalLabelOk` callback function if provided.
    *
-   * @param feat The point feature to be styled with label.
+   * @param feature The point feature to be styled with label.
    * @param onModalOkCbk Optional callback function.
    */
-  setTextOnFeature = (feat: OlFeature, onModalOkCbk: (feat: OlFeature, label: string) => void) => {
+  setTextOnFeature = (feature: OlFeature<OlGeometry>,
+    onModalOkCbk: (feat: OlFeature<OlGeometry>, newLabel: string) => void) => {
     const {
       maxLabelLineLength
     } = this.props;
@@ -1088,12 +1089,12 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
         textLabel, maxLabelLineLength, '\n'
       );
     }
-    feat.set('label', label);
+    feature.set('label', label);
     this.setState({
       textLabel: ''
     }, () => {
       if (_isFunction(onModalOkCbk)) {
-        onModalOkCbk(feat, label);
+        onModalOkCbk(feature, label);
       }
     });
   };

src/Button/GeoLocationButton/GeoLocationButton.tsx

@@ -9,6 +9,8 @@ import OlLayerVector from 'ol/layer/Vector';
 import OlSourceVector from 'ol/source/Vector';
 import OlStyleStyle from 'ol/style/Style';
 import OlStyleIcon from 'ol/style/Icon';
+import OlGeometry from 'ol/geom/Geometry';
+import OlGeometryLayout from 'ol/geom/GeometryLayout';
 
 import ToggleButton, { ToggleButtonProps } from '../ToggleButton/ToggleButton';
 
@@ -125,7 +127,7 @@ class GeoLocationButton extends React.Component<GeoLocationButtonProps> {
    * The styleFunction for the geoLocationLayer. Shows a marker with arrow when
    * heading is not 0.
    */
-  _styleFunction = (feature: OlFeature) => {
+  _styleFunction = (feature: OlFeature<OlGeometry>) => {
     const heading = feature.get('heading');
     const src = heading !== 0 ? mapMarkerHeading : mapMarker;
     const rotation = heading !== 0 ? heading * Math.PI / 180 : 0;
@@ -168,7 +170,7 @@ class GeoLocationButton extends React.Component<GeoLocationButtonProps> {
     } = this.props;
     const allLayers = MapUtil.getAllLayers(map);
 
-    this._positions = new OlGeomLineString([], 'XYZM');
+    this._positions = new OlGeomLineString([], OlGeometryLayout.XYZM);
     this._geoLocationLayer.setStyle(this._styleFunction);
     if (!allLayers.includes(this._geoLocationLayer)) {
       map.addLayer(this._geoLocationLayer);

src/Button/MeasureButton/MeasureButton.tsx

@@ -1,25 +1,29 @@
 import * as React from 'react';
 
+import _isEmpty from 'lodash/isEmpty';
+
 import OlMap from 'ol/Map';
 import OlLayerVector from 'ol/layer/Vector';
 import OlSourceVector from 'ol/source/Vector';
 import OlCollection from 'ol/Collection';
 import OlMultiPolygon from 'ol/geom/MultiPolygon';
-import OlMultiLinestring from 'ol/geom/MultiLineString';
+import OlMultiLineString from 'ol/geom/MultiLineString';
 import OlStyleStyle from 'ol/style/Style';
 import OlStyleStroke from 'ol/style/Stroke';
 import OlStyleFill from 'ol/style/Fill';
 import OlStyleCircle from 'ol/style/Circle';
-import OlInteractionDraw from 'ol/interaction/Draw';
+import OlInteractionDraw, { DrawEvent } from 'ol/interaction/Draw';
 import { unByKey } from 'ol/Observable';
 import OlOverlay from 'ol/Overlay';
+import OlMapBrowserEvent from 'ol/MapBrowserEvent';
+import OlGeometryType from 'ol/geom/GeometryType';
+import OlOverlayPositioning from 'ol/OverlayPositioning';
 
-const _isEmpty = require('lodash/isEmpty');
-
-import ToggleButton, { ToggleButtonProps } from '../ToggleButton/ToggleButton';
 import MeasureUtil from '@terrestris/ol-util/dist/MeasureUtil/MeasureUtil';
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 
+import ToggleButton, { ToggleButtonProps } from '../ToggleButton/ToggleButton';
+
 import { CSS_PREFIX } from '../../constants';
 
 import './MeasureButton.less';
@@ -289,15 +293,15 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
       this._drawInteraction.setActive(pressed);
 
       this._eventKeys.drawstart = this._drawInteraction.on(
-        'drawstart', this.onDrawStart, this
+        'drawstart', e => this.onDrawStart(e)
       );
 
       this._eventKeys.drawend = this._drawInteraction.on(
-        'drawend', this.onDrawEnd, this
+        'drawend', e => this.onDrawEnd(e)
       );
 
       this._eventKeys.pointermove = map.on(
-        'pointermove', this.onMapPointerMove, this
+        'pointermove', e => this.onMapPointerMove(e)
       );
     }
   }
@@ -365,10 +369,9 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
     } = this.props;
 
     const maxPoints = measureType === 'angle' ? 2 : undefined;
-    const drawType = measureType === 'polygon' ? 'MultiPolygon' : 'MultiLineString';
+    const drawType = measureType === 'polygon' ? OlGeometryType.MULTI_POLYGON : OlGeometryType.MULTI_LINE_STRING;
 
     const drawInteraction = new OlInteractionDraw({
-      name: 'react-geo_drawaction',
       source: this._measureLayer.getSource(),
       type: drawType,
       maxPoints: maxPoints,
@@ -398,7 +401,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
 
     map.addInteraction(drawInteraction);
 
-    drawInteraction.on('change:active', this.onDrawInteractionActiveChange, this);
+    drawInteraction.on('change:active', () => this.onDrawInteractionActiveChange());
 
     this._drawInteraction = drawInteraction;
 
@@ -445,7 +448,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
    *
    * @param evt The pointer event.
    */
-  onMapClick(evt: any) {
+  onMapClick(evt: OlMapBrowserEvent<MouseEvent>) {
     const {
       measureType,
       showMeasureInfoOnClickedPoints
@@ -465,7 +468,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
    *
    * @method
    */
-  onDrawStart(evt: any) {
+  onDrawStart(evt: DrawEvent) {
     const {
       showHelpTooltip,
       multipleDrawing,
@@ -478,7 +481,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
     this._eventKeys.change = this._feature.getGeometry().on('change',
       this.onDrawInteractionGeometryChange);
 
-    this._eventKeys.click = map.on('click', this.onMapClick, this);
+    this._eventKeys.click = map.on('click', (e: OlMapBrowserEvent<MouseEvent>) => this.onMapClick(e));
 
     if (!multipleDrawing && source.getFeatures().length > 0) {
       this.cleanupTooltips();
@@ -498,7 +501,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
    *
    * @method
    */
-  onDrawEnd(evt: any) {
+  onDrawEnd(evt: DrawEvent) {
     const {
       measureType,
       multipleDrawing,
@@ -515,7 +518,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
     }
 
     if (multipleDrawing) {
-      this.addMeasureStopTooltip(evt.feature.getGeometry().getLastCoordinate());
+      this.addMeasureStopTooltip((evt.feature.getGeometry() as OlMultiPolygon|OlMultiLineString).getLastCoordinate());
     }
 
     // Fix doubled label for lastPoint of line
@@ -559,7 +562,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
         geom = geom.getPolygons()[0];
       }
 
-      if (geom instanceof OlMultiLinestring) {
+      if (geom instanceof OlMultiLineString) {
         geom = geom.getLineStrings()[0];
       }
 
@@ -574,7 +577,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
         const tooltip = new OlOverlay({
           element: div,
           offset: [0, -15],
-          positioning: 'bottom-center'
+          positioning: OlOverlayPositioning.BOTTOM_CENTER
         });
         map.addOverlay(tooltip);
 
@@ -606,7 +609,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
     this._measureTooltip = new OlOverlay({
       element: this._measureTooltipElement,
       offset: [0, -15],
-      positioning: 'bottom-center'
+      positioning: OlOverlayPositioning.BOTTOM_CENTER
     });
 
     map.addOverlay(this._measureTooltip);
@@ -631,7 +634,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
     this._helpTooltip = new OlOverlay({
       element: this._helpTooltipElement,
       offset: [15, 0],
-      positioning: 'center-left'
+      positioning: OlOverlayPositioning.CENTER_LEFT
     });
 
     map.addOverlay(this._helpTooltip);
@@ -780,7 +783,7 @@ class MeasureButton extends React.Component<MeasureButtonProps> {
         geom = geom.getPolygons()[0];
       }
 
-      if (geom instanceof OlMultiLinestring) {
+      if (geom instanceof OlMultiLineString) {
         geom = geom.getLineStrings()[0];
       }
 

src/Button/ToggleButton/ToggleButton.tsx

@@ -7,7 +7,7 @@ import {
 } from 'antd';
 import { Icon } from 'react-fa';
 
-const _isFunction = require('lodash/isFunction');
+import _isFunction from 'lodash/isFunction';
 
 import './ToggleButton.less';
 

src/Button/ToggleGroup/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 
-const _isFunction = require('lodash/isFunction');
+import _isFunction from 'lodash/isFunction';
 
 import { CSS_PREFIX } from '../../constants';