reduce OpenLayers API calls (#364)

* avoid calling OpenLayers when possible

* add more debug

* ignore the size warnings

Author: mmomtchev

examples/Spinner.tsx

@@ -5,13 +5,19 @@ import spinnerIcon from './svg/pacman.svg';
 import 'ol/ol.css';
 
 export default function Layers(): JSX.Element {
-    const [loading, setLoading] = React.useState(0);
+    const [loading, setLoading] = React.useState(true);
+    const showSpinner = React.useCallback(() => setLoading(true), [setLoading]);
+    const hideSpinner = React.useCallback(() => setLoading(false), [setLoading]);
+    const origin = React.useMemo(() => ({center: fromLonLat([2.364, 48.82]), zoom: 4}), []);
     return (
-        <React.Fragment>
-            <RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 4}}>
+        <>
+            <RMap
+                className='example-map'
+                initial={origin}
+                //onLoadStart={showSpinner}
+                onLoadEnd={hideSpinner}
+            >
                 <RLayerTile
-                    onTileLoadStart={() => setLoading((loading) => loading + 1)}
-                    onTileLoadEnd={() => setLoading((loading) => loading - 1)}
                     url='https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png'
                     attributions='Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © OpenTopoMap (CC-BY-SA)'
                 />
@@ -20,6 +26,6 @@ export default function Layers(): JSX.Element {
                 <img src={spinnerIcon} alt='spinner' />
                 <strong>{loading} Loading...</strong>
             </div>
-        </React.Fragment>
+        </>
     );
 }

src/REvent.tsx

@@ -71,7 +71,10 @@ export class RlayersBase<P, S> extends React.PureComponent<P, S> {
                 debug('installing handler', this, p, newEvents[p]);
                 const prop = this.getHandlerProp(p);
                 if (!prop) throw new Error('Internal error');
-                handlers[p] = (e: unknown) => this.props[prop].call(this, e);
+                handlers[p] = (e: unknown) => {
+                    debug('handling event', e, this, this.props[prop]);
+                    return this.props[prop].call(this, e);
+                };
                 for (const source of eventSources) source.on(p as OLEvent, handlers[p]);
                 this.incrementHandlers(p);
             }

src/RMap.tsx

@@ -8,6 +8,7 @@ import {ProjectionLike} from 'ol/proj';
 
 import {RContext} from './context';
 import {RlayersBase} from './REvent';
+import debug from './debug';
 
 /** Center and zoom level */
 export type RView = {
@@ -78,6 +79,12 @@ export interface RMapProps extends PropsWithChildren<unknown> {
     onRenderComplete?: (this: RMap, e: RenderEvent) => boolean | void;
     /** Called on every change */
     onChange?: (this: RMap, e: BaseEvent) => void;
+    /** Called when the map starts loading */
+    onLoadStart?: (this: RMap, e: MapEvent) => void;
+    /** Called when the map has completely loaded */
+    onLoadEnd?: (this: RMap, e: MapEvent) => void;
+    /** Generic error handled */
+    onError?: (this: RMap, e: BaseEvent) => void;
     /** A set of properties that can be accessed later by .get()/.getProperties() */
     properties?: Record<string, unknown>;
     /** Extent of the map, cannot be dynamically modified
@@ -151,7 +158,10 @@ export default class RMap extends RlayersBase<RMapProps, Record<string, never>>
 
     componentDidMount(): void {
         super.componentDidMount();
-        this.ol.setTarget(this.target.current);
+        if (this.ol.getTarget() !== this.target.current) {
+            debug('Setting target', this, this.target.current);
+            this.ol.setTarget(this.target.current);
+        }
     }
 
     private updateView = (e: MapEvent): void => {
@@ -169,9 +179,13 @@ export default class RMap extends RlayersBase<RMapProps, Record<string, never>>
         const view = this.ol.getView();
         for (const p of ['minZoom', 'maxZoom', 'constrainResolution']) {
             const m = p.charAt(0).toUpperCase() + p.substring(1);
-            if (!prevProps || this.props[p] !== prevProps[p]) view['set' + m](this.props[p]);
+            if (this.props?.[p] !== prevProps?.[p]) {
+                debug('Setting', this, m, this.props[p]);
+                view['set' + m](this.props[p]);
+            }
         }
         if (this.props.view) {
+            debug('Setting view', this, this.props.view);
             view.setCenter(this.props.view[0].center);
 
             if (this.props.view[0].resolution === undefined) view.setZoom(this.props.view[0].zoom);

src/layer/RLayer.tsx

@@ -66,10 +66,15 @@ export default class RLayer<P extends RLayerProps> extends RlayersBase<P, Record
             'maxZoom'
         ]) {
             const m = p.charAt(0).toUpperCase() + p.substring(1);
-            if (this.props[p] !== (prevProps && prevProps[p])) this.ol['set' + m](this.props[p]);
+            if (this.props?.[p] !== prevProps?.[p]) {
+                debug('Setting', this, m, this.props[p]);
+                this.ol['set' + m](this.props[p]);
+            }
         }
-        if (this.source && this.props.attributions)
+        if (this.source && this.props.attributions !== prevProps?.attributions) {
+            debug('Setting attributions', this);
             this.source.setAttributions(this.props.attributions);
+        }
         if (this.props.properties) this.ol.setProperties(this.props.properties);
     }
 

src/layer/RLayerTile.tsx

@@ -5,6 +5,7 @@ import {XYZ} from 'ol/source';
 import TileGrid from 'ol/tilegrid/TileGrid';
 
 import {default as RLayerRaster, RLayerRasterProps} from './RLayerRaster';
+import debug from '../debug';
 
 /**
  * @propsfor RLayerTile
@@ -63,6 +64,7 @@ export default class RLayerTile extends RLayerRaster<RLayerTileProps> {
     protected refresh(prevProps?: RLayerTileProps): void {
         super.refresh(prevProps);
         if (prevProps?.tileGrid !== this.props.tileGrid || prevProps?.url !== this.props.url) {
+            debug('replacing source', this);
             this.createSource();
             this.ol.setSource(this.source);
             this.attachOldEventHandlers(this.source);

webpack.config.ts

@@ -23,8 +23,13 @@ const webpackConfig = (env): webpack.Configuration => {
             path: path.join(__dirname, '/docs'),
             filename: 'bundle.js'
         },
-        // https://github.com/TypeStrong/ts-loader/issues/751
-        ignoreWarnings: [{message: /export .* was not found in/}],
+        ignoreWarnings: [
+            // https://github.com/TypeStrong/ts-loader/issues/751
+            {message: /export .* was not found in/},
+            // OpenLayers + React + rlayers is simply big
+            {message: /asset size exceeds/},
+            {message: /recommended size limit/}
+        ],
         module: {
             rules: [
                 {