Fix OpenLayers to 9.2.2 and implement fine-grained typing (#257)

* OpenLayers 9.2 support

* update the README and the tests

* update the README

* long overdue change

* update the examples

* drop all old versions

* leave only 9.2.2

* more TSX typing

* RenderFeature is the default one for vector tile layers

* merge the changelog and the readme

* fix the name tag

.github/workflows/node.js.yml

@@ -35,26 +35,7 @@ jobs:
             fail-fast: false
             matrix:
                 ol-version:
-                    - '6.10'
-                    - '6.11'
-                    - '6.12'
-                    - '6.13'
-                    - '6.14'
-                    - '6.14.1'
-                    - '6.15'
-                    - '6.15.1'
-                    - '7.0.0'
-                    - '7.1.0'
-                    - '7.2.0'
-                    - '7.2.2'
-                    - '7.3.0'
-                    - '7.4.0'
-                    - '7.5.1'
-                    - '8.0.0'
-                    - '8.1.0'
-                    - '8.2.0'
-                    - '9.0.0'
-                    - '9.1.0'
+                    - '9.2.2'
 
         steps:
             - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"

.github/workflows/test-npm.yml

@@ -45,7 +45,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-js
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_ts:
@@ -57,7 +57,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-ts
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_js:
@@ -69,7 +69,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-js
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_ts:
@@ -81,7 +81,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-ts
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_1_js:
@@ -93,7 +93,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-1-js
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_1_ts:
@@ -105,7 +105,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-1-ts
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_2_js:
@@ -117,7 +117,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-2-js
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     cra_react18_2_ts:
@@ -129,7 +129,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/cra-react18-2-ts
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     nextjs12:
@@ -145,7 +145,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/next12
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     nextjs13:
@@ -157,7 +157,7 @@ jobs:
               run: |
                   cd rlayers-npm-tests/next13
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build
 
     nextjs13-esm:
@@ -169,5 +169,5 @@ jobs:
               run: |
                   cd rlayers-npm-tests/next13-esm
                   npm install
-                  npm i rlayers@${{ github.event.inputs.version }} ol@9.1.0
+                  npm i rlayers@${{ github.event.inputs.version }} ol@9.2.2
                   npm run build

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [3.0.0]
+
+-   Do not support multiple OpenLayers versions, link each `rlayers` to one OpenLayers minor version
+-   Support light-weight `RenderFeature`s, these are opt-out for vector tile layers and opt-in for vector layers
+-   Use the same level of typing as OpenLayers
+-   For OpenLayers 9.2.2
+
 ### [2.3.2] 2024-05-22
 
 -   Fix [#252](https://github.com/mmomtchev/rlayers/issues/252), stop event propagation when the event handler returns `false`

README.md

@@ -65,6 +65,7 @@ _React_ is supported from version 16.8.0.
 | 2.1 (_obsolete_) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0                      | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0         |
 | 2.2 (_obsolete_) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0               | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0         |
 | 2.3 `(@latest)`  | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0, 9.0.0, 9.1.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
+| 3.0 (`@next`)    | 9.2.2                                                                                                                                  | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
 
 ---
 

examples/AnimatedOverlay.tsx

@@ -17,7 +17,7 @@ export default function AnimatedOverlay(): JSX.Element {
         <RMap className='example-map' initial={{center: fromLonLat(coords.origin), zoom: 11}}>
             <ROSM />
             <RLayerVector zIndex={10}>
-                <RFeature geometry={new Point(fromLonLat(coords.ArcDeTriomphe))}>
+                <RFeature<Point> geometry={new Point(fromLonLat(coords.ArcDeTriomphe))}>
                     <ROverlay className='no-interaction'>
                         <img
                             src={pacman}

examples/Cluster.tsx

@@ -13,8 +13,9 @@ import RLayerStadia from 'rlayers/layer/RLayerStadia';
 // Earthquakes of magnitude of at least 3.0 in 2020 (courtesy of USGS)
 // (this won't work in CodePen)
 import earthquakes from '!!file-loader!./data/earthquakes.geojson';
+import {Feature} from 'ol';
 type InputFormEventType = React.FormEvent<HTMLInputElement>;
-const reader = new GeoJSON({featureProjection: 'EPSG:3857'});
+const reader = new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature});
 
 const colorBlob = (size) =>
     'rgba(' + [255, 153, 0, Math.min(0.8, 0.4 + Math.log(size / 10) / 20)].join() + ')';
@@ -91,7 +92,7 @@ export default function Cluster(): JSX.Element {
                             // Render a star
                             return (
                                 <RRegularShape
-                                    radius1={radiusStar(unclusteredFeature)}
+                                    radius={radiusStar(unclusteredFeature)}
                                     radius2={3}
                                     points={5}
                                     angle={Math.PI}

examples/Draw.tsx

@@ -14,7 +14,7 @@ import 'ol/ol.css';
 import monument from './svg/eiffel.svg';
 import {RMap, ROSM, RInteraction, RLayerVector, RStyle, RFeature} from 'rlayers';
 import VectorSource from 'ol/source/Vector';
-import {OLFeatureClass} from 'rlayers/context';
+import {Feature} from 'ol';
 
 const TourEiffel = fromLonLat([2.294, 48.858]);
 const TourEiffelPoint = new Point(TourEiffel);
@@ -36,7 +36,7 @@ export default function Interactions(): JSX.Element {
                 <RLayerVector
                     onChange={React.useCallback((e) => {
                         // On every change, check if there is a feature covering the Eiffel Tower
-                        const source = e.target as VectorSource<OLFeatureClass>;
+                        const source = e.target as VectorSource<Feature>;
                         if (source?.forEachFeatureAtCoordinateDirect)
                             setSelected(
                                 source.forEachFeatureAtCoordinateDirect(TourEiffel, () => true)

examples/Features.tsx

@@ -25,9 +25,10 @@ export default function Features(): JSX.Element {
                     zIndex={10}
                     /* Input data will have to be typed too */
                     features={
-                        new GeoJSON({featureProjection: 'EPSG:3857'}).readFeatures(
-                            geojsonFeatures
-                        ) as Feature<Point>[]
+                        new GeoJSON({
+                            featureProjection: 'EPSG:3857',
+                            featureClass: Feature
+                        }).readFeatures(geojsonFeatures) as Feature<Point>[]
                     }
                     /* The type will be propagated to all callbacks */
                     onClick={useCallback(
@@ -46,8 +47,12 @@ export default function Features(): JSX.Element {
                 {/* Without any type, the features will be assumed to be a of a generic Geometry type */}
                 <RLayerVector
                     zIndex={5}
-                    /* This layer will be getting its data from an URL */
-                    format={new GeoJSON({featureProjection: 'EPSG:3857'})}
+                    /**
+                     * This layer will be getting its data from an URL, do not forget that in
+                     * OpenLayers 9.2 the format parsers now return RenderFeature by default unless
+                     * featureClass is explicitly specified
+                     */
+                    format={new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature})}
                     url='https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson'
                     onPointerEnter={useCallback(
                         (e) => {

examples/GeoData.tsx

@@ -11,7 +11,7 @@ import RLayerStadia from 'rlayers/layer/RLayerStadia';
 // These are the French internal administrative borders in GeoJSON format
 const departements =
     'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson';
-const parser = new GeoJSON({featureProjection: 'EPSG:3857'});
+const parser = new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature});
 // Population by French administrative division
 // https://public.opendatasoft.com/explore/dataset/population-francaise-par-departement-2018/
 // Published under Etalab Open License https://www.etalab.gouv.fr/wp-content/uploads/2018/11/open-licence.pdf

examples/Heatmap.tsx

@@ -12,7 +12,7 @@ import RLayerStadia from 'rlayers/layer/RLayerStadia';
 // (this won't work in CodePen)
 import earthquakes from '!!file-loader!./data/earthquakes.geojson';
 type InputFormEventType = React.FormEvent<HTMLInputElement>;
-const reader = new GeoJSON({featureProjection: 'EPSG:3857'});
+const reader = new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature});
 
 export default function Heatmap(): JSX.Element {
     const [blur, setBlur] = React.useState(15);

examples/IGC.tsx

@@ -34,7 +34,6 @@ import DamienDeBaenst from '!!file-loader!./data/igc/Damien-de-Baenst.igc';
 import SylvainDhonneur from '!!file-loader!./data/igc/Sylvain-Dhonneur.igc';
 import TomPayne from '!!file-loader!./data/igc/Tom-Payne.igc';
 import UlrichPrinz from '!!file-loader!./data/igc/Ulrich-Prinz.igc';
-import {OLFeatureClass} from 'rlayers/context';
 
 type InputFormEventType = React.FormEvent<HTMLInputElement>;
 
@@ -146,7 +145,7 @@ export default function IGCComp(): JSX.Element {
                     onAddFeature={useCallback(
                         // This useCallback transforms this function to a constant value
                         // None of its dependencies change after initialization
-                        (e: VectorSourceEvent<OLFeatureClass>) => {
+                        (e) => {
                             const geometry = e.feature.getGeometry() as LineString;
                             flight.start = Math.min(flight.start, geometry.getFirstCoordinate()[2]);
                             flight.stop = Math.max(flight.stop, geometry.getLastCoordinate()[2]);

examples/Layers.tsx

@@ -15,6 +15,7 @@ import {
 import RLayerStadia from 'rlayers/layer/RLayerStadia';
 import 'ol/ol.css';
 import 'rlayers/control/layers.css';
+import {Feature} from 'ol';
 
 const layersButton = <button>&#9776;</button>;
 
@@ -60,7 +61,7 @@ export default function Layers(): JSX.Element {
                 {/* This one is always visible */}
                 <RLayerVector
                     zIndex={5}
-                    format={new GeoJSON({featureProjection: 'EPSG:3857'})}
+                    format={new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature})}
                     url='https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson'
                 >
                     <RStyle.RStyle>

examples/Popups.tsx

@@ -8,7 +8,6 @@ import {RMap, ROSM, RLayerVector, RFeature, RPopup} from 'rlayers';
 import {RStyle, RIcon, RFill, RStroke} from 'rlayers/style';
 
 import locationIcon from './svg/location.svg';
-import {Feature} from 'ol';
 
 const coords: Record<string, Coordinate> = {
     origin: [2.364, 48.82],

examples/VectorTiles.tsx

@@ -4,7 +4,7 @@
  * layers that appear only when zoomed in
  */
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {Feature} from 'ol';
 import {fromLonLat} from 'ol/proj';
 import {MVT} from 'ol/format';
@@ -14,6 +14,7 @@ import {RMap, RLayerVectorTile} from 'rlayers';
 import {useRStyle, RStyle, RStyleArray, RStroke, RFill, RCircle, RText} from 'rlayers/style';
 import {Geometry} from 'ol/geom';
 import RLayerStadia from 'rlayers/layer/RLayerStadia';
+import RenderFeature from 'ol/render/Feature';
 
 const degree = 111319.49079327358;
 const fonts = {
@@ -33,6 +34,7 @@ const fonts = {
 export default function VectorTiles(): JSX.Element {
     const [country, setCountry] = React.useState('');
     const towns = useRStyle();
+    const parser = useMemo(() => new MVT(), []);
     return (
         <React.Fragment>
             <RStyleArray
@@ -90,7 +92,7 @@ export default function VectorTiles(): JSX.Element {
                     )}
                     url='https://velivole.b-cdn.net/tiles/admin/{z}/{x}/{y}.pbf'
                     projection='EPSG:4326'
-                    format={new MVT()}
+                    format={parser}
                 >
                     <RStyle>
                         {/* This is the borders style */}
@@ -104,23 +106,23 @@ export default function VectorTiles(): JSX.Element {
                     projection='EPSG:4326'
                     maxResolution={0.01}
                     style={towns}
-                    format={new MVT()}
+                    format={parser}
                 />
                 {/* The towns visible only when zoomed in */}
                 <RLayerVectorTile
                     url='https://velivole.b-cdn.net/tiles/place/1/{z}/{x}/{y}.pbf'
                     projection='EPSG:4326'
                     maxResolution={0.0025}
                     style={towns}
-                    format={new MVT()}
+                    format={parser}
                 />
                 {/* The small villages at maximum resolution */}
                 <RLayerVectorTile
                     url='https://velivole.b-cdn.net/tiles/place/2/{z}/{x}/{y}.pbf'
                     projection='EPSG:4326'
                     maxResolution={0.0005}
                     style={towns}
-                    format={new MVT()}
+                    format={parser}
                 />
             </RMap>
             <div className='mx-0 mt-0 mb-3 p-1 w-100 jumbotron shadow shadow'>

package.json

@@ -93,7 +93,7 @@
     "lru-cache": "^10.2.0"
   },
   "peerDependencies": {
-    "ol": ">=6.10.0 <9.2.0",
+    "ol": "9.2.2",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
@@ -134,8 +134,8 @@
     "jest-environment-jsdom": "^29.4.3",
     "markdown-loader": "^8.0.0",
     "null-loader": "^4.0.1",
-    "ol": "^9.1.0",
-    "ol-mbtiles": "2.3.0",
+    "ol": "^9.2.2",
+    "ol-mbtiles": "^2.4.0",
     "prettier": "2.8.8",
     "prism-themes": "^1.6.0",
     "prismjs": "^1.28.0",