@luomus/laji-form 15.0.0 → 15.1.1

package/lib/components/fields/MapArrayField.js

@@ -1,1783 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFeatureStyleWithHighlight = exports.getFeatureStyleWithLowerOpacity = exports.Map = exports.MapComponent = exports.parseGeometries = void 0;
-const React = require("react");
-const PropTypes = require("prop-types");
-const react_dom_1 = require("react-dom");
-const immutability_helper_1 = require("immutability-helper");
-const equals = require("deep-equal");
-const merge = require("deepmerge");
-const laji_map_1 = require("@luomus/laji-map");
-const utils_1 = require("@luomus/laji-map/lib/utils");
-const globals_1 = require("@luomus/laji-map/lib/globals");
-const components_1 = require("../components");
-const utils_2 = require("../../utils");
-const Context_1 = require("../../Context");
-const ReactContext_1 = require("../../ReactContext");
-const NestField_1 = require("./NestField");
-const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
-const ArrayField_1 = require("./ArrayField");
-const utils_3 = require("@rjsf/utils");
-function parseGeometries(geometry) {
-    return ((geometry && geometry.type === "GeometryCollection") ? geometry.geometries : [geometry])
-        .filter(geometry => geometry)
-        .reduce((geometries, _geometry) => {
-        if (geometry.type === "GeometryCollection") {
-            geometries = [...geometries, ...parseGeometries(_geometry)];
-        }
-        else if ("type" in geometry) {
-            geometries.push(geometry);
-        }
-        return geometries;
-    }, []);
-}
-exports.parseGeometries = parseGeometries;
-class MapArrayField extends React.Component {
-    render() {
-        const { geometryMapper = "default" } = utils_2.getUiOptions(this.props.uiSchema);
-        switch (geometryMapper) {
-            case "default":
-                return React.createElement(DefaultMapArrayField, Object.assign({}, this.props));
-            case "units":
-                return React.createElement(UnitsMapArrayField, Object.assign({}, this.props));
-            case "lineTransect":
-                return React.createElement(LineTransectMapArrayField, Object.assign({}, this.props));
-            case "lolife":
-                return React.createElement(LolifeMapArrayField, Object.assign({}, this.props));
-        }
-    }
-}
-exports.default = MapArrayField;
-MapArrayField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            geometryField: PropTypes.string,
-            // Strategy for getting geometry data.
-            geometryMapper: PropTypes.oneOf(["default", "units", "lineTransect", "lolife", "lolifeNamedPlace"]),
-            topOffset: PropTypes.number,
-            bottomOffset: PropTypes.number,
-            popupFields: PropTypes.arrayOf(PropTypes.object),
-            computeAreaField: PropTypes.string,
-            areaInHectares: PropTypes.bool,
-            mapSizes: PropTypes.shape({
-                lg: PropTypes.number,
-                md: PropTypes.number,
-                sm: PropTypes.number,
-                xs: PropTypes.number
-            }),
-            data: PropTypes.arrayOf(PropTypes.shape({
-                geometryField: PropTypes.string.isRequired
-            })),
-            help: PropTypes.string
-        }).isRequired,
-    }),
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["array"])
-    }).isRequired,
-    formData: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
-};
-let DefaultMapArrayField = class DefaultMapArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onMapChangeCreateGathering = this.onMapChangeCreateGathering.bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.getGeometry = this.getGeometry.bind(this);
-    }
-    getOptions(options) {
-        const { formData } = this.props;
-        const geometries = this.getData();
-        const emptyMode = !formData || !formData.length;
-        const draw = (options.draw === false || (utils_2.isNullOrUndefined(this.state.activeIdx) && !emptyMode)) ? false : Object.assign({ featureCollection: {
-                type: "FeatureCollection",
-                features: (geometries || []).map(geometry => {
-                    return { type: "Feature", properties: {}, geometry };
-                })
-            }, getDraftStyle: this.getDraftStyle, onChange: emptyMode ? this.onMapChangeCreateGathering : this.onChange }, (options.draw && options.draw.constructor === Object && options.draw !== null ? options.draw : {}));
-        const controls = (emptyMode || this.state.activeIdx !== undefined)
-            ? { drawCopy: true }
-            : { draw: false };
-        const data = geometries && geometries.length || !options.placeholderGeometry
-            ? []
-            : [{
-                    geoData: options.placeholderGeometry,
-                    getFeatureStyle: this._getPlaceholderStyle
-                }];
-        const extraData = (options.data || []).map((dataItem) => ({ geoData: dataItem.geometryField ? this.getGeometry(formData, dataItem.geometryField) : dataItem }));
-        return { draw, controls, emptyMode, data: [...data, ...extraData] };
-    }
-    onMapChangeCreateGathering(events) {
-        const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-        if (!geometryField) {
-            return;
-        }
-        let formData = utils_2.getDefaultFormState(this.props.schema.items);
-        const geometries = events.filter(e => e.type === "create").map(e => e.feature.geometry);
-        let splittedPath = geometryField.split("/").filter(s => !utils_2.isEmptyString(s));
-        let _cumulatedPointer = "";
-        let _schema = this.props.schema.items;
-        formData = splittedPath.reduce((_formData, split, i) => {
-            _cumulatedPointer += `/${split}`;
-            _schema = _schema.properties
-                ? _schema.properties[split]
-                : _schema.items;
-            return immutability_helper_1.default(_formData, utils_2.getUpdateObjectFromJSONPointer(_cumulatedPointer, { $set: i === splittedPath.length - 1
-                    ? {
-                        type: "GeometryCollection",
-                        geometries
-                    }
-                    : utils_2.getDefaultFormState(_schema)
-            }));
-        }, formData);
-        this.props.onChange(ArrayField_1.onArrayFieldChange([formData], this.props));
-        this.setState({ activeIdx: 0 });
-    }
-    getGeometry(formData, _geometryField) {
-        const { uiSchema } = this.props;
-        const { geometryField } = utils_2.getUiOptions(uiSchema);
-        const { activeIdx } = this.state;
-        if (!formData) {
-            return;
-        }
-        const item = formData[activeIdx];
-        if (activeIdx === undefined || !item) {
-            return;
-        }
-        const geometryItem = utils_2.parseJSONPointer(formData[activeIdx], _geometryField || geometryField);
-        return geometryItem;
-    }
-    getGeometries() {
-        return this.getData();
-    }
-    getData() {
-        const geometryItem = this.getGeometry(this.props.formData);
-        if (geometryItem && geometryItem.type) {
-            return parseGeometries(geometryItem);
-        }
-        return [];
-    }
-    onChange(events) {
-        let formData = this.props.formData ||
-            [utils_2.getDefaultFormState(this.props.schema.items)];
-        let addOrDelete = false;
-        events.forEach(e => {
-            switch (e.type) {
-                case "create":
-                    addOrDelete = true;
-                    formData = this.onAdd(e, formData);
-                    break;
-                case "delete":
-                    addOrDelete = true;
-                    formData = this.onRemove(e, formData);
-                    break;
-                case "edit":
-                    formData = this.onEdited(e, formData);
-                    break;
-                case "insert":
-                    addOrDelete = true;
-                    formData = this.onInsert(e, formData);
-                    break;
-            }
-        });
-        this.props.onChange(addOrDelete ? ArrayField_1.onArrayFieldChange(formData, this.props) : formData);
-    }
-    onAdd({ feature: { geometry } }, formData) {
-        const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-        return utils_2.updateSafelyWithJSONPointer(formData, { type: "GeometryCollection", geometries: [...parseGeometries(this.getGeometry(formData)), geometry] }, `/${this.state.activeIdx}/${geometryField}`);
-    }
-    onRemove({ idxs }, formData) {
-        const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-        let splices = [];
-        idxs.sort().reverse().forEach((idx) => {
-            splices.push([idx, 1]);
-        });
-        const geometry = this.getGeometry(formData);
-        return immutability_helper_1.default(formData, { [this.state.activeIdx]: utils_2.getUpdateObjectFromJSONPointer(geometryField, geometry && geometry.type === "GeometryCollection" ?
-                { geometries: { $splice: splices } } : { $set: undefined }) });
-    }
-    onEdited({ features }, formData) {
-        const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-        const geometry = this.getGeometry(formData);
-        return immutability_helper_1.default(formData, { [this.state.activeIdx]: utils_2.getUpdateObjectFromJSONPointer(geometryField, geometry.type === "GeometryCollection" ? {
-                geometries: Object.keys(features).reduce((obj, idx) => {
-                    obj[idx] = { $set: features[idx].geometry };
-                    return obj;
-                }, {})
-            } : { $set: features[0].geometry }) });
-    }
-    onInsert({ idx, feature }, formData) {
-        const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-        return immutability_helper_1.default(formData, { [this.state.activeIdx]: utils_2.getUpdateObjectFromJSONPointer(geometryField, {
-                geometries: { $splice: [[idx, 0, feature.geometry]] }
-            }) });
-    }
-    afterActiveChange(idx) {
-        if (idx === undefined)
-            return;
-        this.map.zoomToData();
-    }
-};
-DefaultMapArrayField = __decorate([
-    _MapArrayField
-], DefaultMapArrayField);
-let UnitsMapArrayField = class UnitsMapArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.field = "units";
-        this.isGeometryCollection = (idx) => {
-            return this.props.formData[this.state.activeIdx].units[idx].unitGathering.geometry.type === "GeometryCollection";
-        };
-        this.getOptions = (options) => {
-            const { formData } = this.props;
-            const { gatherings = [], units = [] } = this.getData();
-            const emptyMode = !formData || !formData.length;
-            const draw = (options.draw === false || (utils_2.isNullOrUndefined(this.state.activeIdx) && !emptyMode)) ? false : Object.assign({ featureCollection: {
-                    type: "FeatureCollection",
-                    features: gatherings.map(geometry => {
-                        return { type: "Feature", properties: {}, geometry };
-                    })
-                }, getDraftStyle: this.getDraftStyle, onChange: emptyMode ? this.onMapChangeCreateGathering : this.onChange }, (options.draw && options.draw.constructor === Object && options.draw !== null ? options.draw : {}));
-            // Separate non geometry collections and geometry collections with single geometry to
-            // unitGeometries, and put the rest to unitGeometryCollections. This is for optimization.
-            let unitGeometryCollections = {}, unitGeometries = {};
-            units.forEach((geometry, idx) => {
-                const target = (geometry.type !== "GeometryCollection" || geometry.geometries.length === 1)
-                    ? unitGeometries
-                    : unitGeometryCollections;
-                target[idx] = geometry.type === "GeometryCollection" && geometry.geometries.length === 1
-                    ? geometry.geometries[0]
-                    : geometry;
-            });
-            this.unitIdxToGeometryIdx = {};
-            this.geometryIdxUnitIdx = {};
-            this.unitIdxToGeometryCollectionIdx = {};
-            this.geometryCollectionIdxUnitIdx = {};
-            const reducer = ([uToG, gToU], idx, _idx) => {
-                uToG[idx] = _idx;
-                gToU[_idx] = idx;
-                return [uToG, gToU];
-            };
-            Object.keys(unitGeometries).reduce(reducer, [this.unitIdxToGeometryIdx, this.geometryIdxUnitIdx]);
-            Object.keys(unitGeometryCollections).reduce(reducer, [this.unitIdxToGeometryCollectionIdx, this.geometryCollectionIdxUnitIdx]);
-            if (!this.unitChangeHandlers) {
-                this.unitChangeHandlers = { onChange: {}, mouseOver: {}, mouseOut: {} };
-            }
-            const getCommonOptions = unitIdx => {
-                // Store so change detection doesn't think it's a new function.
-                const unitChangeHandler = this.unitChangeHandlers.onChange[unitIdx] || this.onUnitChange(unitIdx ? +unitIdx : undefined);
-                this.unitChangeHandlers.onChange[unitIdx] = unitChangeHandler;
-                const mouseOver = this.unitChangeHandlers.mouseOver[unitIdx] || this.onMouseOver(unitIdx ? +unitIdx : undefined);
-                this.unitChangeHandlers.mouseOver[unitIdx] = mouseOver;
-                const mouseOut = this.unitChangeHandlers.mouseOut[unitIdx] || this.onMouseOut(unitIdx ? +unitIdx : undefined);
-                this.unitChangeHandlers.mouseOut[unitIdx] = mouseOut;
-                return {
-                    getPopup: this.getPopup,
-                    getFeatureStyle: this.getUnitFeatureStyle,
-                    getDraftStyle: this.getDraftStyle,
-                    editable: true,
-                    onChange: unitChangeHandler,
-                    on: {
-                        mouseover: mouseOver,
-                        mouseout: mouseOut
-                    }
-                };
-            };
-            const data = [
-                Object.assign({ featureCollection: {
-                        type: "FeatureCollection",
-                        features: Object.keys(unitGeometries).reduce((units, idx) => {
-                            idx = +idx;
-                            const geometry = unitGeometries[idx];
-                            if (geometry)
-                                units.push({ type: "Feature", properties: { idx }, geometry });
-                            return units;
-                        }, [])
-                    } }, getCommonOptions()),
-                ...Object.keys(unitGeometryCollections).map(idx => {
-                    idx = +idx;
-                    const geometryCollection = unitGeometryCollections[idx];
-                    return Object.assign({ featureCollection: {
-                            type: "FeatureCollection",
-                            features: geometryCollection.geometries.map(geometry => ({
-                                type: "Feature", properties: { idx }, geometry
-                            }))
-                        } }, getCommonOptions(this.geometryCollectionIdxUnitIdx[idx]));
-                })
-            ];
-            this.unitFeatures = data[0].featureCollection.features;
-            const controls = (emptyMode || !utils_2.isNullOrUndefined(this.state.activeIdx)) ?
-                {} : { draw: false };
-            return { draw, data, controls, emptyMode };
-        };
-        this.getUnitFeatureStyle = () => {
-            let color = "#55AEFA";
-            if (this._highlightedUnit !== undefined) {
-                color = utils_1.combineColors(color, "#ffffff", 30);
-            }
-            return { color: color, fillColor: color, weight: 4 };
-        };
-        this.startHighlight = ({ idx }) => {
-            const color = utils_1.combineColors(this.getUnitFeatureStyle().color, "#ffffff", 30);
-            if (idx in this.unitIdxToGeometryCollectionIdx) {
-                const _idx = this.unitIdxToGeometryCollectionIdx[idx];
-                this.map.data[_idx + 1].group.getLayers().forEach(layer => {
-                    this.map.setLayerStyle(layer, { color });
-                });
-            }
-            else {
-                const _idx = this.unitIdxToGeometryIdx[idx];
-                const layer = this.map.getLayerByIdxTuple([0, _idx]);
-                layer && this.map.setLayerStyle(layer, { color });
-            }
-        };
-        this.endHighlight = ({ idx }) => {
-            const color = this.getUnitFeatureStyle().color;
-            if (idx in this.unitIdxToGeometryCollectionIdx) {
-                const _idx = this.unitIdxToGeometryCollectionIdx[idx];
-                this.map.data[_idx + 1].group.getLayers().forEach(layer => {
-                    this.map.setLayerStyle(layer, { color });
-                });
-            }
-            else {
-                const _idx = this.unitIdxToGeometryIdx[idx];
-                const layer = this.map.getLayerByIdxTuple([0, _idx]);
-                layer && this.map.setLayerStyle(layer, { color });
-            }
-        };
-        this.onMouseOver = (unitIdx) => (e, { feature }) => {
-            const idx = unitIdx !== undefined ? unitIdx : feature.properties.idx;
-            if (idx === undefined) {
-                return;
-            }
-            this._highlightedUnit = idx;
-            this.startHighlight(idx);
-            const id = `${this.props.idSchema.$id}_${this.state.activeIdx}_units_${idx}`;
-            this.highlightedElem = this.props.formContext.utils.getSchemaElementById(id);
-            if (this.highlightedElem) {
-                this.highlightedElem.className += " map-highlight";
-            }
-        };
-        this.onMouseOut = (unitIdx) => (e, { feature }) => {
-            const idx = unitIdx !== undefined ? unitIdx : feature.properties.idx;
-            if (idx === undefined) {
-                return;
-            }
-            this._highlightedUnit = undefined;
-            this.endHighlight(idx);
-            if (this.highlightedElem) {
-                this.highlightedElem.className = this.highlightedElem.className.replace(" map-highlight", "");
-            }
-        };
-        this.onUnitChange = (unitIdx) => (events) => {
-            events.forEach(e => {
-                switch (e.type) {
-                    case "delete":
-                        this.onUnitRemove(e, unitIdx);
-                        break;
-                    case "edit":
-                        this.onUnitEdited(e, unitIdx);
-                        break;
-                }
-            });
-        };
-        this.onUnitRemove = (e, unitIdx) => {
-            if (unitIdx === undefined) { // Isn't a geometry collection (unitIdx stored in feature properties)
-                const idxs = e.idxs.map(idx => this.unitFeatures[idx].properties.idx);
-                const { formData } = this.props;
-                const unitIdxs = idxs;
-                let updateObject = { [this.state.activeIdx]: {
-                        units: unitIdxs.reduce((obj, idx) => {
-                            obj[idx] = {
-                                unitGathering: {
-                                    geometry: {
-                                        $set: utils_2.getDefaultFormState(this.props.schema.items.properties.units.items.properties.unitGathering.properties.geometry)
-                                    }
-                                }
-                            };
-                            return obj;
-                        }, {})
-                    } };
-                this.props.onChange(immutability_helper_1.default(formData, updateObject));
-            }
-            else { // Is a geometry collection.
-                const { idxs } = e;
-                this.props.onChange(immutability_helper_1.default(this.props.formData, {
-                    [this.state.activeIdx]: {
-                        units: {
-                            [unitIdx]: {
-                                unitGathering: {
-                                    geometry: {
-                                        geometries: {
-                                            $splice: idxs.sort().reverse().map(idx => [idx, 1])
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }));
-            }
-        };
-        this.onUnitEdited = ({ features }, unitIdx) => {
-            if (unitIdx === undefined) { // Isn't a geometry collection (unitIdx stored in feature properties)
-                const unitEditGeometries = Object.keys(features).reduce((unitEditGeometries, idx) => {
-                    unitEditGeometries[features[idx].properties.idx] = features[idx].geometry;
-                    return unitEditGeometries;
-                }, {});
-                const updateObject = {
-                    [this.state.activeIdx]: {
-                        units: Object.keys(unitEditGeometries).reduce((o, i) => {
-                            o[i] = { unitGathering: { geometry: { $set: unitEditGeometries[i] } } };
-                            return o;
-                        }, {})
-                    }
-                };
-                this.props.onChange(immutability_helper_1.default(this.props.formData, updateObject));
-            }
-            else { // Is a geometry collection.
-                this.props.onChange(immutability_helper_1.default(this.props.formData, {
-                    [this.state.activeIdx]: {
-                        units: {
-                            [unitIdx]: {
-                                unitGathering: {
-                                    geometry: { $set: Object.keys(features).reduce((geometryCollection, idx) => {
-                                            const feature = features[idx];
-                                            geometryCollection.geometries[idx] = feature.geometry;
-                                            return geometryCollection;
-                                        }, this.props.formData[this.state.activeIdx].units[unitIdx].unitGathering.geometry)
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }));
-            }
-        };
-        this.onMapChangeCreateGathering = DefaultMapArrayField.prototype.onMapChangeCreateGathering.bind(this);
-        this.onChange = DefaultMapArrayField.prototype.onChange.bind(this);
-        this.onAdd = DefaultMapArrayField.prototype.onAdd.bind(this);
-        this.onRemove = DefaultMapArrayField.prototype.onRemove.bind(this);
-        this.onEdited = DefaultMapArrayField.prototype.onEdited.bind(this);
-        this.onInsert = DefaultMapArrayField.prototype.onInsert.bind(this);
-        this.afterActiveChange = DefaultMapArrayField.prototype.afterActiveChange.bind(this);
-        this.getGeometry = DefaultMapArrayField.prototype.getGeometry.bind(this);
-    }
-    componentDidMount() {
-        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "startHighlight", this.startHighlight);
-        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "endHighlight", this.endHighlight);
-    }
-    componentWillUnmount() {
-        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "startHighlight", this.startHighlight);
-        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "endHighlight", this.endHighlight);
-    }
-    getData() {
-        const { formData } = this.props;
-        const idx = this.state.activeIdx;
-        if (!formData)
-            return {};
-        const item = formData[idx];
-        const gatherings = DefaultMapArrayField.prototype.getData.call(this);
-        const units = ((item && item.units) ? item.units : []).reduce((units, unit, idx) => {
-            if (unit.unitGathering) {
-                const { unitGathering: { geometry } } = unit;
-                if (geometry && utils_2.hasData(geometry)) {
-                    units[idx] = geometry;
-                }
-            }
-            return units;
-        }, []);
-        return { gatherings, units };
-    }
-    getGeometries() {
-        const { gatherings, units } = this.getData();
-        return [
-            ...parseGeometries(gatherings),
-            ...parseGeometries(units)
-        ];
-    }
-    parsePopupPointer(col, options) {
-        return col.replace("[idx]", options.feature.properties.idx);
-    }
-};
-UnitsMapArrayField = __decorate([
-    _MapArrayField
-], UnitsMapArrayField);
-let LineTransectMapArrayField = class LineTransectMapArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onLineCreate = ([event]) => {
-            this.props.onChange(ArrayField_1.onArrayFieldChange(immutability_helper_1.default(this.props.formData, { 0: { geometry: { $set: event.feature.geometry
-                    } } }), this.props));
-        };
-        this.onChange = (events) => {
-            const { geometryField } = utils_2.getUiOptions(this.props.uiSchema);
-            let state = {};
-            let { formData } = this.props;
-            let formDataChanged = false;
-            let addOrDelete = false;
-            events.forEach(e => {
-                switch (e.type) {
-                    case "insert": {
-                        formDataChanged = true;
-                        addOrDelete = true;
-                        const newItem = utils_2.getDefaultFormState(this.props.schema.items);
-                        newItem[geometryField] = e.geometry;
-                        formData = immutability_helper_1.default(formData, {
-                            $splice: [[e.idx, 0, newItem]]
-                        });
-                        break;
-                    }
-                    case "edit": {
-                        formDataChanged = true;
-                        formData = immutability_helper_1.default(formData, {
-                            [e.idx]: {
-                                [geometryField]: { $set: e.geometry }
-                            }
-                        });
-                        break;
-                    }
-                    case "delete": {
-                        formDataChanged = true;
-                        addOrDelete = true;
-                        formData = immutability_helper_1.default(formData, { $splice: [[e.idx, 1]] });
-                        break;
-                    }
-                    case "merge": {
-                        formDataChanged = true;
-                        addOrDelete = true;
-                        const [first, second] = e.idxs;
-                        formData = immutability_helper_1.default(formData, { [first]: { units: { $set: [
-                                        ...(formData[first].units || []),
-                                        ...(formData[second].units || [])
-                                    ] } } });
-                        formData = immutability_helper_1.default(formData, {
-                            [first]: {
-                                [geometryField]: { $set: e.geometry }
-                            }
-                        });
-                        formData = immutability_helper_1.default(formData, { $splice: [[second, 1]] });
-                        break;
-                    }
-                    case "move": {
-                        formDataChanged = true;
-                        const { idx, target } = e;
-                        let splices = [
-                            [idx, 1],
-                            [target, 0, formData[idx]],
-                        ];
-                        // Splices must be executed in reverse order to keep idxs correct.
-                        if (target > idx)
-                            splices = splices.reverse();
-                        formData = immutability_helper_1.default(formData, { $splice: splices });
-                        break;
-                    }
-                    case "active": {
-                        state.activeIdx = e.idx;
-                    }
-                }
-            });
-            const afterState = () => {
-                if (formDataChanged) {
-                    this.props.onChange(addOrDelete ? ArrayField_1.onArrayFieldChange(formData, this.props) : formData);
-                }
-                if ("activeIdx" in state) {
-                    this.afterActiveChange(state.activeIdx);
-                }
-            };
-            Object.keys(state).length ? this.setState(state, afterState()) : afterState();
-        };
-        this.getFeatureStyle = ({ lineIdx, style, type }) => {
-            if (this.props.errorSchema[lineIdx]) {
-                return (type === L.CircleMarker) // eslint-disable-line no-undef
-                    ? style
-                    : Object.assign(Object.assign({}, style), { fillColor: "#f33" });
-            }
-            const { gatheringFact = {} } = this.props.formData[lineIdx] || {};
-            const { lineTransectSegmentCounted } = gatheringFact;
-            if (!lineTransectSegmentCounted) {
-                return Object.assign(Object.assign({}, style), { fillColor: "#444444" });
-            }
-        };
-        this.getTooltip = (lineIdx, content) => {
-            const { translations } = this.props.formContext;
-            if (this.props.errorSchema[lineIdx]) {
-                content = `${content}<br/><span class="text-danger">${translations.LineTransectSegmentHasErrors}!</span>`;
-            }
-            const { gatheringFact = {} } = this.props.formData[lineIdx];
-            const { lineTransectSegmentCounted } = gatheringFact;
-            if (!lineTransectSegmentCounted)
-                content = `${content}<br/>${translations.LineTransectSegmentNotCounted}`;
-            return content;
-        };
-        this.focusOnMap = (idx) => {
-            if (!this.hasLineTransectFeature(this.props)) {
-                setTimeout(() => this.map.zoomToData({ paddingInMeters: 200 }));
-                return;
-            }
-            this.props.formContext.setTimeout(() => {
-                this.map && this.map.fitBounds(L.featureGroup(this.map._corridorLayers[idx]).getBounds(), { paddingInMeters: 100 }); // eslint-disable-line no-undef
-            });
-        };
-        this.state = { showLTTools: false };
-    }
-    getOptions() {
-        const { formData, disabled, readonly } = this.props;
-        const { geometryField, placeholderGeometry } = utils_2.getUiOptions(this.props.uiSchema);
-        const lineTransect = this.hasLineTransectFeature(this.props)
-            ? { type: "MultiLineString", coordinates: formData.map(item => item[geometryField].coordinates) }
-            : undefined;
-        return {
-            lineTransect: lineTransect ? {
-                feature: { geometry: lineTransect },
-                activeIdx: this.state.activeIdx,
-                onChange: this.onChange,
-                getFeatureStyle: this.getFeatureStyle,
-                getTooltip: this.getTooltip,
-                editable: !disabled && !readonly
-            } : undefined,
-            draw: lineTransect ? false : {
-                line: true,
-                marker: false,
-                circle: false,
-                rectangle: false,
-                polygon: false,
-                onChange: this.onLineCreate
-            },
-            data: lineTransect || !placeholderGeometry ? false : {
-                geoData: placeholderGeometry,
-                getFeatureStyle: this._getPlaceholderStyle
-            },
-            controls: {
-                lineTransect: {
-                    split: true,
-                    splitByMeters: this.state.showLTTools,
-                    createPoint: this.state.showLTTools,
-                    shiftPoint: this.state.showLTTools,
-                    deletePoints: this.state.showLTTools,
-                    undo: this.state.showLTTools,
-                    redo: this.state.showLTTools
-                },
-                draw: {
-                    undo: false,
-                    redo: false
-                }
-            },
-            customControls: [{
-                    iconCls: `glyphicon glyphicon-${this.state.showLTTools ? "menu-up" : "option-vertical"}`,
-                    fn: () => {
-                        this.setState({ showLTTools: !this.state.showLTTools });
-                    },
-                    text: this.props.formContext.translations[this.state.showLTTools ? "HideLineTransectControls" : "ShowLineTransectControls"],
-                    group: "lineTransect"
-                }]
-        };
-    }
-    afterActiveChange(idx) {
-        this.focusOnMap(idx);
-    }
-    hasLineTransectFeature(props) {
-        const { geometryField } = utils_2.getUiOptions(props.uiSchema);
-        return props.formData && props.formData[0] && Object.keys(props.formData[0][geometryField] || {}).length;
-    }
-    componentDidUpdate(prevProps) {
-        if (!this.hasLineTransectFeature(prevProps) || !this.hasLineTransectFeature(this.props))
-            return;
-        for (let lineIdx = 0; lineIdx < this.props.formData.length; lineIdx++) {
-            this.map._updateLTStyleForLineIdx(lineIdx);
-        }
-    }
-};
-LineTransectMapArrayField.contextType = ReactContext_1.default;
-LineTransectMapArrayField = __decorate([
-    _MapArrayField
-], LineTransectMapArrayField);
-let LolifeMapArrayField = class LolifeMapArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onChangeForGathering = (idx) => (events) => {
-            let formData = this.getGatherings ? this.getGatherings() : this.props.formData;
-            events.forEach(e => {
-                switch (e.type) {
-                    case "edit":
-                        formData = immutability_helper_1.default(formData, formData[idx].geometry.type === "GeometryCollection"
-                            ? Object.keys(e.features).reduce((updates, _idx) => (Object.assign(Object.assign({}, updates), { [idx]: { geometry: { geometries: { [_idx]: { $set: e.features[_idx].geometry } } } } })), {})
-                            : { [idx]: { geometry: { $set: e.features[0].geometry } } });
-                        break;
-                    case "create":
-                        formData = immutability_helper_1.default(formData, { [idx]: { geometry: { $set: e.feature.geometry } } });
-                        break;
-                    case "delete":
-                        if (formData[idx].geometry.type === "GeometryCollection") {
-                            let splices = [];
-                            e.idxs.sort().reverse().forEach((idx) => {
-                                splices.push([idx, 1]);
-                            });
-                            formData = immutability_helper_1.default(formData, { [idx]: { geometry: { geometries: { $splice: splices } } } });
-                        }
-                        else {
-                            formData = immutability_helper_1.default(formData, { [idx]: { geometry: { $set: undefined } } });
-                        }
-                        break;
-                }
-            });
-            this.props.onChange(formData);
-        };
-        this.onChangeForUnits = (events) => {
-            let formData = this.props.formData[0].units;
-            events.forEach(e => {
-                switch (e.type) {
-                    case "edit":
-                        formData = utils_2.updateSafelyWithJSONPointer(formData, e.features[0].geometry, `/${e.features[0].properties.idx}/unitGathering/geometry`);
-                        break;
-                    case "create":
-                        throw new Error("Lolife map shouldn't me able to send create for unit");
-                    case "delete":
-                        formData = utils_2.updateSafelyWithJSONPointer(formData, undefined, `/${e.features[0].properties.idx}/unitGathering/geometry`);
-                        break;
-                }
-            });
-            this.props.onChange(utils_2.updateSafelyWithJSONPointer(this.props.formData, formData, "/0/units"));
-        };
-        this.getFeatureStyle = ({ feature }, highlight) => {
-            if (!feature) {
-                return {};
-            }
-            const namedPlaceStyle = { color: "#777777", fillOpacity: 0.2, weight: 6 };
-            const foragingStyle = { color: "#FFCD38" };
-            const breedingAndRestingStyle = { color: "#a9d18e" };
-            const accessStyle = { color: "#F489A7" };
-            const coreZoneStyle = { color: "#F2764D" };
-            const habitatZoneStyle = { color: "#937D32" };
-            const applicableZoneStyle = { color: "#8EC0D1" };
-            let idx = undefined;
-            const gathering = this.props.formData.find((item, _idx) => {
-                idx = _idx;
-                return utils_2.getUUID(item) === feature.properties.id;
-            });
-            if (!gathering) {
-                return {};
-            }
-            let style;
-            const { gatheringType } = gathering;
-            switch (gatheringType) {
-                case "MY.gatheringTypeForagingArea":
-                    style = foragingStyle;
-                    break;
-                case "MY.gatheringTypeBreedingAndRestingArea":
-                    style = breedingAndRestingStyle;
-                    break;
-                case "MY.gatheringTypeLolifeAccess":
-                    style = accessStyle;
-                    break;
-                case "MY.gatheringTypeLolifeCoreZone":
-                    style = coreZoneStyle;
-                    break;
-                case "MY.gatheringTypeLolifeHabitatZone":
-                    style = habitatZoneStyle;
-                    break;
-                case "MY.gatheringTypeLolifeApplicableZone":
-                    style = applicableZoneStyle;
-                    break;
-                default:
-                    style = namedPlaceStyle;
-            }
-            const { activeIdx } = this.state;
-            if (highlight || activeIdx !== undefined) {
-                if (idx !== activeIdx) {
-                    return exports.getFeatureStyleWithLowerOpacity(style);
-                }
-                return exports.getFeatureStyleWithHighlight(style);
-            }
-            return style;
-        };
-        this.getUnitFeatureStyle = ({ feature }) => {
-            const droppingsTreeStyle = { color: "#b89220" };
-            const nestTreeStyle = { color: "#9e713b" };
-            const observationStyle = { color: globals_1.NORMAL_COLOR };
-            const unit = this.props.formData[0].units.find((item) => utils_2.getUUID(item) === feature.properties.id);
-            if (!unit) {
-                return {};
-            }
-            const { nestType, indirectObservationType } = unit;
-            let style = observationStyle;
-            if (nestType) {
-                style = nestTreeStyle;
-            }
-            else if (indirectObservationType) {
-                style = droppingsTreeStyle;
-            }
-            const { activeIdx } = this.state;
-            if (activeIdx !== undefined) {
-                return exports.getFeatureStyleWithLowerOpacity(style);
-            }
-            return style;
-        };
-        this.startHighlight = ({ id }) => {
-            let mapIdx = this.map.data.findIndex(d => ((d.featureCollection.features[0] || {}).properties || {}).id === id);
-            let style = this.map.data[mapIdx].getFeatureStyle({ dataIdx: mapIdx, feature: this.map.data[mapIdx].featureCollection.features[0] });
-            if (!style.color) {
-                return;
-            }
-            const color = utils_1.combineColors(style.color, "#ffffff", 150);
-            const layer = this.map.getLayerByIdxTuple([mapIdx, 0]);
-            layer && this.map.setLayerStyle(layer, Object.assign(Object.assign({}, style), { color, fillColor: color }));
-        };
-        this.endHighlight = ({ id }) => {
-            let mapIdx = this.map.data.findIndex(d => ((d.featureCollection.features[0] || {}).properties || {}).id === id);
-            const style = this.map.data[mapIdx].getFeatureStyle({ dataIdx: mapIdx, feature: this.map.data[mapIdx].featureCollection.features[0] });
-            if (!style) {
-                return;
-            }
-            if (!style.fillOpacity) {
-                style.fillOpacity = 0.4; // LajiMap default fill opacity.
-            }
-            const layer = this.map.getLayerByIdxTuple([mapIdx, 0]);
-            layer && this.map.setLayerStyle(layer, style);
-        };
-        this.onClick = (e, { feature }) => {
-            const { idx, unit } = feature.properties;
-            if (!unit && !idx) {
-                return;
-            }
-            const { topOffset, bottomOffset } = this.props.formContext;
-            if (!unit) {
-                this.setState({ activeIdx: idx });
-            }
-            const elem = this.getHighlightElem(idx, unit);
-            utils_2.scrollIntoViewIfNeeded(elem, topOffset, bottomOffset);
-            utils_2.highlightElem(elem);
-        };
-        this.onMouseOver = this.onMouseOver.bind(this);
-        this.onMouseOut = this.onMouseOut.bind(this);
-        this.startHighlight = this.startHighlight.bind(this);
-        this.endHighlight = this.endHighlight.bind(this);
-        this.onChanges = {};
-    }
-    componentDidMount() {
-        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "startHighlight", this.startHighlight);
-        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "endHighlight", this.endHighlight);
-    }
-    componentWillUnmount() {
-        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "startHighlight", this.startHighlight);
-        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "endHighlight", this.endHighlight);
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (this.highlightedElem && prevState.activeIdx !== this.state.activeIdx) {
-            this.highlightedElem.className = this.highlightedElem.className.replace(" map-highlight", "");
-        }
-    }
-    getOptions() {
-        const data = this.getData();
-        return {
-            draw: this.getDraw(),
-            data,
-            controls: {
-                draw: {
-                    undo: false,
-                    redo: false
-                }
-            }
-        };
-    }
-    getDraftStyle() {
-        return this.getFeatureStyle({ feature: { properties: { id: utils_2.getUUID(this.props.formData[this.state.activeIdx]) } } }, !!"higlight");
-    }
-    getDraw() {
-        const active = this.props.formData[this.state.activeIdx];
-        if (!active) {
-            return false;
-        }
-        return {
-            geoData: this.getFeatureCollection(active, { idx: this.state.activeIdx }),
-            onChange: this.getOnChangeForIdx(this.state.activeIdx),
-            getFeatureStyle: this.getFeatureStyle,
-            getDraftStyle: this.getDraftStyle,
-            marker: false,
-            on: {
-                mouseover: this.onMouseOver,
-                mouseout: this.onMouseOut,
-            },
-        };
-    }
-    getOnChangeForIdx(idx) {
-        // Store so change detection doesn't think it's a new function.
-        const onChangeForIdx = this.onChanges[idx] || this.onChangeForGathering(idx);
-        this.onChanges[idx] = onChangeForIdx;
-        return onChangeForIdx;
-    }
-    getFeatureCollection(geometryContainer, properties = {}, geometryField = "/geometry") {
-        return { type: "FeatureCollection", features: parseGeometries(utils_2.parseJSONPointer(geometryContainer, geometryField)).map(g => ({ type: "Feature", properties: Object.assign({ id: utils_2.getUUID(geometryContainer) }, properties), geometry: g })) };
-    }
-    getData() {
-        return this._getData(this.props.formData);
-    }
-    _getData(formData) {
-        let gatherings = (formData || []).map((gathering, idx) => ({
-            featureCollection: this.getFeatureCollection(gathering, { idx }),
-            getFeatureStyle: this.getFeatureStyle,
-            on: {
-                mouseover: this.onMouseOver,
-                mouseout: this.onMouseOut,
-                click: this.onClick
-            },
-            onChange: idx && this.getOnChangeForIdx(idx),
-            editable: !!idx,
-            getPopup: idx && this.getPopup
-        }));
-        const { activeIdx } = this.state;
-        if (activeIdx !== undefined) {
-            gatherings.splice(activeIdx, 1);
-        }
-        const units = (formData[0].units || []).map((unit, idx) => ({
-            featureCollection: this.getFeatureCollection(unit, { unit: true, idx }, "/unitGathering/geometry"),
-            editable: true,
-            onChange: this.onChangeForUnits,
-            getFeatureStyle: this.getUnitFeatureStyle,
-            on: {
-                mouseover: this.onMouseOver,
-                mouseout: this.onMouseOut,
-                click: this.onClick
-            },
-            getPopup: this.getPopup
-        })).filter(item => item.featureCollection.features.length);
-        return [...gatherings, ...units];
-    }
-    getGeometries() {
-        return this._getGeometries(this.getData());
-    }
-    _getGeometries(data) {
-        return data.reduce((geometries, { featureCollection }) => [
-            ...geometries,
-            ...featureCollection.features.map(f => f.geometry)
-        ], []);
-    }
-    cavityTreeStyle() { return { color: "#9e713b" }; }
-    droppingsTreeStyle() { return { color: "#b89220" }; }
-    nestTreeStyle() { return { color: "#ff0000" }; }
-    observationStyle() { return { color: globals_1.NORMAL_COLOR }; }
-    getHighlightElem(idx, unit) {
-        if (unit) {
-            return this.props.formContext.utils.getSchemaElementById(`${this.props.idSchema.$id}_0_units_${idx}`);
-        }
-        else {
-            return document.getElementById(`${this.props.idSchema.$id}_${idx}-panel`);
-        }
-    }
-    onMouseOver(e, { feature }) {
-        const { idx, unit } = feature.properties;
-        if (!unit && !idx) {
-            return;
-        }
-        this.highlightedElem = this.getHighlightElem(idx, unit);
-        if (this.highlightedElem) {
-            this.highlightedElem.className += " map-highlight";
-        }
-    }
-    onMouseOut(e, { feature }) {
-        const { idx, unit } = feature.properties;
-        if (!unit && !idx) {
-            return;
-        }
-        this.highlightedElem = this.getHighlightElem(idx, unit);
-        if (this.highlightedElem) {
-            this.highlightedElem.className = this.highlightedElem.className.replace(" map-highlight", "");
-        }
-    }
-    getFormDataForPopup({ feature }) {
-        if (feature.properties.unit) {
-            return this.props.formData[0].units.find(item => utils_2.getUUID(item) === feature.properties.id);
-        }
-        return this.props.formData.find(item => utils_2.getUUID(item) === feature.properties.id);
-    }
-};
-LolifeMapArrayField = __decorate([
-    _MapArrayField
-], LolifeMapArrayField);
-function _MapArrayField(ComposedComponent) {
-    class _MapArrayField extends ComposedComponent {
-        constructor(props) {
-            super(props);
-            this.geocode = () => {
-                // Zoom map to area. Area ID is accessed from schema field defined in options.areaField
-                const item = (this.props.formData || [])[this.state.activeIdx];
-                const { areaField } = utils_2.getUiOptions(this.props.uiSchema);
-                if (!item || !areaField) {
-                    return;
-                }
-                let area = item[areaField];
-                if (area instanceof Array) {
-                    area = area[0];
-                }
-                const geometries = this.getGeometries();
-                if (geometries.length === 0 && area && area.length > 0) {
-                    this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
-                        this.map.geocode(result.name, undefined, 8);
-                    });
-                }
-            };
-            this.computeArea = () => {
-                const { activeIdx } = this.state;
-                if (activeIdx === undefined)
-                    return;
-                let { computeAreaField, areaInHectares } = utils_2.getUiOptions(this.props.uiSchema);
-                const { formData } = this.props;
-                if (!computeAreaField)
-                    return;
-                const geometries = this.getGeometries();
-                const polygonsArea = geometries
-                    .filter(({ type }) => type === "Polygon")
-                    .map(({ coordinates }) => coordinates[0].slice(1).map(c => L.latLng(c.slice(0).reverse())))
-                    .reduce((area, latLngs) => area + L.GeometryUtil.geodesicArea(latLngs), 0);
-                const circlesArea = geometries
-                    .filter(({ type, radius }) => type === "Point" && radius)
-                    .reduce((_area, { radius }) => _area + (Math.PI) * (radius * radius), 0);
-                const sumArea = polygonsArea + circlesArea;
-                const area = sumArea === 0
-                    ? undefined
-                    : Math.round(areaInHectares ? sumArea / 10000 : sumArea);
-                const currentArea = utils_2.parseJSONPointer(formData[activeIdx], computeAreaField, true);
-                currentArea !== area && this.props.onChange(utils_2.updateSafelyWithJSONPointer(formData, area, `/${activeIdx}/${computeAreaField}`));
-            };
-            this.getContainer = () => react_dom_1.findDOMNode(this.refs._stretch);
-            this.onResize = () => this.refs.map.map.map.invalidateSize({ debounceMoveend: true });
-            this.onPopupClose = () => {
-                // Move popup content back to the React container so React won't crash.
-                if (this.refs.popupContainer && this.refs.popup.refs.popup) {
-                    react_dom_1.findDOMNode(this.refs.popupContainer).appendChild(this.refs.popup.refs.popup);
-                }
-                this.setState({ popupIdx: undefined });
-            };
-            this.onFocusGrab = () => this.setState({ focusGrabbed: true });
-            this.onFocusRelease = () => this.setState({ focusGrabbed: false });
-            this.onOptionsChanged = (options) => this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), options) }, () => {
-                if (this._tileLayerNameOnNextTickCallback) {
-                    this._tileLayerNameOnNextTickCallback();
-                    this._tileLayerNameOnNextTickCallback = undefined;
-                }
-            });
-            this.getAlignmentAnchor = () => this.refs._stretch;
-            this.onEnterViewPort = () => {
-                this.afterActiveChange(this.state.activeIdx, !!"initial call");
-            };
-            this.getMapOptions = () => {
-                const options = utils_2.getUiOptions(this.props.uiSchema);
-                let _options = merge.all([
-                    { clickBeforeZoomAndPan: true },
-                    (options.mapOptions || {}),
-                    (this.getOptions(options) || {}),
-                    (this.state.mapOptions || {})
-                ]);
-                const changes = {};
-                if (options.createOnLocate && !_options.locate) {
-                    changes.locate = [this.onLocate];
-                }
-                const { readonly, disabled } = this.props;
-                if (readonly || disabled) {
-                    if (utils_2.isObject(_options.draw)) {
-                        changes.draw = Object.assign(Object.assign({}, _options.draw), { editable: false });
-                    }
-                    if (_options.data) {
-                        if (_options.data instanceof Array) {
-                            changes.data = _options.data.map(d => (Object.assign(Object.assign({}, d), { editable: false })));
-                        }
-                        else if (utils_2.isObject(_options.data)) {
-                            changes.data = Object.assign(Object.assign({}, _options.data), { editable: false });
-                        }
-                    }
-                }
-                if (Object.keys(changes).length) {
-                    _options = Object.assign(Object.assign({}, _options), changes);
-                }
-                return _options;
-            };
-            this.onActiveChange = (idx, prop, callback) => {
-                this.nestedHandledActiveChange = true;
-                this.setState({ activeIdx: idx }, () => {
-                    if (!callback)
-                        return;
-                    callback();
-                });
-            };
-            this.customAdd = () => () => {
-                const nextActive = this.props.formData.length;
-                this.props.onChange(ArrayField_1.onArrayFieldChange([...this.props.formData, utils_2.getDefaultFormState(this.props.schema.items)], this.props));
-                this.setState({ activeIdx: nextActive });
-            };
-            this.mapKeyFunctions = {
-                splitLineTransectByMeters: () => {
-                    this.map.splitLTByMeters(this.state.activeIdx);
-                }
-            };
-            this.getPopup = (options, openPopupCallback) => {
-                if (!this.refs.popup)
-                    return;
-                this.setState({ popupIdx: this.filterPopupOptions(options) }, () => {
-                    this.refs.popup && utils_2.hasData(this.getPopupData(options)) && openPopupCallback(this.refs.popup.refs.popup);
-                });
-            };
-            this.popupStrategies = {
-                lolifeUnit: (formData) => {
-                    const { nestType, indirectObservationType, identifications } = formData;
-                    if (nestType) {
-                        return { value: this.props.formContext.translations.NestObservation };
-                    }
-                    else if (indirectObservationType) {
-                        return { value: this.props.formContext.translations.TraceObservation };
-                    }
-                    else if (identifications) {
-                        return { value: this.props.formContext.translations.Observation };
-                    }
-                }
-            };
-            this.getFeaturePopupData = (options) => {
-                if (!options)
-                    return [];
-                const { popupFields } = utils_2.getUiOptions(this.props.uiSchema);
-                const formData = this.getFormDataForPopup(options);
-                let data = [];
-                popupFields.forEach(({ field: col, template, value: _value, title: _title, if: _if, strategy }) => {
-                    let value, title;
-                    if (strategy) {
-                        const strategyResult = this.popupStrategies[strategy](formData);
-                        if (strategyResult) {
-                            value = strategyResult.value;
-                            title = strategyResult.title;
-                        }
-                    }
-                    else if (_value) {
-                        value = _value;
-                        title = _title;
-                    }
-                    else if (col) {
-                        if (this.parsePopupPointer) {
-                            col = this.parsePopupPointer(col, options);
-                        }
-                        const _formData = utils_2.parseJSONPointer(formData, col);
-                        const schema = utils_2.parseSchemaFromFormDataPointer(this.props.schema.items || this.props.schema, col);
-                        const uiSchema = utils_2.parseUiSchemaFromFormDataPointer(this.props.uiSchema.items || this.props.uiSchema, col);
-                        title = schema.title;
-                        value = utils_2.formatValue(Object.assign(Object.assign({}, this.props), { formData: _formData, schema, uiSchema }));
-                    }
-                    if (!utils_2.isEmptyString(value)) {
-                        let result;
-                        if (_if) {
-                            result = ["dataIdx", "featureIdx"].every(opt => !(opt in _if) || options[opt] === _if[opt]);
-                            if (_if.reverse) {
-                                result = !result;
-                            }
-                        }
-                        if (!_if || result) {
-                            data.push({ title, template, value });
-                        }
-                    }
-                });
-                return data;
-            };
-            this.onLocate = (latlng, radius) => {
-                this.location = latlng ? { latlng, radius } : undefined;
-                this.onLocateOrAddNew();
-            };
-            this.onLocateOrAddNew = () => {
-                if (!this.location)
-                    return;
-                const { latlng, radius } = this.location;
-                const { createOnLocate } = utils_2.getUiOptions(this.props.uiSchema);
-                if (!createOnLocate)
-                    return;
-                const geometry = this.getGeometry(this.props.formData);
-                if (this.props.formData.length === 0 || (!geometry || !Object.keys(geometry).length)) {
-                    let geometry = undefined;
-                    if (createOnLocate === "marker") {
-                        geometry = { type: "Point", coordinates: [latlng.lng, latlng.lat] };
-                    }
-                    if (createOnLocate === "circle") {
-                        geometry = { type: "Point", coordinates: [latlng.lng, latlng.lat], radius };
-                    }
-                    this.map.addFeatureToDraw({
-                        type: "Feature",
-                        properties: {},
-                        geometry
-                    });
-                }
-            };
-            this.props.formContext.services.settings.bind(this, props);
-            this._context = Context_1.default(`${props.formContext.contextId}_MAP_CONTAINER`);
-            this._context.featureIdxsToItemIdxs = {};
-            this._context.setState = (state, callback) => this.setState(state, callback);
-            const initialState = Object.assign(Object.assign({}, (this.state || {})), { activeIdx: (this.props.formData || []).length === 1 ? 0 : undefined });
-            const options = utils_2.getUiOptions(props.uiSchema);
-            if ((this.props.formData || []).length && "activeIdx" in options)
-                initialState.activeIdx = options.activeIdx;
-            this.state = Object.assign(Object.assign({}, initialState), (this.state || {}));
-            this.getDraftStyle = this.getDraftStyle.bind(this);
-        }
-        componentDidMount() {
-            if (super.componentDidMount)
-                super.componentDidMount();
-            this.setState({ mounted: true });
-            this.props.formContext.services.keyHandler.addKeyHandler(`${this.props.idSchema.$id}`, this.mapKeyFunctions);
-            this.map = this.refs.map.refs.map.map;
-            this._setActiveEventHandler = idx => {
-                this.setState({ activeIdx: idx });
-            };
-            this._zoomToDataEventHandler = () => {
-                this._zoomToDataOnNextTick = true;
-            };
-            this._tileLayersEventHandler = (tileLayerOptions, callback) => {
-                this._tileLayerNameOnNextTick = tileLayerOptions;
-                this._tileLayerNameOnNextTickCallback = callback;
-            };
-            this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "activeIdx", this._setActiveEventHandler);
-            this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "zoomToData", this._zoomToDataEventHandler);
-            this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "tileLayers", this._tileLayersEventHandler);
-            if (this.state.activeIdx !== undefined) {
-                this.afterActiveChange(this.state.activeIdx, !!"initial call");
-            }
-        }
-        afterActiveChange(idx) {
-            super.afterActiveChange && super.afterActiveChange(idx);
-            this.onLocateOrAddNew();
-        }
-        componentWillUnmount() {
-            this.setState({ mounted: false });
-            this.props.formContext.services.keyHandler.removeKeyHandler(`${this.props.idSchema.$id}`, this.mapKeyFunctions);
-            this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "activeIdx", this._setActiveEventHandler);
-            this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "zoomToData", this._zoomToDataEventHandler);
-            this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "tileLayers", this._tileLayersEventHandler);
-        }
-        componentDidUpdate(...params) {
-            if (super.componentDidUpdate)
-                super.componentDidUpdate(...params);
-            const [prevProps, prevState] = params; // eslint-disable-line no-unused-vars
-            if (prevState.activeIdx !== this.state.activeIdx) {
-                if (!this.nestedHandledActiveChange && this.state.activeIdx !== undefined) {
-                    const { idToFocusAfterNavigate, idToScrollAfterNavigate } = utils_2.getUiOptions(this.props.uiSchema);
-                    this.props.formContext.utils.focusAndScroll(idToFocusAfterNavigate || `${this.props.idSchema.$id}_${this.state.activeIdx}`, idToScrollAfterNavigate);
-                }
-                this.nestedHandledActiveChange = false;
-                this.afterActiveChange(this.state.activeIdx);
-            }
-            if (this.refs.stretch) {
-                const { resizeTimeout } = utils_2.getUiOptions(this.props.uiSchema);
-                if (resizeTimeout) {
-                    this.props.formContext.setTimeout(this.refs.stretch.update, resizeTimeout);
-                }
-                else {
-                    this.refs.stretch.update();
-                }
-            }
-            if (this._zoomToDataOnNextTick) {
-                this._zoomToDataOnNextTick = false;
-                this.map.zoomToData();
-            }
-            if (this._tileLayerNameOnNextTick) {
-                const tileLayerName = this._tileLayerNameOnNextTick;
-                this._tileLayerNameOnNextTick = false;
-                this.map.setTileLayerByName(tileLayerName);
-            }
-            this.computeArea(prevProps);
-        }
-        _getPlaceholderStyle() {
-            return {
-                color: "#999999",
-                fillOpacity: 0,
-                weight: 8
-            };
-        }
-        getSchemas() {
-            if (super.getSchemas)
-                return super.getSchemas();
-            return this.props;
-        }
-        render() {
-            const { registry: { fields: { SchemaField } } } = this.props;
-            let { uiSchema, errorSchema, schema } = this.getSchemas();
-            const options = utils_2.getUiOptions(this.props.uiSchema);
-            const { popupFields, geometryField, topOffset, bottomOffset, belowFields, propsToPassToInlineSchema = [], emptyHelp, passActiveIdxToBelow = true } = options;
-            let { belowUiSchemaRoot = {}, inlineUiSchemaRoot = {}, idToFocusAfterNavigate, idToScrollAfterNavigate } = options;
-            const { activeIdx } = this.state;
-            const activeIdxProps = {
-                activeIdx,
-                onActiveChange: this.onActiveChange,
-                idToFocusAfterNavigate,
-                idToScrollAfterNavigate
-            };
-            uiSchema = utils_2.getInnerUiSchema(uiSchema);
-            if (utils_2.getUiOptions(this.props.uiSchema).buttons) {
-                uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:options": Object.assign(Object.assign({}, uiSchema["ui:options"]), { buttons: [...(uiSchema["ui:options"].buttons || []), ...utils_2.getUiOptions(this.props.uiSchema).buttons] }) });
-            }
-            let mapOptions = this.getMapOptions();
-            const mapSizes = options.mapSizes || utils_2.getBootstrapCols(6);
-            const schemaSizes = ["lg", "md", "sm", "xs"].reduce((sizes, size) => {
-                sizes[size] = 12 - mapSizes[size] || 12;
-                return sizes;
-            }, {});
-            const getChildProps = () => {
-                return {
-                    schema: schema.items,
-                    uiSchema: uiSchema.items || {},
-                    idSchema: this.props.registry.schemaUtils.toIdSchema(schema.items, `${this.props.idSchema.$id}_${activeIdx}`),
-                    formData: (this.props.formData || [])[activeIdx],
-                    errorSchema: this.props.errorSchema[activeIdx] || {}
-                };
-            };
-            const putChildsToParents = (props, key) => {
-                if (!this.onChangeFor) {
-                    this.onChangeFor = {};
-                }
-                if (!this.onChangeFor[key]) {
-                    this.onChangeFor[key] = formData => {
-                        this.props.onChange(formData.map((item, idx) => {
-                            return Object.assign(Object.assign({}, (this.props.formData[idx] || utils_2.getDefaultFormState(this.props.schema.items))), item);
-                        }));
-                    };
-                }
-                return Object.assign(Object.assign({}, this.props), { schema: Object.assign(Object.assign({}, schema), { items: props.schema }), uiSchema: Object.assign(Object.assign({}, uiSchema), { items: props.uiSchema }), onChange: this.onChangeFor[key] });
-            };
-            const defaultProps = Object.assign(Object.assign({}, this.props), { schema, uiSchema });
-            const overrideProps = propsToPassToInlineSchema.reduce((_props, field) => {
-                _props[field] = this.props[field];
-                return _props;
-            }, {});
-            const childProps = getChildProps();
-            const inlineSchemaProps = putChildsToParents(NestField_1.getPropsForFields(childProps, Object.keys(schema.items.properties).filter(field => !(belowFields || []).includes(field))));
-            const belowSchemaProps = belowFields ? putChildsToParents(NestField_1.getPropsForFields(childProps, belowFields)) : null;
-            const inlineItemsUiSchema = Object.assign(Object.assign({}, uiSchema.items), inlineSchemaProps.uiSchema.items);
-            let inlineUiSchema = Object.assign({}, inlineSchemaProps.uiSchema);
-            if (inlineUiSchemaRoot) {
-                inlineUiSchema = Object.assign(Object.assign({}, inlineUiSchema), inlineUiSchemaRoot);
-                inlineUiSchema.items = Object.assign(Object.assign({}, inlineItemsUiSchema), (inlineUiSchemaRoot.items || {}));
-            }
-            else {
-                inlineUiSchema.items = inlineItemsUiSchema;
-            }
-            let belowUiSchema = belowSchemaProps ? Object.assign(Object.assign({}, belowSchemaProps.uiSchema), belowUiSchemaRoot) : {};
-            inlineUiSchema = Object.assign(Object.assign({}, inlineUiSchema), { "ui:options": Object.assign(Object.assign({}, (inlineUiSchema["ui:options"] || {})), activeIdxProps) });
-            belowUiSchema = Object.assign(Object.assign({}, belowUiSchema), { "ui:options": Object.assign(Object.assign({}, (belowUiSchema["ui:options"] || {})), (passActiveIdxToBelow ? activeIdxProps : {})) });
-            if (!belowUiSchema.items) {
-                belowUiSchema.items = {};
-            }
-            if (!belowUiSchema.items["ui:options"]) {
-                belowUiSchema.items["ui:options"] = {};
-            }
-            belowUiSchema.items["ui:options"].reserveId = false;
-            const { buttonsPath, addButtonPath, showErrors = true } = utils_2.getUiOptions(this.props.uiSchema);
-            if (addButtonPath)
-                console.warn("addButtonPath option for MapArrayField is deprecated - use buttonsPath instead!");
-            let _buttonsPath = buttonsPath || addButtonPath;
-            const prependAddButton = (buttons) => {
-                const addButton = buttons.find(({ fn }) => fn === "add");
-                return [
-                    ...buttons.filter(button => button !== addButton),
-                    Object.assign(Object.assign({}, (addButton || {})), { fn: this.customAdd, fnName: "add", glyph: "plus", id: this.props.idSchema.$id })
-                ];
-            };
-            let buttons = undefined;
-            let renderButtonsBelow = false;
-            if ((mapOptions.emptyMode || activeIdx !== undefined) && options.buttons) {
-                if (_buttonsPath) {
-                    buttons = prependAddButton(options.buttons);
-                    belowUiSchema = utils_2.injectButtons(belowUiSchema, buttons, _buttonsPath);
-                    inlineUiSchema["ui:options"].renderAdd = false;
-                }
-                else if (options.renderButtonsBelow) {
-                    buttons = prependAddButton(options.buttons);
-                    inlineUiSchema["ui:options"].renderAdd = false;
-                    renderButtonsBelow = true;
-                }
-                else {
-                    buttons = options.buttons;
-                }
-            }
-            if (activeIdx === undefined || (!_buttonsPath && !renderButtonsBelow)) {
-                inlineUiSchema["ui:options"].buttons = options.buttons || [];
-            }
-            const inlineSchema = React.createElement(SchemaField, Object.assign({}, defaultProps, inlineSchemaProps, { uiSchema: inlineUiSchema }, overrideProps));
-            const belowSchema = belowFields ? React.createElement(SchemaField, Object.assign({}, this.props, belowSchemaProps, { uiSchema: belowUiSchema })) : null;
-            buttons = buttons && (!_buttonsPath || mapOptions.emptyMode)
-                ? buttons.map(button => ArrayFieldTemplate_1.getButton(button, {
-                    canAdd: mapOptions.emptyMode ? (button.fn !== "add" && button.fnName !== "add") : true,
-                    uiSchema: this.props.uiSchema,
-                    idSchema: this.props.idSchema,
-                    formData: this.props.formData,
-                    formContext: this.props.formContext,
-                    disabled: this.props.disabled,
-                    readonly: this.props.readonly,
-                })).filter(button => button)
-                : undefined;
-            const _errors = errorSchema && utils_2.parseJSONPointer(errorSchema[activeIdx] || {}, geometryField);
-            const errors = _errors
-                ? _errors.__errors.map(utils_2.formatErrorMessage)
-                : null;
-            const errorId = geometryField && geometryField[0] === "/" ? geometryField.replace(/\//g, "_") : `_${geometryField}`;
-            const wholeErrorId = `${this.props.idSchema.$id}_${activeIdx}${errorId}`;
-            const mapPropsToPass = Object.assign({ formContext: this.props.formContext, onPopupClose: this.onPopupClose, markerPopupOffset: 45, featurePopupOffset: 5, popupOnHover: true, onFocusGrab: this.onFocusGrab, onFocusRelease: this.onFocusRelease, panel: errors && errors.length && showErrors ? {
-                    header: this.props.formContext.translations.Error,
-                    panelTextContent: React.createElement("div", null, errors),
-                    variant: "danger",
-                    id: `laji-form-error-container-${wholeErrorId}`
-                } : null, draw: false, zoomToData: true, onOptionsChanged: this.onOptionsChanged, fullscreenable: true, help: options.help }, mapOptions);
-            const map = (React.createElement(MapComponent, Object.assign({ ref: "map" }, mapPropsToPass)));
-            const wrapperProps = {
-                getContainer: this.getContainer,
-                topOffset: topOffset === undefined ? this.props.formContext.topOffset : topOffset,
-                bottomOffset: bottomOffset === undefined ? this.props.formContext.bottomOffset : bottomOffset,
-                onResize: this.onResize,
-                mounted: this.state.mounted,
-                className: this.state.focusGrabbed ? "pass-block" : "",
-                minHeight: utils_2.getUiOptions(this.props.uiSchema).minHeight,
-                onEnterViewPort: this.onEnterViewPort,
-                enterViewPortTreshold: 200
-            };
-            const wrappedMap = (React.createElement(components_1.Stretch, Object.assign({}, wrapperProps, { ref: "stretch" }), map));
-            const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_2.getUiOptions(this.props.uiSchema));
-            const { Popover, Row, Col, ButtonToolbar } = this.context.theme;
-            return (React.createElement(React.Fragment, null,
-                React.createElement(Row, null,
-                    React.createElement(Col, Object.assign({}, mapSizes), wrappedMap),
-                    React.createElement(Col, Object.assign({}, schemaSizes, { ref: "_stretch" }), mapOptions.emptyMode ?
-                        (!emptyHelp && (!buttons || !buttons.length) ? null :
-                            React.createElement(Popover, { placement: "right", id: `${this.props.idSchema.$id}-help` }, React.createElement("div", null,
-                                emptyHelp,
-                                buttons && buttons.length ? ` ${this.props.formContext.translations.or}` : null,
-                                buttons))) :
-                        inlineSchema)),
-                popupFields ?
-                    React.createElement("div", { style: { display: "none" }, ref: "popupContainer" },
-                        React.createElement(Popup, { data: this.getPopupData(this.state.popupIdx), ref: "popup" })) : null,
-                React.createElement(Row, null, mapOptions.emptyMode ? null : belowSchema),
-                renderButtonsBelow && !mapOptions.emptyMode && buttons.length ? (React.createElement(Row, { className: "map-array-field-below-buttons" },
-                    React.createElement(TitleFieldTemplate, { title: utils_2.getUiOptions(uiSchema).buttonsTitle, schema: this.props.schema }),
-                    React.createElement(ButtonToolbar, null, buttons))) : null));
-        }
-        getDraftStyle() {
-            if (super.getDraftStyle) {
-                return super.getDraftStyle();
-            }
-            return { color: "#25B4CA", opacity: 1 };
-        }
-        filterPopupOptions({ dataIdx, featureIdx, feature }) {
-            return { dataIdx, featureIdx, feature };
-        }
-        getPopupData(options) {
-            if (super.getPopupData) {
-                return super.getPopupData(options);
-            }
-            else {
-                return this.getFeaturePopupData(options);
-            }
-        }
-        getFormDataForPopup(options) {
-            if (super.getFormDataForPopup) {
-                return super.getFormDataForPopup(options);
-            }
-            else {
-                return this.state.activeIdx !== undefined ? this.props.formData[this.state.activeIdx] : undefined;
-            }
-        }
-    } // eslint-disable-line indent
-    _MapArrayField.contextType = ReactContext_1.default;
-    return _MapArrayField; // eslint-disable-line indent
-}
-class Popup extends React.Component {
-    render() {
-        const { data } = this.props;
-        return data && data.length &&
-            React.createElement("ul", { ref: "popup", className: "map-data-tooltip" }, data.map(({ value, title, template }, i) => {
-                switch (template) {
-                    case "title":
-                        return React.createElement("li", { key: title || i },
-                            React.createElement("strong", null, Array.isArray(value) ? value.join(", ") : value));
-                    case "description":
-                        return React.createElement("li", { key: title || i },
-                            React.createElement("i", null, Array.isArray(value) ? value.join(", ") : value));
-                    default:
-                        return React.createElement("li", { key: title || i },
-                            React.createElement("strong", null,
-                                title,
-                                ":"),
-                            " ",
-                            Array.isArray(value) ? value.join(", ") : value);
-                }
-            }));
-    }
-}
-class MapComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.tileLayerChange = ({ tileLayers }) => {
-            this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), { tileLayers }) });
-        };
-        this.overlaysChange = ({ overlayNames }) => {
-            this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), { overlayNames }) });
-        };
-        this.tileLayerOpacityChangeEnd = ({ tileLayerOpacity }) => {
-            this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), { tileLayerOpacity }) });
-        };
-        this.locateToggle = ({ locate }) => {
-            this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), { locate }) });
-        };
-        this.grabFocus = () => {
-            this.props.formContext.services.blocker.push();
-            this.setState({ focusGrabbed: true }, () => {
-                if (this.props.onFocusGrab)
-                    this.props.onFocusGrab();
-            });
-        };
-        this.releaseFocus = () => {
-            this.props.formContext.services.blocker.push();
-            this.setState({ focusGrabbed: false }, () => {
-                if (this.props.onFocusRelease)
-                    this.props.onFocusRelease();
-            });
-        };
-        this.showPanel = (options) => {
-            this.setState(Object.assign({ panel: true }, options));
-        };
-        this.hidePanel = () => {
-            this.setState({ panel: false });
-        };
-        this.showHelp = () => {
-            this.setState({ showHelp: true });
-        };
-        this.hideHelp = () => {
-            this.setState({ showHelp: false });
-        };
-        this.setMapState = (options, callback) => {
-            this._callback = callback;
-            this.setState({ mapOptions: options });
-        };
-        this.setOnUpdateMap = (fn) => {
-            this._permaCallback = fn;
-        };
-        this.state = { mapOptions: {} };
-        this.mainContext = Context_1.default(props.formContext.contextId);
-        this._context = Context_1.default(`${props.formContext.contextId}_MAP`);
-        this._context.grabFocus = this.grabFocus;
-        this._context.releaseFocus = this.releaseFocus;
-        this._context.showPanel = this.showPanel;
-        this._context.hidePanel = this.hidePanel;
-        this._context.setMapState = this.setMapState;
-        this._context.setOnUpdateMap = this.setOnUpdateMap;
-    }
-    componentDidMount() {
-        this.map = this.refs.map.map;
-        const { map } = this.map;
-        this._context.map = this.map;
-        map.on("tileLayersChange", this.tileLayerChange);
-        map.on("locateToggle", this.locateToggle);
-    }
-    componentWillUnmount() {
-        const { map } = this.map;
-        if (!map)
-            return;
-        map.off("tileLayersChange", this.tileLayerChange);
-        map.off("locateToggle", this.locateToggle);
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (this._callback)
-            this._callback();
-        this._callback = undefined;
-        if (this.props.onOptionsChanged && ["tileLayers", "locate"].some(name => !equals(...[this.state, prevState].map(state => state.mapOptions[name])))) {
-            this.props.onOptionsChanged(this.state.mapOptions);
-        }
-        if (this._permaCallback)
-            this._permaCallback();
-    }
-    render() {
-        const _a = this.props, { panel, onFocusGrab, onFocusRelease, onOptionsChanged } = _a, mapOptions = __rest(_a, ["panel", "onFocusGrab", "onFocusRelease", "onOptionsChanged"]); // eslint-disable-line
-        const { Modal } = this.context.theme;
-        const controlledPanel = panel ?
-            React.createElement(MapPanel, { id: panel.id, variant: panel.variant || undefined, buttonThemeRole: panel.buttonThemeRole, header: panel.header, text: panel.panelTextContent })
-            : null;
-        return (React.createElement("div", { className: "laji-form-map-container" + (this.state.focusGrabbed ? " pass-block" : "") },
-            controlledPanel,
-            this.state.panel &&
-                React.createElement(MapPanel, { id: panel.id, show: this.state.panel, text: this.state.panelTextContent, onClick: this.state.panelButtonOnClick, buttonText: this.state.panelButtonContent, buttonThemeRole: this.state.panelButtonBsStyle }),
-            this.state.showHelp &&
-                React.createElement(Modal, { dialogClassName: "laji-form", show: true, onHide: this.hideHelp },
-                    React.createElement(Modal.Header, { closeButton: true }),
-                    React.createElement(Modal.Body, null,
-                        React.createElement("span", { dangerouslySetInnerHTML: { __html: mapOptions.help } }))),
-            React.createElement(Map, Object.assign({ className: this.props.className, style: this.props.style, ref: "map", showHelp: this.showHelp, hideHelp: this.hideHelp, formContext: this.props.formContext }, Object.assign(Object.assign({}, mapOptions), this.state.mapOptions)))));
-    }
-}
-exports.MapComponent = MapComponent;
-MapComponent.contextType = ReactContext_1.default;
-class Map extends React.Component {
-    constructor(props) {
-        super(props);
-        this.getMapOptions = (props) => {
-            const { className, // eslint-disable-line @typescript-eslint/no-unused-vars
-            style, // eslint-disable-line @typescript-eslint/no-unused-vars
-            hidden, // eslint-disable-line @typescript-eslint/no-unused-vars
-            singleton, // eslint-disable-line @typescript-eslint/no-unused-vars
-            emptyMode, // eslint-disable-line @typescript-eslint/no-unused-vars
-            onComponentDidMount, // eslint-disable-line @typescript-eslint/no-unused-vars
-            fullscreenable, // eslint-disable-line @typescript-eslint/no-unused-vars
-            formContext, // eslint-disable-line @typescript-eslint/no-unused-vars
-            controlSettings } = props, // eslint-disable-line @typescript-eslint/no-unused-vars
-            mapOptions = __rest(props, ["className", "style", "hidden", "singleton", "emptyMode", "onComponentDidMount", "fullscreenable", "formContext", "controlSettings"]);
-            return mapOptions;
-        };
-        this.getEnhancedMapOptions = (props) => {
-            const mapOptions = this.getMapOptions(props);
-            const { fullscreenable, help, formContext = {} } = props;
-            if (fullscreenable) {
-                mapOptions.controls = Object.assign({ fullscreen: true }, (utils_2.isObject(mapOptions.controls)
-                    ? mapOptions.controls
-                    : {}));
-            }
-            if (help) {
-                mapOptions.customControls = [
-                    ...(mapOptions.customControls || []),
-                    {
-                        iconCls: "glyphicon glyphicon-question-sign",
-                        fn: this.props.showHelp,
-                        position: "bottomright",
-                        text: formContext.translations.Instructions
-                    }
-                ];
-            }
-            mapOptions.lang = mapOptions.lang || formContext.lang;
-            mapOptions.googleApiKey = formContext.googleApiKey;
-            mapOptions.rootElem = this.refs.map;
-            const { lajiGeoServerAddress } = props.formContext;
-            if (lajiGeoServerAddress) {
-                mapOptions.lajiGeoServerAddress = lajiGeoServerAddress;
-            }
-            return mapOptions;
-        };
-        this.setMapOptions = (prevOptions, options) => {
-            if (!this.map) {
-                return;
-            }
-            const mapOptions = this.getMapOptions(options);
-            const prevMapOptions = this.getMapOptions(prevOptions);
-            Object.keys(mapOptions).forEach(key => {
-                switch (key) {
-                    case "draw": // More optimal way of updating draw data than setting the draw option
-                        if (!equals(mapOptions.draw, prevMapOptions.draw)) {
-                            this.map.updateDrawData(mapOptions.draw);
-                        }
-                        break;
-                    case "rootElem": // deeqEquals on DOM node causes maximum call stack size exceeding.
-                        if (mapOptions[key] !== prevMapOptions[key]) {
-                            this.map.setOption(key, mapOptions[key]);
-                        }
-                        break;
-                    default:
-                        if (!equals(mapOptions[key], prevMapOptions[key])) {
-                            this.map.setOption(key, mapOptions[key]);
-                            if (this.props.singleton && mapOptions.zoomToData && key === "data") {
-                                this.map.zoomToData(mapOptions.zoomToData);
-                            }
-                        }
-                }
-            });
-        };
-        this.initializeMap = (props) => {
-            const mapOptions = this.getEnhancedMapOptions(props);
-            if (props.singleton) {
-                const singletonMapService = props.formContext.services.singletonMap;
-                this.map = singletonMapService.grab(this, mapOptions);
-                this.setMapOptions(this.map.getOptions(), mapOptions);
-            }
-            else {
-                this.map = new laji_map_1.default(mapOptions);
-            }
-            this.map.map.invalidateSize();
-            if (props.onComponentDidMount)
-                props.onComponentDidMount(this.map);
-        };
-        this.state = {};
-    }
-    componentDidMount() {
-        this.mounted = true;
-        let options = Object.assign({}, this.props);
-        // Backward compatibility for bad settings.
-        ["tileLayerName", "overlayNames", "tileLayerOpacity"].forEach(prop => {
-            if (prop in options && options[prop] === undefined) {
-                options = utils_2.immutableDelete(options, prop);
-            }
-        });
-        if (this.props.hidden) {
-            return;
-        }
-        this.initializeMap(options);
-    }
-    componentWillUnmount() {
-        if (this.props.singleton) {
-            this.props.formContext.services.singletonMap.release(this);
-        }
-        else {
-            this.map && this.map.destroy();
-        }
-        this.mounted = false;
-    }
-    componentDidUpdate(prevProps) {
-        const { hidden, onComponentDidMount, singleton } = this.props;
-        const props = __rest(this.props, []);
-        if (!hidden && !this.map) {
-            this.initializeMap(props);
-            if (onComponentDidMount)
-                onComponentDidMount(this.map);
-        }
-        if (!singleton || this.props.formContext.services.singletonMap.amOwner(this)) {
-            if (this.map && prevProps.lineTransect && props.lineTransect && "activeIdx" in props.lineTransect) {
-                this.map.setLTActiveIdx(props.lineTransect.activeIdx);
-            }
-            if (prevProps.lineTransect)
-                delete props.lineTransect;
-            this.setMapOptions(this.getEnhancedMapOptions(prevProps), this.getEnhancedMapOptions(this.props));
-        }
-    }
-    render() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { key: "map", className: "laji-form-map" + (this.props.className ? " " + this.props.className : ""), style: this.props.style, ref: "map" })));
-    }
-}
-exports.Map = Map;
-Map.defaultProps = {
-    tileLayerName: "maastokartta",
-    availableTileLayerNamesBlacklist: ["pohjakartta"]
-};
-class MapPanel extends React.Component {
-    render() {
-        const { Panel } = this.context.theme;
-        return (React.createElement(Panel, { variant: this.props.variant || undefined, className: "laji-form-popped", id: this.props.id },
-            this.props.header ? (React.createElement(Panel.Heading, null, this.props.header)) : null,
-            React.createElement(Panel.Body, null,
-                this.props.text,
-                this.props.buttonText ?
-                    React.createElement(components_1.Button, { variant: this.props.buttonThemeRole || "default", onClick: this.props.onClick }, this.props.buttonText) :
-                    null)));
-    }
-}
-MapPanel.contextType = ReactContext_1.default;
-const saneOpacityRange = (opacity) => Math.min(1, Math.max(0, opacity || 0));
-const getFeatureStyleWithLowerOpacity = style => (Object.assign(Object.assign({}, style), { opacity: saneOpacityRange(style.opacity || 1 - 0.5), fillOpacity: saneOpacityRange(style.fillOpacity || 0.4 - 0.3) }));
-exports.getFeatureStyleWithLowerOpacity = getFeatureStyleWithLowerOpacity;
-const getFeatureStyleWithHighlight = style => {
-    const color = style.color
-        ? utils_1.combineColors(style.color, "#ffffff", 30)
-        : undefined;
-    return Object.assign(Object.assign({}, style), { color, fillOpacity: saneOpacityRange(style.fillOpacity || 0.4 + 0.4) });
-};
-exports.getFeatureStyleWithHighlight = getFeatureStyleWithHighlight;