fix: fix typings after ol7 upgrade

src/Button/GeoLocationButton/GeoLocationButton.tsx

@@ -10,7 +10,6 @@ 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';
 
@@ -61,7 +60,7 @@ interface OwnProps {
   map: OlMap;
 }
 
-export type GeoLocationButtonProps = OwnProps & Omit<Partial<ToggleButtonProps>, 'onToggle'|'className'>;
+export type GeoLocationButtonProps = OwnProps & Omit<Partial<ToggleButtonProps>, 'onToggle' | 'className'>;
 
 /**
  * The GeoLocationButton.
@@ -128,7 +127,7 @@ class GeoLocationButton extends React.Component<GeoLocationButtonProps> {
     } = this.props;
     const allLayers = MapUtil.getAllLayers(map);
 
-    this._positions = new OlGeomLineString([], OlGeometryLayout.XYZM);
+    this._positions = new OlGeomLineString([], 'XYZM');
     this._geoLocationLayer.setStyle(this._styleFunction);
     if (!allLayers.includes(this._geoLocationLayer)) {
       map.addLayer(this._geoLocationLayer);
@@ -160,7 +159,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<OlGeometry>|RenderFeature) => {
+  _styleFunction = (feature: OlFeature<OlGeometry> | RenderFeature) => {
     const heading = feature.get('heading');
     const src = heading !== 0 ? mapMarkerHeading : mapMarker;
     const rotation = heading !== 0 ? heading * Math.PI / 180 : 0;

src/Button/ToggleGroup/ToggleGroup.tsx

@@ -153,6 +153,7 @@ class ToggleGroup extends React.Component<ToggleGroupProps, ToggleGroupState> {
       if (React.isValidElement(child)) {
         // pass the press state through to child components
         return React.cloneElement(child, {
+          // @ts-ignore
           pressed: this.state.selectedName === child.props.name
         });
       } else {

src/CoordinateInfo/CoordinateInfo.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react';
 
-import OlMap from 'ol/Map';
-import OlLayer from 'ol/layer/Layer';
-import OlFormatGML2 from 'ol/format/GML2';
-import OlMapBrowserEvent from 'ol/MapBrowserEvent';
-import OlFeature from 'ol/Feature';
+import { getUid } from 'ol';
 import { Coordinate as OlCoordinate } from 'ol/coordinate';
+import OlFeature from 'ol/Feature';
+import OlFormatGML2 from 'ol/format/GML2';
 import OlGeometry from 'ol/geom/Geometry';
 import OlBaseLayer from 'ol/layer/Base';
-import { getUid } from 'ol';
+import OlMap from 'ol/Map';
+import OlMapBrowserEvent from 'ol/MapBrowserEvent';
 
 import _isString from 'lodash/isString';
 
 import Logger from '@terrestris/base-util/dist/Logger';
 
-import { WmsLayer } from '../Util/typeUtils';
+import { WmsLayer, isWmsLayer } from '../Util/typeUtils';
 
 const format = new OlFormatGML2();
 
@@ -35,12 +34,6 @@ export interface CoordinateInfoProps {
    */
   drillDown: boolean;
 
