rlayers/RMap.js

React Components for OpenLayers

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var ol_1 = require("ol");
var context_1 = require("./context");
var REvent_1 = require("./REvent");
/**
 * Main map component
 *
 * All other components, except `RStyle` should be part of an `RMap`
 */
var RMap = /** @class */ (function (_super) {
    __extends(RMap, _super);
    function RMap(props) {
        var _this = _super.call(this, props) || this;
        _this.updateView = function (e) {
            var _a;
            var view = _this.ol.getView();
            if (typeof ((_a = _this.props) === null || _a === void 0 ? void 0 : _a.view[1]) === 'function')
                _this.props.view[1]({
                    center: view.getCenter(),
                    zoom: view.getZoom(),
                    resolution: view.getResolution()
                });
        };
        _this.target = react_1.default.createRef();
        _this.ol = new ol_1.Map({
            controls: props.noDefaultControls ? [] : undefined,
            interactions: props.noDefaultInteractions ? [] : undefined,
            view: new ol_1.View({
                projection: props.projection,
                center: props.initial.center,
                zoom: props.initial.resolution === undefined ? props.initial.zoom : undefined,
                resolution: props.initial.resolution,
                extent: props.extent,
                minResolution: props.minResolution,
                maxResolution: props.maxResolution,
                constrainResolution: props.constrainResolution,
                minZoom: props.minZoom,
                maxZoom: props.maxZoom,
                enableRotation: props.enableRotation,
                constrainRotation: props.constrainRotation
            })
        });
        if (_this.props.view)
            _this.ol.on('moveend', _this.updateView);
        return _this;
    }
    RMap.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.ol.setTarget(this.target.current);
    };
    RMap.prototype.refresh = function (prevProps) {
        var e_1, _a;
        _super.prototype.refresh.call(this, prevProps);
        var view = this.ol.getView();
        try {
            for (var _b = __values(['minZoom', 'maxZoom', 'constrainResolution']), _c = _b.next(); !_c.done; _c = _b.next()) {
                var p = _c.value;
                var m = p.charAt(0).toUpperCase() + p.substring(1);
                if (!prevProps || this.props[p] !== prevProps[p])
                    view['set' + m](this.props[p]);
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_1) throw e_1.error; }
        }
        if (this.props.view) {
            view.setCenter(this.props.view[0].center);
            if (this.props.view[0].resolution === undefined)
                view.setZoom(this.props.view[0].zoom);
            else
                view.setResolution(this.props.view[0].resolution);
        }
        if (this.props.properties)
            this.ol.setProperties(this.props.properties);
        if (this.props.view)
            this.ol.on('moveend', this.updateView);
        else
            this.ol.un('moveend', this.updateView);
    };
    RMap.prototype.render = function () {
        return (react_1.default.createElement("div", { className: this.props.className, style: { width: this.props.width, height: this.props.height }, ref: this.target },
            react_1.default.createElement(context_1.RContext.Provider, { value: { map: this.ol, rMap: this } }, this.props.children)));
    };
    return RMap;
}(REvent_1.RlayersBase));
exports.default = RMap;
//# sourceMappingURL=RMap.js.map