@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/LocationChooserField.js

@@ -0,0 +1,440 @@
+"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

@@ -0,0 +1,78 @@
+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";