-  /**
-   * Hit-detection tolerance in pixels. Pixels inside the radius around the
-   * given position will be checked for features.
-   */
-  hitTolerance: number;
-
   /**
    * The children component that should be rendered. The render prop function
    * receives the state of the component (this is the clicked coordinate, the
@@ -94,15 +87,14 @@ export class CoordinateInfo extends React.Component<CoordinateInfoProps, Coordin
     queryLayers: [],
     featureCount: 1,
     drillDown: true,
-    hitTolerance: 5,
     resultRenderer: () => {
       return (
-        <div/>
+        <div />
       );
     },
     fetchOpts: {},
-    onSuccess: () => {},
-    onError: () => {}
+    onSuccess: () => { },
+    onError: () => { }
   };
 
   /**
@@ -143,7 +135,6 @@ export class CoordinateInfo extends React.Component<CoordinateInfoProps, Coordin
       map,
       featureCount,
       drillDown,
-      hitTolerance,
       fetchOpts,
       onSuccess,
       onError
@@ -157,24 +148,29 @@ export class CoordinateInfo extends React.Component<CoordinateInfoProps, Coordin
 
     const promises: Promise<any>[] = [];
 
-    map.forEachLayerAtPixel(pixel, (layer: OlLayer<any, any>) => {
-      const layerSource = layer.getSource();
+    const mapLayers =
+      map.getAllLayers()
+        .filter(this.layerFilter)
+        .filter(l => l.getData && l.getData(pixel) && isWmsLayer(l));
+    mapLayers.forEach(l => {
+      const layerSource = (l as WmsLayer).getSource();
+      if (!layerSource) {
+        return;
+      }
       const featureInfoUrl = layerSource.getFeatureInfoUrl(
         coordinate,
-        viewResolution,
+        viewResolution!,
         viewProjection,
         {
-          'INFO_FORMAT': 'application/vnd.ogc.gml',
-          'FEATURE_COUNT': featureCount
+          INFO_FORMAT: 'application/vnd.ogc.gml',
+          FEATURE_COUNT: featureCount
         }
       );
-
-      promises.push(fetch(featureInfoUrl, fetchOpts[getUid(layer)]));
+      if (featureInfoUrl) {
+        promises.push(fetch(featureInfoUrl, fetchOpts[getUid(l)]));
+      }
 
       return !drillDown;
-    }, {
-      layerFilter: this.layerFilter,
-      hitTolerance: hitTolerance
     });
 
     map.getTargetElement().style.cursor = 'wait';
@@ -237,7 +233,7 @@ export class CoordinateInfo extends React.Component<CoordinateInfoProps, Coordin
   }
 
   getCoordinateInfoState(): CoordinateInfoState {
-    const featuresClone: {[name: string]: OlFeature[]} = {};
+    const featuresClone: { [name: string]: OlFeature[] } = {};
     Object.entries(this.state.features)
       .forEach(([layerName, feats]) => {
         featuresClone[layerName] = feats.map(feat => feat.clone());
@@ -254,7 +250,7 @@ export class CoordinateInfo extends React.Component<CoordinateInfoProps, Coordin
     return coordinateInfoState;
   };
 
-  render () {
+  render() {
     const {
       resultRenderer
     } = this.props;

src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.tsx

@@ -34,7 +34,7 @@ export function loadify<P>(WrappedComponent: React.ComponentType<any>) {
      *
      * @constructs Loadify
      */
-    constructor(props: P) {
+    constructor(props: P & Partial<SpinProps>) {
       super(props);
     }
 

src/Legend/Legend.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 
 import _isEqual from 'lodash/isEqual';
 
+import OlLayerImage from 'ol/layer/Image';
+import OlLayerTile from 'ol/layer/Tile';
+import OlSourceImageWMS from 'ol/source/ImageWMS';
+import OlSourceTileWMS from 'ol/source/TileWMS';
+
 import Logger from '@terrestris/base-util/dist/Logger';
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 
 import { CSS_PREFIX } from '../constants';
-import { WmsLayer } from '../Util/typeUtils';
-
 export interface BaseProps {
   /**
    * An optional CSS class which should be added.
@@ -16,7 +19,7 @@ export interface BaseProps {
   /**
    * The layer you want to display the legend of.
    */
-  layer: WmsLayer;
+  layer: OlLayerTile<OlSourceTileWMS> | OlLayerImage<OlSourceImageWMS>;
   /**
    * An object containing additional request params like "{HEIGHT: 400}" will
    * be transformed to "&HEIGHT=400" an added to the GetLegendGraphic request.
@@ -105,7 +108,7 @@ export class Legend extends React.Component<LegendProps, LegendState> {
    * @param layer The layer to get the legend graphic request for.
    * @param extraParams The extra params.
    */
-  getLegendUrl(layer: WmsLayer, extraParams: any) {
+  getLegendUrl(layer: OlLayerTile<OlSourceTileWMS> | OlLayerImage<OlSourceImageWMS>, extraParams: any) {
     let legendUrl;
 
     if (layer.get('legendUrl')) {