mmomtchev / rlayers

React Component Library for OpenLayers
ISC License
170 stars 34 forks source link

'Declutter' property not available on RLayerVector component from within Typescript files #291

Open mchadwick94 opened 1 week ago

mchadwick94 commented 1 week ago

I have been using the 'declutter' property on my RLayerVector components within JavaScript (.js) react components with no issues as below:

import React from "react";
import { RLayerVector } from "rlayers";
import { GeoJSON } from "ol/format";
import arrowUp from "../image.svg";

const Component: React.FC<Props> = (props) => {

  return (
    <RLayerVector
      zIndex={5}
      format={new GeoJSON({ featureProjection: "EPSG:3857" })}
      url={"source-url"}
      declutter={true}
      visible={true}
      style={() => {
        return new Style({
          image: new Icon({
            src: arrowUp, // Arrow image source
            rotation: 0, // Rotation to align with the line direction
            scale: 0.1, // Adjust the size of the image
          }),
        });
      }}
    />
  );

};

export default Component;

However I am now starting to use TypeScript (.tsx) components and the 'declutter' prop isn't available to be used within them, and the following exception is shown:

Type '{ zIndex: number; format: GeoJSON; url: string; declutter: boolean; visible: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<RLayerVector> & Readonly<RLayerBaseVectorProps> & Readonly<...>'.

mmomtchev commented 1 week ago

Passing OpenLayers properties that are not explicitly enumerated is not an official feature although it works indeed.

Alas, I do not see how this can be expressed with the current capabilities of TypeScript since the properties use inheritance and the TypeScript mapped types currently do not support interfaces.