@luomus/laji-form 15.1.0 → 15.1.2

package/lib/components/fields/LocationChooserField.js

@@ -1,440 +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 });
-const React = require("react");
-const react_dom_1 = require("react-dom");
-const PropTypes = require("prop-types");
-const BaseComponent_1 = require("../BaseComponent");
-const components_1 = require("../components");
-const Context_1 = require("../../Context");
-const utils_1 = require("../../utils");
-const MapArrayField_1 = require("./MapArrayField");
-const ReactContext_1 = require("../../ReactContext");
-let LocationChooserField = class LocationChooserField extends React.Component {
-    getStateFromProps(props) {
-        let uiSchema = utils_1.getInnerUiSchema(props.uiSchema);
-        uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:buttons": [
-                ...(uiSchema["ui:buttons"] || []),
-                React.createElement(LocationButton, { key: `$${this.props.idSchema.$id}-location`, that: this })
-            ] });
-        return { uiSchema };
-    }
-    render() {
-        const SchemaField = this.props.registry.fields.SchemaField;
-        return React.createElement(SchemaField, Object.assign({}, this.props, this.state));
-    }
-};
-LocationChooserField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            uiSchema: PropTypes.object,
-            taxonField: PropTypes.string,
-            geometryField: PropTypes.string,
-            strategy: PropTypes.oneOf(["unit", "lolife", "lolifeUnit"]),
-            mapOptions: PropTypes.object,
-            maxShapes: PropTypes.number,
-            preselectMarker: PropTypes.bool,
-            color: PropTypes.string
-        })
-    }).isRequired,
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["object"])
-    }).isRequired,
-    formData: PropTypes.object.isRequired
-};
-LocationChooserField = __decorate([
-    BaseComponent_1.default
-], LocationChooserField);
-exports.default = LocationChooserField;
-class LocationButton extends React.Component {
-    constructor(props) {
-        super(props);
-        this.getIdx = () => {
-            const { that } = this.props;
-            const { $id } = that.props.idSchema;
-            const splitted = $id.split("_");
-            return parseInt(splitted[splitted.length - 1]);
-        };
-        this.getGeometryField = () => {
-            const { that } = this.props;
-            const { geometryField = "geometry" } = utils_1.getUiOptions(that.props.uiSchema);
-            return geometryField;
-        };
-        this.hasCoordinates = () => {
-            return MapArrayField_1.parseGeometries(this.getGeometry()).length;
-        };
-        this.getGeometry = () => {
-            const geometryField = this.getGeometryField();
-            return utils_1.parseJSONPointer(this.props.that.props.formData, geometryField);
-        };
-        this.onMouseEnter = () => {
-            const { that } = this.props;
-            const idx = this.getIdx();
-            this._hovered = true;
-            if (typeof idx === "number") {
-                that.props.formContext.services.customEvents.send(that.props.idSchema.$id, "startHighlight", { id: utils_1.getUUID(that.props.formData), idx });
-            }
-        };
-        this.onMouseLeave = () => {
-            const { that } = this.props;
-            const idx = this.getIdx();
-            this._hovered = false;
-            if (typeof idx === "number") {
-                that.props.formContext.services.customEvents.send(that.props.idSchema.$id, "endHighlight", { id: utils_1.getUUID(that.props.formData), idx });
-            }
-        };
-        this.getUnitDrawFeatureStyle = () => ({ color: "#55AEFA" });
-        this.getDataFeatureStyle = () => ({ color: "#aaaaaa", opacity: 0.7 });
-        this.getData = () => {
-            const { that } = this.props;
-            const { strategy = "unit" } = utils_1.getUiOptions(that.props.uiSchema);
-            switch (strategy) {
-                case "unit":
-                    return this.getUnitData();
-                case "lolifeUnit":
-                case "lolife":
-                    return this.getLolifeData();
-            }
-        };
-        this.getUnitData = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            const emptyFeatureCollection = { featureCollection: { type: "FeatureCollection", features: [] } };
-            const gatheringData = map ? map.getDraw() : emptyFeatureCollection;
-            const [unitGeometriesData, ...unitGeometryCollectionsData] = map
-                ? map.data.filter(i => i) || [emptyFeatureCollection]
-                : [emptyFeatureCollection];
-            const idx = this.getIdx();
-            const geometry = this.getGeometry();
-            const draw = geometry && geometry.type
-                ? {
-                    featureCollection: { type: "FeatureCollection", features: [{ type: "Feature", geometry }] },
-                    getFeatureStyle: this.getUnitDrawFeatureStyle,
-                }
-                : undefined;
-            if (unitGeometriesData && draw)
-                draw.getFeatureStyle = unitGeometriesData.getFeatureStyle;
-            return [
-                draw,
-                [
-                    {
-                        featureCollection: gatheringData.featureCollection,
-                        getFeatureStyle: this.getDataFeatureStyle
-                    },
-                    {
-                        featureCollection: {
-                            type: "FeatureCollection",
-                            features: unitGeometriesData.featureCollection.features.filter(feature => feature.properties.idx !== idx)
-                        },
-                        getFeatureStyle: this.getDataFeatureStyle
-                    },
-                    ...unitGeometryCollectionsData.map(data => ({
-                        featureCollection: {
-                            type: "FeatureCollection",
-                            features: data.featureCollection.features.filter(feature => feature.properties.idx !== idx)
-                        },
-                        getFeatureStyle: this.getDataFeatureStyle
-                    }))
-                ]
-            ];
-        };
-        this.getLolifeData = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            const { strategy = "unit" } = utils_1.getUiOptions(that.props.uiSchema);
-            let draw;
-            if (strategy === "lolife") {
-                draw = map.getDraw();
-            }
-            const id = utils_1.getUUID(that.props.formData);
-            let data = map.data.filter((item) => {
-                const isCurrent = item.featureCollection.features[0].properties.id === id;
-                if (strategy === "lolifeUnit" && isCurrent) {
-                    draw = Object.assign(Object.assign({}, item), { idx: map.drawIdx, getPopup: undefined, on: undefined, getFeatureStyle: this.getFeatureStyleWithHighlight(item.getFeatureStyle), getDraftStyle: () => this.getFeatureStyleWithHighlight(item.getFeatureStyle)({ feature: { properties: { id } } }, !!"higlight") });
-                }
-                return !isCurrent;
-            }).map(item => (Object.assign(Object.assign({}, item), { getPopup: undefined, on: undefined, getFeatureStyle: this.getFeatureStyleWithLowerOpacity(item.getFeatureStyle) })));
-            if (strategy === "lolifeUnit") {
-                data.push(map.getDraw());
-            }
-            return [
-                draw,
-                data
-            ];
-        };
-        this.onClick = () => {
-            const { that } = this.props;
-            const { disabled, readonly } = that.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            this.triggerLayer = undefined;
-            let [draw, data] = this.getData();
-            data = data.map(d => (Object.assign(Object.assign({}, d), { editable: false })));
-            const _a = map ? map.getOptions() : { mapOptions: {} }, { rootElem, customControls, zoom, center } = _a, mapOptions = __rest(_a, ["rootElem", "customControls", "zoom", "center"]); // eslint-disable-line @typescript-eslint/no-unused-vars
-            const { mapOptions: { marker = true, polyline = false, rectangle = false, polygon = false, circle = false } = {} } = utils_1.getUiOptions(that.props.uiSchema);
-            const modalMap = Object.assign(Object.assign({}, mapOptions), { data, draw: Object.assign(Object.assign({}, draw), { marker,
-                    polyline,
-                    rectangle,
-                    polygon,
-                    circle, onChange: this.onChange, editable: !readonly && !disabled }), controls: Object.assign(Object.assign({}, mapOptions.controls), { draw: Object.assign(Object.assign({}, ((mapOptions.controls || {}).draw || {})), { clear: true, delete: true }) }), fullscreenable: true, zoomToData: draw ? { draw: true } : true, clickBeforeZoomAndPan: false, onComponentDidMount: this.onMapMounted });
-            if (center) {
-                modalMap.center = center;
-            }
-            if (zoom) {
-                modalMap.zoom = zoom;
-            }
-            this.setState({
-                modalMap
-            });
-        };
-        this.getGrey = () => ({ opacity: 0.6, color: "#888888" });
-        this.getFeatureStyle = () => ({ color: "#75CEFA" });
-        this.onChange = (events) => {
-            const { that } = this.props;
-            const { maxShapes = 1 } = utils_1.getUiOptions(that.props.uiSchema);
-            const _that = this;
-            function close() {
-                _that.triggerLayer && _that.triggerLayer.disable();
-                _that.onHide();
-            }
-            const geometryField = this.getGeometryField();
-            for (let event of events) {
-                const { type } = event;
-                const geometryRef = utils_1.parseJSONPointer(that.props.formData, geometryField);
-                switch (type) {
-                    case "create": {
-                        if (geometryRef && geometryRef.type && (maxShapes > 1 || maxShapes === -1)) {
-                            if (geometryRef.geometries && maxShapes !== -1 && geometryRef.geometries.length >= maxShapes) {
-                                this.setState({ shapeAlert: { label: "tooManyShapes", max: maxShapes } });
-                                return;
-                            }
-                            const geometries = geometryRef && geometryRef.geometries
-                                ? geometryRef.geometries
-                                : geometryRef && geometryRef.type
-                                    ? [geometryRef]
-                                    : [];
-                            that.props.onChange(utils_1.updateFormDataWithJSONPointer(that.props, { type: "GeometryCollection", geometries: [...geometries, event.feature.geometry] }, geometryField));
-                        }
-                        else {
-                            that.props.onChange(utils_1.updateFormDataWithJSONPointer(that.props, event.feature.geometry, geometryField));
-                        }
-                        // TODO LajiMap doesn't send a sequence of events containing multiple events if 
-                        // it sends a create event, but this isn't necessarily true in the future and
-                        // closing here wouldn't be right.
-                        close();
-                        break;
-                    }
-                    case "delete": {
-                        if (!geometryRef || !geometryRef.type) {
-                            break;
-                        }
-                        that.props.onChange(utils_1.updateFormDataWithJSONPointer(that.props, utils_1.getDefaultFormState(utils_1.parseSchemaFromFormDataPointer(that.props.schema, geometryField)), geometryField));
-                        break;
-                    }
-                    case "edit": {
-                        if (!geometryRef || !geometryRef.type) {
-                            break;
-                        }
-                        if (geometryRef.type === "GeometryCollection" && geometryRef.geometries) {
-                            const geometry = Object.keys(event.features).reduce((geometry, idx) => {
-                                const feature = event.features[idx];
-                                geometry = Object.assign(Object.assign({}, geometry), { geometries: Object.assign(Object.assign({}, geometry.geometries), { [idx]: feature.geometry }) });
-                                return geometry;
-                            }, utils_1.parseJSONPointer(that.props.formData, geometryField));
-                            that.props.onChange(utils_1.updateFormDataWithJSONPointer(that.props, geometry, geometryField));
-                        }
-                        else if (geometryRef.type) {
-                            that.props.onChange(utils_1.updateFormDataWithJSONPointer(that.props, event.features[0].geometry, geometryField));
-                        }
-                    }
-                }
-                if (geometryRef
-                    && geometryRef.geometries
-                    && geometryRef.geometries.length <= maxShapes
-                    && type !== "edit") {
-                    this.setState({ shapeAlert: undefined });
-                }
-            }
-        };
-        this.onMapMounted = (map) => {
-            const { that } = this.props;
-            const { disabled, readonly } = that.props;
-            const { preselectMarker = true } = utils_1.getUiOptions(that.props.uiSchema);
-            map.resetDrawUndoStack();
-            if (!disabled && !readonly && preselectMarker) {
-                this.triggerLayer = map.triggerDrawing("marker");
-            }
-        };
-        this.getMiniMapData = () => {
-            const { that } = this.props;
-            const { strategy = "unit" } = utils_1.getUiOptions(that.props.uiSchema);
-            switch (strategy) {
-                case "unit":
-                    return this.getUnitMiniMapData();
-                case "lolifeUnit":
-                    return this.getLolifeUnitMiniMapData();
-                case "lolife":
-                    return this.getLolifeMiniMapData();
-            }
-        };
-        this.getUnitMiniMapData = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            const geometry = this.getGeometry();
-            const data = [
-                ...(map && map.getDraw() ? [Object.assign(Object.assign({}, map.getDraw()), { getFeatureStyle: this.getGrey })] : []),
-                ...(map && map.data && map.data[0] ? [Object.assign(Object.assign({}, map.data[0]), { getFeatureStyle: this.getGrey })] : []),
-                {
-                    geoData: geometry,
-                    getFeatureStyle: this.getFeatureStyle
-                }
-            ];
-            return [
-                data,
-                { dataIdxs: [data.length - 1] }
-            ];
-        };
-        this.getLolifeMiniMapData = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            const draw = map.getDraw();
-            return [
-                [
-                    draw,
-                    ...map.data.map((item) => {
-                        return Object.assign(Object.assign({}, item), { getPopup: undefined, on: undefined, editable: false, getFeatureStyle: item.getFeatureStyle });
-                    })
-                ],
-                { dataIdxs: [draw.idx || 0] }
-            ];
-        };
-        this.getLolifeUnitMiniMapData = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            const { map } = mapContext;
-            const id = utils_1.getUUID(that.props.formData);
-            return [
-                [
-                    ...map.data.map((item) => (Object.assign(Object.assign({}, item), { getPopup: undefined, on: undefined, editable: false, getFeatureStyle: item.getFeatureStyle
-                            ? item.featureCollection.features[0].properties.id === id
-                                ? this.getFeatureStyleWithHighlight(item.getFeatureStyle)
-                                : this.getFeatureStyleWithLowerOpacity(item.getFeatureStyle)
-                            : undefined }))),
-                    map.getDraw()
-                ],
-                { dataIdxs: [map.data.findIndex(d => d.featureCollection.features[0].properties.id === id)] }
-            ];
-        };
-        this.getFeatureStyleWithLowerOpacity = getFeatureStyle => (...params) => {
-            const style = getFeatureStyle(...params);
-            return MapArrayField_1.getFeatureStyleWithLowerOpacity(style);
-        };
-        this.getFeatureStyleWithHighlight = getFeatureStyle => (...params) => {
-            const style = getFeatureStyle(...params);
-            return MapArrayField_1.getFeatureStyleWithHighlight(style);
-        };
-        this.onEntered = () => {
-            const { that } = this.props;
-            const mapContext = Context_1.default(`${that.props.formContext.contextId}_MAP`);
-            if (!mapContext) {
-                return;
-            }
-            const { map } = mapContext;
-            let mapOptions = {};
-            if (map) {
-                const _a = map.getOptions(), { rootElem, zoom, center } = _a, _mapOptions = __rest(_a, ["rootElem", "zoom", "center"]); //eslint-disable-line @typescript-eslint/no-unused-vars
-                mapOptions = _mapOptions;
-            }
-            const [data, zoomToData] = this.getMiniMapData();
-            this.setState({
-                miniMap: Object.assign(Object.assign({}, mapOptions), { draw: false, controls: false, customControls: undefined, zoomToData,
-                    data, clickBeforeZoomAndPan: false })
-            });
-        };
-        this.onHide = () => {
-            this.setState({ modalMap: undefined });
-        };
-        this.onModalMapKeyDown = (e) => {
-            if (e.key === "Escape" && !this.modalMapRef.map.keyHandler(e.nativeEvent)) {
-                this.onHide();
-            }
-        };
-        this.setMapRef = (elem) => {
-            this.modalMapRef = elem;
-        };
-        this.setMiniMapRef = (elem) => {
-            this.miniMapRef = elem;
-        };
-        this.setButtonRef = (elem) => {
-            this.buttonRef = elem;
-        };
-        this.getButtonElem = () => react_dom_1.findDOMNode(this.buttonRef);
-        this.renderButton = () => {
-            const { that, glyph = "map-marker", label } = this.props;
-            const id = that.props.idSchema.$id;
-            const { color } = utils_1.getUiOptions(that.props.uiSchema);
-            const hasCoordinates = this.hasCoordinates();
-            const geometryField = this.getGeometryField();
-            const hasErrors = utils_1.parseJSONPointer(utils_1.filteredErrors(that.props.errorSchema), geometryField);
-            const variant = hasErrors
-                ? "danger"
-                : undefined;
-            const button = React.createElement(components_1.GlyphButton, { key: `${that.props.idSchema.$id}-location`, id: `${that.props.idSchema.$id}-location`, variant: variant, active: !!hasCoordinates, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, glyph: glyph, onClick: this.onClick, style: hasCoordinates && !hasErrors && color ? { backgroundColor: color } : undefined, ref: this.setButtonRef });
-            const { Overlay, Popover, Tooltip } = this.context.theme;
-            if (hasErrors) {
-                return (React.createElement(React.Fragment, null,
-                    button,
-                    React.createElement(Overlay, { show: true, container: this, target: this.getButtonElem, placement: "left" },
-                        React.createElement(Tooltip, { id: `laji-form-error-container-${id}_${utils_1.JSONPointerToId(geometryField)}`, className: "location-chooser-errors" },
-                            React.createElement("ul", null, hasErrors.__errors.map((e, i) => React.createElement("li", { key: i }, utils_1.formatErrorMessage(e))))))));
-            }
-            else {
-                const { translations } = that.props.formContext;
-                const overlay = hasCoordinates ? (React.createElement(Popover, { id: `${id}-location-peeker`, title: `${translations.ChooseLocation} (${translations.below} ${translations.currentLocation})` },
-                    React.createElement(MapArrayField_1.Map, Object.assign({}, this.state.miniMap, { hidden: !this.state.miniMap || this.state.modalMap, style: { width: 200, height: 200 }, singleton: true, formContext: that.props.formContext, bodyAsDialogRoot: false, ref: this.setMiniMapRef })))) : (React.createElement(Tooltip, { id: `${id}-location-peeker` }, label || that.props.formContext.translations.ChooseLocation));
-                return (React.createElement(components_1.OverlayTrigger, { key: `${id}-set-coordinates-${glyph}`, overlay: overlay, placement: "left", hoverable: true, formContext: that.props.formContext, onEntered: hasCoordinates ? this.onEntered : undefined }, button));
-            }
-        };
-        this.state = {};
-    }
-    componentWillUnmount() {
-        this._hovered && this.onMouseLeave();
-    }
-    render() {
-        const { that } = this.props;
-        const { shapeAlert } = this.state;
-        const { taxonField, title } = utils_1.getUiOptions(that.props.uiSchema);
-        const { translations } = that.props.formContext;
-        const { Modal, Alert } = this.context.theme;
-        return (React.createElement(React.Fragment, null,
-            this.renderButton(),
-            this.state.modalMap &&
-                React.createElement(Modal, { key: "map-modal", show: true, dialogClassName: "laji-form map-dialog", onHide: this.onHide, keyboard: false, onKeyDown: this.onModalMapKeyDown },
-                    React.createElement(Modal.Header, { closeButton: true },
-                        React.createElement(Modal.Title, null, title || `${translations.SetLocationToUnit}${that.props.formData[taxonField] ? ` (${that.props.formData[taxonField]})` : ""}`)),
-                    React.createElement(Modal.Body, null,
-                        shapeAlert && React.createElement(Alert, { variant: "danger" }, translations[shapeAlert.label] + shapeAlert.max),
-                        React.createElement(MapArrayField_1.Map, Object.assign({}, this.state.modalMap, { singleton: true, formContext: that.props.formContext, ref: this.setMapRef, bodyAsDialogRoot: false }))))));
-    }
-}
-LocationButton.contextType = ReactContext_1.default;

