OpenLayers 8.0.0 (#179)

* build with openlayers 8 * add the stadia secret * render stadia optional * render stadia optional in the examples/tests * restore testing on all versions * update the ol8 snapshot * document * remove the stadia snapshot * update the changelog --------- Co-authored-by: Momtchil Momtchev <[email protected]>
mmomtchev · Sep 2, 2023 · 65da419 · 65da419
1 parent 530654c
commit 65da419
Show file tree

Hide file tree

Showing 19 changed files with 136 additions and 94 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -10,6 +10,9 @@ on:
         branches: [main]
     workflow_dispatch:
 
+env:
+    STADIA_MAPS_API_KEY: ${{ secrets.STADIA_MAPS_API_KEY }}
+
 jobs:
     default:
         runs-on: ubuntu-latest
@@ -20,6 +23,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: npm i
             - run: npm run build --if-present
             - run: npm test
@@ -45,13 +49,15 @@ jobs:
                     - '7.3.0'
                     - '7.4.0'
                     - '7.5.1'
+                    - '8.0.0'
 
         steps:
             - uses: actions/checkout@v3
             - name: Use Node.js 18.x
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: npm i
             - run: npm i --force ol@${{ matrix.ol-version }}
             - run: npm run build --if-present
@@ -66,6 +72,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i [email protected] [email protected] [email protected] @types/react@16 @types/react-dom@16 @testing-library/react@11
             - run: npm i
@@ -82,6 +89,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i [email protected] [email protected] [email protected] @types/react@16 @types/react-dom@16 @testing-library/react@11
             - run: npm i
@@ -98,6 +106,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i react@17 react-dom@17 react-test-renderer@17 @types/react@17 @types/react-dom@17 @testing-library/react@11
             - run: npm i
@@ -114,6 +123,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i react@18 react-dom@18 react-test-renderer@18 @types/react@18 @types/react-dom@18 @testing-library/react@13
             - run: npm i
@@ -130,6 +140,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i [email protected] [email protected] [email protected] @types/react@18 @types/react-dom@18 @testing-library/react@13
             - run: npm i
@@ -146,6 +157,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: |
                   npm i [email protected] [email protected] [email protected] @types/react@18 @types/react-dom@18 @testing-library/react@13
             - run: npm i
@@ -162,6 +174,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18.x
+            - run: echo "::add-mask::${{ secrets.STADIA_MAPS_API_KEY }}"
             - run: npm i
             - run: npm run test
               env:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ 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).
 
+#
+
+-   Support OpenLayers 8.0.0
+-   Replace `RLayerStamen` with `RLayerStadia` which requires OpenLayers 8.0.0
+
 # [2.0.0] 2023-08-16
 
 -   Vastly improved event handling performance avoiding expensive `forEachFeatureAtPixel` on layers that do not have event handlers

diff --git a/README.md b/README.md
@@ -53,15 +53,15 @@ _React_ is supported from version 16.8.0.
 
 ---
 
