rlayers/dist/ROverlay.js

React Components for OpenLayers

import React from 'react';
import { Overlay } from 'ol';
import { RlayersBase } from './REvent';
/**
 * A basic overlay
 *
 * Requires a location context
 *
 * (ie it must be descendant of a `RFeature`)
 *
 * @name ROverlay
 * @constructor
 */
export class ROverlayBase extends RlayersBase {
    constructor(props, context) {
        var _a;
        super(props, context);
        if (!((_a = this.context) === null || _a === void 0 ? void 0 : _a.location))
            throw new Error('An overlay must be part of a location provider (ie RFeature)');
        this.ol = new Overlay({
            autoPan: props.autoPan,
            offset: props.offset,
            positioning: props.positioning
        });
        this.containerRef = React.createRef();
    }
    setPosition() {
        var _a;
        this.ol.setPosition(this.context.location);
        if (this.props.autoPosition && ((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.current)) {
            this.containerRef.current.style.position = 'absolute';
            const pixel = this.context.map.getPixelFromCoordinate(this.context.location);
            const size = this.context.map.getSize();
            if (pixel[0] > size[0] / 2) {
                this.containerRef.current.style.left = null;
                this.containerRef.current.style.right = '0px';
            }
            else {
                this.containerRef.current.style.left = '0px';
                this.containerRef.current.style.right = null;
            }
            if (pixel[1] > size[1] / 2) {
                this.containerRef.current.style.top = null;
                this.containerRef.current.style.bottom = '0px';
            }
            else {
                this.containerRef.current.style.top = '0px';
                this.containerRef.current.style.bottom = null;
            }
        }
    }
    refresh(prevProps) {
        super.refresh(prevProps);
        this.ol.setElement(this.containerRef.current);
        this.setPosition();
        if (this.props.offset !== (prevProps === null || prevProps === void 0 ? void 0 : prevProps.offset)) {
            this.ol.setOffset(this.props.offset);
        }
        if (this.props.positioning !== (prevProps === null || prevProps === void 0 ? void 0 : prevProps.positioning)) {
            this.ol.setPositioning(this.props.positioning);
        }
    }
    componentDidMount() {
        super.componentDidMount();
        this.context.map.addOverlay(this.ol);
    }
    componentWillUnmount() {
        super.componentWillUnmount();
        this.context.map.removeOverlay(this.ol);
    }
    render() {
        this.setPosition();
        return (React.createElement("div", { className: '_rlayers_ROverlay' },
            React.createElement("div", { ref: this.containerRef, className: this.props.className, onClick: this.props.onClick }, this.props.children)));
    }
}
export default class ROverlay extends ROverlayBase {
}
//# sourceMappingURL=ROverlay.js.map