package/lib/components/fields/MapArrayField.d.ts

@@ -1,78 +0,0 @@
-export function parseGeometries(geometry: any): any;
-export default class MapArrayField extends React.Component<any, any, any> {
-    static propTypes: {
-        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
-            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
-                geometryField: PropTypes.Requireable<string>;
-                geometryMapper: PropTypes.Requireable<string>;
-                topOffset: PropTypes.Requireable<number>;
-                bottomOffset: PropTypes.Requireable<number>;
-                popupFields: PropTypes.Requireable<(object | null | undefined)[]>;
-                computeAreaField: PropTypes.Requireable<string>;
-                areaInHectares: PropTypes.Requireable<boolean>;
-                mapSizes: PropTypes.Requireable<PropTypes.InferProps<{
-                    lg: PropTypes.Requireable<number>;
-                    md: PropTypes.Requireable<number>;
-                    sm: PropTypes.Requireable<number>;
-                    xs: PropTypes.Requireable<number>;
-                }>>;
-                data: PropTypes.Requireable<(PropTypes.InferProps<{
-                    geometryField: PropTypes.Validator<string>;
-                }> | null | undefined)[]>;
-                help: PropTypes.Requireable<string>;
-            }>>;
-        }>>;
-        schema: PropTypes.Validator<PropTypes.InferProps<{
-            type: PropTypes.Requireable<string>;
-        }>>;
-        formData: PropTypes.Requireable<object>;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-}
-export class MapComponent extends React.Component<any, any, any> {
-    static contextType: React.Context<import("../../ReactContext").ContextProps>;
-    constructor(props: any);
-    mainContext: Record<string, unknown>;
-    _context: Record<string, unknown>;
-    tileLayerChange: ({ tileLayers }: {
-        tileLayers: any;
-    }) => void;
-    overlaysChange: ({ overlayNames }: {
-        overlayNames: any;
-    }) => void;
-    tileLayerOpacityChangeEnd: ({ tileLayerOpacity }: {
-        tileLayerOpacity: any;
-    }) => void;
-    locateToggle: ({ locate }: {
-        locate: any;
-    }) => void;
-    map: any;
-    _callback: any;
-    grabFocus: () => void;
-    releaseFocus: () => void;
-    showPanel: (options: any) => void;
-    hidePanel: () => void;
-    showHelp: () => void;
-    hideHelp: () => void;
-    setMapState: (options: any, callback: any) => void;
-    setOnUpdateMap: (fn: any) => void;
-    _permaCallback: any;
-}
-export class Map extends React.Component<any, any, any> {
-    static defaultProps: {
-        tileLayerName: string;
-        availableTileLayerNamesBlacklist: string[];
-    };
-    constructor(props: any);
-    mounted: boolean | undefined;
-    getMapOptions: (props: any) => any;
-    getEnhancedMapOptions: (props: any) => any;
-    setMapOptions: (prevOptions: any, options: any) => void;
-    initializeMap: (props: any) => void;
-    map: any;
-}
-export function getFeatureStyleWithLowerOpacity(style: any): any;
-export function getFeatureStyleWithHighlight(style: any): any;
-import * as React from "react";
-import * as PropTypes from "prop-types";