-| rlayers          | Unit-tested _OpenLayers_ versions                                                                   | Unit-tested _React_ versions                |
-| ---------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| 1.0 (_obsolete_) | 6.0                                                                                                 | 16.8, 16.14, 17.0.2                         |
-| 1.1 (_obsolete_) | 6.6, 6.7, 6.8, 6.9                                                                                  | 16.8, 16.14, 17.0.2                         |
-| 1.2 (_obsolete_) | 6.6, 6.7, 6.8, 6.9                                                                                  | 16.8, 16.14, 17.0.2                         |
-| 1.3 (_obsolete_) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1                                                                | 16.8, 16.14, 17.0.2, 18.0.0                 |
-| 1.4 (_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               | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
-| 1.5              | 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        | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
-| 2.0 `(@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 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
+| rlayers          | Unit-tested _OpenLayers_ versions                                                                          | Unit-tested _React_ versions                |
+| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| 1.0 (_obsolete_) | 6.0                                                                                                        | 16.8, 16.14, 17.0.2                         |
+| 1.1 (_obsolete_) | 6.6, 6.7, 6.8, 6.9                                                                                         | 16.8, 16.14, 17.0.2                         |
+| 1.2 (_obsolete_) | 6.6, 6.7, 6.8, 6.9                                                                                         | 16.8, 16.14, 17.0.2                         |
+| 1.3 (_obsolete_) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1                                                                       | 16.8, 16.14, 17.0.2, 18.0.0                 |
+| 1.4 (_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                      | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
+| 1.5 (_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               | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
+| 2.0 `(@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 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
 
 ---
 

diff --git a/documentation.yml b/documentation.yml
@@ -22,7 +22,7 @@ toc:
           - RLayerCluster
           - RLayerHeatmap
           - RLayerRaster
-          - RLayerStamen
+          - RLayerStadia
           - RLayerTileJSON
           - RLayerTile
           - RLayerTileWebGL

diff --git a/examples/App.tsx b/examples/App.tsx
@@ -4,6 +4,8 @@ import './example.css';
 import './ghp.css';
 import React from 'react';
 import {HashRouter as Router, Routes, Route, Link} from 'react-router-dom';
+import {VERSION as OL_VERSION} from 'ol';
+import semver from 'semver';
 
 const examples = {
     simple: {title: 'Simple map', file: 'Simple'},
@@ -17,17 +19,17 @@ const examples = {
     overview: {title: 'Overview', file: 'Overview'},
     popups: {title: 'Popups', file: 'Popups'},
     features: {title: 'GeoJSON', file: 'Features'},
-    cluster: {title: 'Clustering', file: 'Cluster'},
-    heatmap: {title: 'Heatmap', file: 'Heatmap'},
-    layers: {title: 'Multiple layers', file: 'Layers'},
+    cluster: {title: 'Clustering', file: 'Cluster', ol8: true},
+    heatmap: {title: 'Heatmap', file: 'Heatmap', ol8: true},
+    layers: {title: 'Multiple layers', file: 'Layers', ol8: true},
     pindrop: {title: 'Drop a pin', file: 'PinDrop'},
     spinner: {title: 'Spinner', file: 'Spinner'},
-    geodata: {title: 'Infographics', file: 'GeoData'},
+    geodata: {title: 'Infographics', file: 'GeoData', ol8: true},
     interactions: {title: 'Move & Select', file: 'Interactions'},
     add_delete: {title: 'Add & Delete', file: 'Add-Delete'},
     draw: {title: 'Draw & Modify', file: 'Draw'},
     geolocation: {title: 'Geolocation', file: 'Geolocation'},
-    vectortiles: {title: 'Vector tiles', file: 'VectorTiles'},
+    vectortiles: {title: 'Vector tiles', file: 'VectorTiles', ol8: true},
     mbtilesRaster: {title: 'Raster MBTiles', file: 'RasterMBTiles'},
     mbtilesVector: {title: 'Vector MBTiles', file: 'VectorMBTiles'},
     reproj: {title: 'Reprojection', file: 'Reprojection'},
@@ -44,6 +46,8 @@ const ReadmeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './Readm
 const CodeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './CodeBlock'));
 
 for (const ex of Object.keys(examples)) {
+    if (semver.lt(OL_VERSION, '8.0.0') && examples[ex].ol8) continue;
+
     examples[ex].comp = React.lazy(
         () => import(/* webpackPrefetch: true */ `./${examples[ex].file}.tsx`)
     );
@@ -71,9 +75,11 @@ const App = (): JSX.Element => {
             <div className='d-flex flex-row p-3'>
                 <div className='d-flex flex-column left-menu me-2'>
                     <LeftMenuItem id={''} title={'Home'} />
-                    {Object.keys(examples).map((e) => (
-                        <LeftMenuItem key={e} id={e} title={examples[e].title} />
-                    ))}
+                    {Object.keys(examples)
+                        .filter((ex) => semver.gte(OL_VERSION, '8.0.0') || !examples[ex].ol8)
+                        .map((e) => (
+                            <LeftMenuItem key={e} id={e} title={examples[e].title} />
+                        ))}
                 </div>
                 <div className='d-flex flex-column w-100 overflow-hidden'>
                     <div className='fluid-container'>

diff --git a/examples/Cluster.tsx b/examples/Cluster.tsx
@@ -6,8 +6,9 @@ import 'ol/ol.css';
 
 // This example illustrates the versatility of a dynamic RStyle
 // It also makes use of its caching abilities
-import {RMap, RLayerStamen, RLayerCluster} from 'rlayers';
+import {RMap, RLayerCluster} from 'rlayers';
 import {RStyle, RFill, RStroke, RRegularShape, RCircle, RText} from 'rlayers/style';
+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)
@@ -34,7 +35,7 @@ export default function Cluster(): JSX.Element {
     return (
         <React.Fragment>
             <RMap className='example-map' initial={{center: fromLonLat([0, 0]), zoom: 1}}>
-                <RLayerStamen layer='toner' />
+                <RLayerStadia layer='toner' />
                 <RLayerCluster
                     ref={earthquakeLayer}
                     distance={distance}

diff --git a/examples/GeoData.tsx b/examples/GeoData.tsx
@@ -5,7 +5,8 @@ import GeoJSON from 'ol/format/GeoJSON';
 import {Geometry} from 'ol/geom';
 import 'ol/ol.css';
 
-import {RMap, RLayerVector, RStyle, RFeature, ROverlay, RLayerStamen} from 'rlayers';
+import {RMap, RLayerVector, RStyle, RFeature, ROverlay} from 'rlayers';
+import RLayerStadia from 'rlayers/layer/RLayerStadia';
 
 // These are the French internal administrative borders in GeoJSON format
 const departements =
@@ -37,7 +38,7 @@ export default function GeoData(): JSX.Element {
                 noDefaultControls={true}
                 noDefaultInteractions={true}
             >
-                <RLayerStamen layer='toner' />
+                <RLayerStadia layer='stamen_toner' />
 
                 {/* This the internal borders layer, initialized with the GeoJSON
                  * useCallback is a performance optimization, it allows to always have

diff --git a/examples/Heatmap.tsx b/examples/Heatmap.tsx
@@ -5,7 +5,8 @@ import {Feature} from 'ol';
 import {Geometry} from 'ol/geom';
 import 'ol/ol.css';
 
-import {RMap, RLayerStamen, RLayerHeatmap} from 'rlayers';
+import {RMap, RLayerHeatmap} from 'rlayers';
+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)
@@ -19,7 +20,7 @@ export default function Heatmap(): JSX.Element {
     return (
         <React.Fragment>
             <RMap className='example-map' initial={{center: fromLonLat([0, 0]), zoom: 1}}>
-                <RLayerStamen layer='toner' />
+                <RLayerStadia layer='toner' />
                 <RLayerHeatmap
                     blur={blur}
                     radius={radius}

diff --git a/examples/Layers.tsx b/examples/Layers.tsx
@@ -12,6 +12,7 @@ import {
     RLayerWMS,
     RLayerTileWMS
 } from 'rlayers';
+import RLayerStadia from 'rlayers/layer/RLayerStadia';
 import 'ol/ol.css';
 import 'rlayers/control/layers.css';
 
@@ -33,9 +34,9 @@ export default function Layers(): JSX.Element {
                         properties={{label: 'Transport'}}
                         url='http://tile.thunderforest.com/transport/{z}/{x}/{y}.png'
                     />
-                    <RLayerTile
-                        properties={{label: 'Watercolor'}}
-                        url='https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
+                    <RLayerStadia
+                        properties={{label: 'Stadia Terrain Background'}}
+                        layer='stamen_terrain_background'
                     />
                     <RLayerTileJSON
                         properties={{label: 'Mapbox TileJSON'}}

diff --git a/examples/VectorTiles.tsx b/examples/VectorTiles.tsx
@@ -10,9 +10,10 @@ import {fromLonLat} from 'ol/proj';
 import {MVT} from 'ol/format';
 import 'ol/ol.css';
 
-import {RMap, RLayerTile, RLayerVectorTile} from 'rlayers';
+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';
 
 const degree = 111319.49079327358;
 const fonts = {
@@ -78,11 +79,7 @@ export default function VectorTiles(): JSX.Element {
                 projection='EPSG:4326'
             >
                 {/* This is the background raster map */}
-                <RLayerTile
-                    properties={{label: 'Watercolor'}}
-                    projection='EPSG:3857'
-                    url='https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
-                />
+                <RLayerStadia layer='stamen_watercolor' />
                 {/* These are the administrative borders */}
                 <RLayerVectorTile
                     onPointerEnter={React.useCallback(

diff --git a/examples/custom.d.ts b/examples/custom.d.ts
@@ -17,3 +17,4 @@ declare module '*.geojson' {
 
 declare const VERSION: string;
 declare const MAPBOX_TOKEN: string;
+declare const STADIA_MAPS_API_KEY: string;
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
     "lru-cache": "^7.10.0"
   },
   "peerDependencies": {
-    "ol": ">=6.10.0 <=7.5.1",
+    "ol": ">=6.10.0 <=8.0.0",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
@@ -130,7 +130,7 @@
     "jest-environment-jsdom": "^29.4.3",
     "markdown-loader": "^8.0.0",
     "null-loader": "^4.0.1",
-    "ol": "^7.5.1",
+    "ol": "^8.0.0",
     "ol-mbtiles": "^2.0.2",
     "prettier": "2.8.4",
     "prism-themes": "^1.6.0",

diff --git a/src/index.ts b/src/index.ts
@@ -22,7 +22,6 @@ export {default as RLayerImage, RLayerImageProps} from './layer/RLayerImage';
 export {default as RLayerGraticule, RLayerGraticuleProps} from './layer/RLayerGraticule';
 export {default as RLayerTileJSON, RLayerTileJSONProps} from './layer/RLayerTileJSON';
 export {default as RLayerTileWMS, RLayerTileWMSProps} from './layer/RLayerTileWMS';
-export {default as RLayerStamen, RLayerStamenProps} from './layer/RLayerStamen';
 export {default as RLayerHeatmap, RLayerHeatmapProps} from './layer/RLayerHeatmap';
 export {default as RLayerCluster, RLayerClusterProps} from './layer/RLayerCluster';
 export {default as RLayerVectorTile, RLayerVectorTileProps} from './layer/RLayerVectorTile';

diff --git a/src/layer/RLayerStadia.tsx b/src/layer/RLayerStadia.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Tile as LayerTile} from 'ol/layer';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import {StadiaMaps} from 'ol/source';
+
+import {RContextType} from '../context';
+import {default as RLayerRaster, RLayerRasterProps} from './RLayerRaster';
+
+/**
+ * @propsfor RLayerStadia
+ */
+export interface RLayerStadiaProps extends RLayerRasterProps {
+    /** Stadia Maps layer name */
+    layer: string;
+    /** API key */
+    apiKey?: string;
+    /** Retina screen mode, @default false */
+    retina?: boolean;
+}
+
+/**
+ * A ready to use interface for Stadia Maps's map service
+ *
+ * Requires OpenLayers 8.0 and must be imported separately
+ *
+ * `import RLayerStadia from 'rlayers/layer/RLayerStadia';`
+ *
+ *
+ * Requires an `RMap` context
+ */
+export default class RLayerStadia extends RLayerRaster<RLayerStadiaProps> {
+    ol: LayerTile<StadiaMaps>;
+    source: StadiaMaps;
+
+    constructor(props: Readonly<RLayerStadiaProps>, context?: React.Context<RContextType>) {
+        super(props, context);
+        this.source = new StadiaMaps({
+            layer: this.props.layer,
+            apiKey: this.props.apiKey,
+            retina: this.props.retina ?? false
+        });
+        this.ol = new LayerTile({source: this.source});
+        this.eventSources = [this.ol, this.source];
+    }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,3 +17,4 @@ declare module '*.geojson' {

		declare const VERSION: string;
		declare const MAPBOX_TOKEN: string;
		declare const STADIA_MAPS_API_KEY: string;