@biodiv-platform/naksha-gmaps-draw 4.5.5-beta.0 → 4.5.5

package/dist/esm/index.js

@@ -1,888 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/index.tsx
-import {
-  GMAPS_LIBRARIES,
-  mapboxToGmapsViewState
-} from "@biodiv-platform/naksha-commons";
-import { Data, GoogleMap, LoadScriptNext } from "@react-google-maps/api";
-import React6, { useEffect as useEffect4, useMemo, useReducer, useRef as useRef4, useState as useState7 } from "react";
-
-// src/autocomplete/index.tsx
-import { GMAPS_AUTOCOMPLETE_FIELDS } from "@biodiv-platform/naksha-commons";
-import { Autocomplete } from "@react-google-maps/api";
-import { useState } from "react";
-
-// src/utils/geojson.tsx
-import bbox from "@turf/bbox";
-
-// src/static/constants.tsx
-var GMAP_FEATURE_TYPES = {
-  POINT: "Point",
-  POLYGON: "Polygon",
-  LINESTRING: "LineString",
-  RECTANGLE: "Rectangle",
-  RAW: "Raw",
-  NONE: null
-};
-var GMAP_OPTIONS = {
-  mapTypeControlOptions: {
-    position: 10
-  }
-};
-
-// src/utils/geojson.tsx
-var placeToGeoJsonFeature = (place) => {
-  return {
-    type: GMAP_FEATURE_TYPES.POINT,
-    properties: {
-      id: new Date().getTime(),
-      name: place.name,
-      formatted_address: place.formatted_address
-    },
-    coordinates: Object.values(place.geometry.location.toJSON()).reverse()
-  };
-};
-var geometryToGeoJsonFeature = (geometry) => {
-  const id = new Date().getTime();
-  switch (geometry.getType()) {
-    case GMAP_FEATURE_TYPES.POINT: {
-      return {
-        type: GMAP_FEATURE_TYPES.POINT,
-        properties: { id },
-        coordinates: Object.values(geometry.get().toJSON()).reverse()
-      };
-    }
-    case GMAP_FEATURE_TYPES.POLYGON: {
-      const clist = [];
-      const toLatLng = (c) => clist.push([c.lng(), c.lat()]);
-      geometry.forEachLatLng(toLatLng);
-      clist.push(clist[0]);
-      return {
-        type: GMAP_FEATURE_TYPES.POLYGON,
-        properties: { id },
-        coordinates: [clist]
-      };
-    }
-    case GMAP_FEATURE_TYPES.RAW: {
-      const clist = geometry.data;
-      clist.push(clist[0]);
-      return {
-        type: GMAP_FEATURE_TYPES.POLYGON,
-        properties: { id },
-        coordinates: [clist]
-      };
-    }
-    case GMAP_FEATURE_TYPES.LINESTRING: {
-      const clist = [];
-      const toLatLng = (c) => clist.push([c.lng(), c.lat()]);
-      geometry.forEachLatLng(toLatLng);
-      return {
-        type: GMAP_FEATURE_TYPES.LINESTRING,
-        properties: { id },
-        coordinates: clist
-      };
-    }
-    default:
-      return null;
-  }
-};
-var toFullGeoJson = (features) => {
-  const cleanFeaures = (features || []).filter((o) => o);
-  if (cleanFeaures.length === 0) {
-    return false;
-  }
-  const mergedGeoJson = {
-    type: "FeatureCollection",
-    features: cleanFeaures.map((value) => {
-      if (Array.isArray(value) && value.length > 0 && value[0].isGeojson) {
-        const feature = value[0];
-        return {
-          type: "Feature",
-          properties: feature.properties || {},
-          geometry: feature.geometry || null
-        };
-      } else {
-        return { type: "Feature", properties: {}, geometry: value };
-      }
-    })
-  };
-  return mergedGeoJson;
-};
-var calculateBounds = (geojson) => {
-  const b = bbox(geojson);
-  return {
-    east: b[2],
-    north: b[3],
-    south: b[1],
-    west: b[0]
-  };
-};
-
-// src/autocomplete/index.tsx
-import { jsx } from "react/jsx-runtime";
-function NakshaAutocomplete({
-  InputComponent,
-  addFeature,
-  gmapRegion
-}) {
-  const [ac, setAc] = useState();
-  const onLoad = (autocomplete) => {
-    setAc(autocomplete);
-  };
-  const onPlaceChanged = () => {
-    const feature = placeToGeoJsonFeature(ac == null ? void 0 : ac.getPlace());
-    addFeature(feature);
-  };
-  return /* @__PURE__ */ jsx(Autocomplete, {
-    onLoad,
-    fields: GMAPS_AUTOCOMPLETE_FIELDS,
-    onPlaceChanged,
-    options: gmapRegion ? { componentRestrictions: { country: gmapRegion } } : {},
-    children: InputComponent
-  });
-}
-
-// src/features/clear-features.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ButtonStyle = {
-  background: "white",
-  position: "absolute",
-  top: "5px",
-  left: "106px",
-  padding: "0.4rem",
-  borderRadius: "0.15rem",
-  outline: 0,
-  boxShadow: "rgba(0, 0, 0, 0.3) 0px 1px 4px -1px"
-};
-function ClearFeatures({ onClick }) {
-  return /* @__PURE__ */ jsx2("button", {
-    type: "button",
-    title: "Clear",
-    onClick,
-    style: ButtonStyle,
-    children: /* @__PURE__ */ jsx2("svg", {
-      viewBox: "0 0 24 24",
-      width: "12",
-      height: "12",
-      children: /* @__PURE__ */ jsx2("g", {
-        fill: "#E53E3E",
-        children: /* @__PURE__ */ jsx2("path", {
-          d: "M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z"
-        })
-      })
-    })
-  });
-}
-
-// src/reducers/features.tsx
-var ACTION_TYPES = {
-  ADD: "add",
-  CLEAR: "clear",
-  REPLACE: "replace"
-};
-function featuresReducer(state, { action, data, isMultiple }) {
-  switch (action) {
-    case ACTION_TYPES.ADD:
-      return isMultiple ? [...state || [], data] : [data];
-    case ACTION_TYPES.CLEAR:
-      return [];
-    case ACTION_TYPES.REPLACE:
-      return data;
-    default:
-      return state;
-  }
-}
-
-// src/trace-location/index.tsx
-import React2, { useEffect as useEffect2, useState as useState3 } from "react";
-
-// src/utils/use-location.tsx
-import { useState as useState2, useEffect } from "react";
-var defaultSettings = {
-  enableHighAccuracy: false,
-  timeout: Infinity,
-  maximumAge: 0
-};
-var usePosition = (watch, settings = defaultSettings) => {
-  const [position, setPosition] = useState2();
-  const [error, setError] = useState2();
-  const onChange = ({ coords }) => {
-    setPosition([coords.longitude, coords.latitude]);
-  };
-  const onError = (error2) => {
-    setError(error2.message);
-  };
-  useEffect(() => {
-    if (!navigator || !navigator.geolocation) {
-      setError("Geolocation is not supported");
-      return;
-    }
-    let watcher = null;
-    if (watch) {
-      watcher = navigator.geolocation.watchPosition(
-        onChange,
-        onError,
-        settings
-      );
-    } else {
-      watcher && navigator.geolocation.clearWatch(watcher);
-    }
-    return () => watcher && navigator.geolocation.clearWatch(watcher);
-  }, [settings, watch]);
-  return { position, error };
-};
-
-// src/trace-location/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function TraceLocation({
-  TraceButtonComponent,
-  onFeatureAdded
-}) {
-  const [trackData, setTrackData] = useState3([]);
-  const [isTracking, setIsTracking] = useState3(false);
-  const { position } = usePosition(isTracking);
-  useEffect2(() => {
-    if (isTracking && position) {
-      setTrackData([...trackData, position]);
-    }
-  }, [isTracking, position]);
-  const handleOnTraceAction = () => {
-    if (isTracking) {
-      setIsTracking(false);
-      onFeatureAdded({
-        getType: () => GMAP_FEATURE_TYPES.RAW,
-        data: [...trackData]
-      });
-      setTrackData([]);
-    } else {
-      setIsTracking(true);
-    }
-  };
-  return /* @__PURE__ */ jsx3("div", {
-    children: React2.cloneElement(TraceButtonComponent, {
-      onClick: handleOnTraceAction,
-      isTracking
-    })
-  });
-}
-
-// src/ModalImport/index.tsx
-import React5, { useState as useState6 } from "react";
-
-// src/import/index.tsx
-import React3, { useRef, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var NakshaImport = ({
-  addFeature,
-  InputComponent,
-  ButtonComponent,
-  LocationIcon,
-  SuccessIcon,
-  FailureIcon
-}) => {
-  const importInputRef = useRef(null);
-  const [isPointsValid, setIsPointsValid] = useState4(true);
-  const [uploadStatus, setUploadStatus] = useState4("");
-  const [importedPoints, setImportedPoints] = useState4([]);
-  const handleOnAddFeature = () => {
-    var _a, _b, _c;
-    try {
-      const txtLatLng = (_b = (_a = importInputRef.current) == null ? void 0 : _a.value) != null ? _b : "";
-      if (!txtLatLng.trim()) {
-        setIsPointsValid(false);
-        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
-        return;
-      }
-      const numLatLng = (_c = txtLatLng.split(",").map(Number)) == null ? void 0 : _c.reverse();
-      if (!isValidLatLng(numLatLng)) {
-        setIsPointsValid(false);
-        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
-        return;
-      }
-      const newFeature = {
-        type: GMAP_FEATURE_TYPES.POINT,
-        properties: {
-          id: new Date().getTime(),
-          name: txtLatLng,
-          formatted_address: txtLatLng
-        },
-        coordinates: numLatLng
-      };
-      addFeature(newFeature);
-      setImportedPoints((prevPoints) => [...prevPoints, newFeature]);
-      if (importInputRef.current) {
-        importInputRef.current.value = "";
-      }
-      setIsPointsValid(true);
-      setUploadStatus("Point added successfully");
-    } catch (e) {
-      setIsPointsValid(false);
-    } finally {
-      setTimeout(() => {
-        setUploadStatus("");
-        setIsPointsValid(true);
-      }, 3e3);
-    }
-  };
-  const isValidLatLng = (latLng) => {
-    return Array.isArray(latLng) && latLng.length === 2 && !isNaN(latLng[0]) && !isNaN(latLng[1]) && typeof latLng[0] === "number" && typeof latLng[1] === "number";
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start"
-    },
-    children: [
-      /* @__PURE__ */ jsx4("h1", {
-        style: {
-          marginBottom: "10px",
-          fontWeight: "bold",
-          fontSize: "1.25rem"
-        },
-        children: "Point"
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        style: { display: "flex", alignItems: "center" },
-        children: [
-          React3.cloneElement(InputComponent, {
-            ref: importInputRef,
-            width: "300px"
-          }),
-          React3.cloneElement(ButtonComponent, {
-            onClick: handleOnAddFeature,
-            type: "button",
-            marginLeft: "10px"
-          })
-        ]
-      }),
-      uploadStatus && /* @__PURE__ */ jsxs("div", {
-        style: {
-          fontWeight: "bold",
-          color: isPointsValid ? "green" : "red",
-          marginTop: "10px",
-          display: "flex",
-          alignItems: "center"
-        },
-        children: [
-          isPointsValid ? /* @__PURE__ */ jsx4("span", {
-            style: { marginRight: "5px", fontSize: "1.25rem" },
-            children: React3.cloneElement(SuccessIcon, { boxSize: 6 })
-          }) : /* @__PURE__ */ jsx4("span", {
-            style: { marginRight: "5px", fontSize: "1.25rem", color: "red" },
-            children: React3.cloneElement(FailureIcon, { boxSize: 4 })
-          }),
-          uploadStatus
-        ]
-      }),
-      importedPoints.length > 0 && /* @__PURE__ */ jsxs("div", {
-        style: { marginTop: "10px", paddingLeft: "15px" },
-        children: [
-          /* @__PURE__ */ jsx4("div", {
-            style: { fontSize: "sm" },
-            children: "Added Points:"
-          }),
-          /* @__PURE__ */ jsx4("ul", {
-            style: { listStyleType: "none", padding: "0" },
-            children: importedPoints.map((point) => /* @__PURE__ */ jsxs("li", {
-              style: { display: "flex", alignItems: "center", marginBottom: "5px" },
-              children: [
-                React3.cloneElement(LocationIcon, { boxSize: 6, marginRight: 2, color: "teal" }),
-                /* @__PURE__ */ jsx4("span", {
-                  style: { overflow: "hidden", whiteSpace: "pre-wrap", textOverflow: "ellipsis", maxWidth: "300px" },
-                  children: point.properties.name
-                })
-              ]
-            }, point.properties.id))
-          })
-        ]
-      })
-    ]
-  });
-};
-var import_default = NakshaImport;
-
-// src/geojson/index.tsx
-import React4, { useState as useState5, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var GeojsonImport = ({ addFeature, ButtonComponent, FileIcon, SuccessIcon, FailureIcon, DeleteIcon }) => {
-  const [isGeoJSONValid, setIsGeoJSONValid] = useState5(true);
-  const [uploadStatus, setUploadStatus] = useState5("");
-  const [filesToUpload, setFilesToUpload] = useState5([]);
-  const [uploadedFiles, setUploadedFiles] = useState5([]);
-  const fileInputRef = useRef2(null);
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    const droppedFiles = Array.from(e.dataTransfer.files);
-    setFilesToUpload(droppedFiles);
-  };
-  const handleFileInputChange = () => {
-    const selectedFiles = Array.from(fileInputRef.current.files);
-    setFilesToUpload(selectedFiles);
-  };
-  const handleAddFeature = () => {
-    try {
-      filesToUpload.forEach((file) => {
-        const reader = new FileReader();
-        reader.onabort = () => handleError("File reading was aborted. Please try again.");
-        reader.onerror = () => handleError("File reading has failed. Please try again.");
-        reader.onload = () => {
-          const result = reader.result;
-          if (result) {
-            const jsonString = typeof result === "string" ? result : new TextDecoder().decode(result);
-            try {
-              const geojsonObject = JSON.parse(jsonString);
-              const featuresToAdd = Array.isArray(geojsonObject.features) ? geojsonObject.features.map((feature) => __spreadProps(__spreadValues({}, feature), {
-                isGeojson: true
-              })) : [__spreadProps(__spreadValues({}, geojsonObject), { isGeojson: true })];
-              featuresToAdd.forEach((featureToAdd) => {
-                addFeature([featureToAdd]);
-              });
-              setUploadStatus("Geojson added successfully");
-              setIsGeoJSONValid(true);
-              setUploadedFiles((prevFiles) => [
-                ...prevFiles,
-                { name: file.name }
-              ]);
-              setFilesToUpload([]);
-            } catch (error) {
-              console.error(error);
-              handleError("Upload failed. Invalid GeoJSON format.");
-            }
-          } else {
-            handleError("File reading result is null.");
-          }
-        };
-        reader.readAsText(file);
-      });
-    } catch (error) {
-      console.error(error);
-      handleError("File upload failed. Please try again.");
-    } finally {
-      setTimeout(() => {
-        setUploadStatus("");
-        setIsGeoJSONValid(true);
-      }, 2e3);
-    }
-  };
-  const handleError = (message) => {
-    setUploadStatus(message);
-    setIsGeoJSONValid(false);
-  };
-  const removeFile = () => {
-    setFilesToUpload([]);
-  };
-  return /* @__PURE__ */ jsxs2("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      marginTop: "10px"
-    },
-    onDragEnter: handleDragEnter,
-    onDragOver: handleDragOver,
-    onDrop: handleDrop,
-    children: [
-      /* @__PURE__ */ jsx5("h1", {
-        style: {
-          marginBottom: "10px",
-          fontWeight: "bold",
-          fontSize: "1.25rem"
-        },
-        children: "GeoJSON"
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center"
-        },
-        children: [
-          /* @__PURE__ */ jsxs2("div", {
-            style: {
-              border: "2px solid #519895",
-              borderRadius: "4px",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              padding: "10px",
-              cursor: "pointer",
-              marginLeft: "15px",
-              width: "300px",
-              height: "100px"
-            },
-            onClick: () => fileInputRef.current.click(),
-            children: [
-              /* @__PURE__ */ jsx5("input", {
-                type: "file",
-                ref: fileInputRef,
-                onChange: handleFileInputChange,
-                style: { display: "none" }
-              }),
-              /* @__PURE__ */ jsx5("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: filesToUpload.length > 0 ? /* @__PURE__ */ jsxs2("div", {
-                  style: {
-                    marginLeft: "10px",
-                    display: "flex",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx5("div", {
-                      style: {
-                        marginTop: "10px",
-                        overflow: "hidden",
-                        whiteSpace: "pre-wrap",
-                        textOverflow: "ellipsis",
-                        maxWidth: "200px"
-                      },
-                      children: filesToUpload[0].name
-                    }),
-                    /* @__PURE__ */ jsx5("div", {
-                      style: {
-                        color: "red",
-                        marginLeft: "10px",
-                        marginTop: "10px",
-                        cursor: "pointer"
-                      },
-                      onClick: removeFile,
-                      children: React4.cloneElement(DeleteIcon, { boxSize: 6 })
-                    })
-                  ]
-                }) : /* @__PURE__ */ jsx5(Fragment, {
-                  children: /* @__PURE__ */ jsx5("div", {
-                    children: "Drag 'n' drop GeoJSON file here, or click to select a file"
-                  })
-                })
-              })
-            ]
-          }),
-          React4.cloneElement(ButtonComponent, {
-            type: "button",
-            marginLeft: "30px",
-            style: { paddingLeft: "15px" },
-            onClick: handleAddFeature
-          })
-        ]
-      }),
-      uploadStatus && /* @__PURE__ */ jsxs2("div", {
-        style: {
-          fontWeight: "bold",
-          color: isGeoJSONValid ? "green" : "red",
-          marginTop: "10px",
-          display: "flex",
-          alignItems: "center"
-        },
-        children: [
-          isGeoJSONValid ? /* @__PURE__ */ jsx5("span", {
-            style: {
-              marginRight: "5px",
-              fontSize: "1.25rem"
-            },
-            children: React4.cloneElement(SuccessIcon, { boxSize: 6 })
-          }) : /* @__PURE__ */ jsx5("span", {
-            style: {
-              marginRight: "5px",
-              fontSize: "1.25rem",
-              color: "red"
-            },
-            children: React4.cloneElement(FailureIcon, { boxSize: 4 })
-          }),
-          uploadStatus
-        ]
-      }),
-      uploadedFiles.length > 0 && /* @__PURE__ */ jsxs2("div", {
-        style: {
-          marginTop: "10px",
-          paddingLeft: "15px"
-        },
-        children: [
-          /* @__PURE__ */ jsx5("div", {
-            style: {
-              fontSize: "sm"
-            },
-            children: "Added GeoJSONs:"
-          }),
-          /* @__PURE__ */ jsx5("ul", {
-            style: {
-              listStyleType: "none",
-              padding: "0"
-            },
-            children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs2("li", {
-              style: {
-                display: "flex",
-                alignItems: "center"
-              },
-              children: [
-                React4.cloneElement(FileIcon, { boxSize: 6, marginRight: 2 }),
-                /* @__PURE__ */ jsx5("div", {
-                  style: {
-                    marginTop: "10px",
-                    overflow: "hidden",
-                    whiteSpace: "pre-wrap",
-                    textOverflow: "ellipsis",
-                    maxWidth: "300px"
-                  },
-                  children: file.name
-                })
-              ]
-            }, index))
-          })
-        ]
-      })
-    ]
-  });
-};
-var geojson_default = GeojsonImport;
-
-// src/ModalImport/index.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function ModalImport({
-  ButtonComponent,
-  ModalComponent,
-  addFeature,
-  InputComponent,
-  ButtonComponentModal,
-  DeleteIcon,
-  LocationIcon,
-  FileIcon,
-  SuccessIcon,
-  FailureIcon
-}) {
-  const [isModalOpen, setIsModalOpen] = useState6(false);
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-  const handleOpenModal = () => {
-    setIsModalOpen(true);
-  };
-  return /* @__PURE__ */ jsxs3("div", {
-    style: { display: "flex" },
-    children: [
-      React5.cloneElement(ModalComponent, {
-        isOpen: isModalOpen,
-        onClose: handleModalClose,
-        nakshaImport: /* @__PURE__ */ jsx6(import_default, {
-          addFeature,
-          InputComponent,
-          ButtonComponent,
-          LocationIcon,
-          SuccessIcon,
-          FailureIcon
-        }),
-        geoJSONImport: /* @__PURE__ */ jsx6(geojson_default, {
-          addFeature,
-          ButtonComponent,
-          DeleteIcon,
-          FileIcon,
-          SuccessIcon,
-          FailureIcon
-        })
-      }),
-      React5.cloneElement(ButtonComponentModal, {
-        onClick: handleOpenModal,
-        type: "button"
-      })
-    ]
-  });
-}
-
-// src/index.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var NakshaGmapsDraw = React6.forwardRef(
-  ({
-    defaultViewState,
-    defaultDrawingMode,
-    data,
-    onDataChange,
-    gmapAccessToken,
-    isControlled,
-    isReadOnly,
-    isMultiple,
-    isImport,
-    isAutocomplete,
-    gmapRegion,
-    autoCompleteRegion,
-    mapStyle,
-    importInputComponent,
-    importButtonComponent,
-    autocompleteComponent,
-    showTrace,
-    traceButtonComponent,
-    maxZoom,
-    options,
-    importModalComponent,
-    isOpen,
-    onClose,
-    importButtonComponentModal,
-    importDeleteIcon,
-    importLocationIcon,
-    importFileIcon,
-    importSuccessIcon,
-    importFailureIcon
-  }, ref) => {
-    const mapRef = useRef4(null);
-    const [features, dispatch] = useReducer(featuresReducer, data);
-    const [isLoaded, setIsLoaded] = useState7();
-    const viewPort = useMemo(
-      () => mapboxToGmapsViewState(defaultViewState),
-      [defaultViewState]
-    );
-    const reloadFeatures = () => {
-      mapRef.current.state.map.data.forEach(function(feature) {
-        mapRef.current.state.map.data.remove(feature);
-      });
-      const fullGeoJson = toFullGeoJson(features);
-      if (fullGeoJson) {
-        fullGeoJson && mapRef.current.state.map.data.addGeoJson(fullGeoJson);
-        const bounds = calculateBounds(fullGeoJson);
-        bounds && mapRef.current.state.map.fitBounds(bounds);
-        if (maxZoom) {
-          google.maps.event.addListenerOnce(
-            mapRef.current.state.map,
-            "idle",
-            function() {
-              const z = mapRef.current.state.map.getZoom();
-              mapRef.current.state.map.setZoom(Math.min(maxZoom, z));
-            }
-          );
-        }
-      }
-    };
-    useEffect4(() => {
-      if (isLoaded) {
-        onDataChange && onDataChange(features);
-        if (ref) {
-          ref.current = { addFeature, replaceFeature };
-        }
-        reloadFeatures();
-      }
-    }, [isLoaded, features]);
-    useEffect4(() => {
-      if (isControlled && JSON.stringify(features) !== JSON.stringify(data)) {
-        dispatch({
-          action: ACTION_TYPES.REPLACE,
-          data
-        });
-      }
-    }, [data]);
-    const addFeature = (feature) => {
-      dispatch({ action: ACTION_TYPES.ADD, data: feature, isMultiple });
-    };
-    const replaceFeature = (feature) => {
-      dispatch({ action: ACTION_TYPES.REPLACE, data: [feature] });
-    };
-    const onFeatureAdded = (geometry) => {
-      const feature = geometryToGeoJsonFeature(geometry);
-      addFeature(feature);
-    };
-    const onClearFeatures = () => {
-      dispatch({ action: ACTION_TYPES.CLEAR });
-    };
-    const onMapLoaded = () => setIsLoaded(true);
-    return /* @__PURE__ */ jsx7(LoadScriptNext, {
-      googleMapsApiKey: gmapAccessToken,
-      region: gmapRegion,
-      libraries: isAutocomplete ? GMAPS_LIBRARIES.AUTOCOMPLETE : GMAPS_LIBRARIES.DEFAULT,
-      children: /* @__PURE__ */ jsxs4(Fragment2, {
-        children: [
-          /* @__PURE__ */ jsxs4("div", {
-            style: { display: "flex" },
-            children: [
-              isAutocomplete && /* @__PURE__ */ jsx7("div", {
-                style: { width: "500px" },
-                children: /* @__PURE__ */ jsx7(NakshaAutocomplete, {
-                  InputComponent: autocompleteComponent || /* @__PURE__ */ jsx7("input", {}),
-                  addFeature,
-                  gmapRegion: autoCompleteRegion != null ? autoCompleteRegion : gmapRegion
-                })
-              }),
-              /* @__PURE__ */ jsx7("div", {
-                style: { flex: "1" }
-              }),
-              /* @__PURE__ */ jsx7(ModalImport, {
-                ButtonComponent: importButtonComponent || /* @__PURE__ */ jsx7("button", {
-                  children: "add"
-                }),
-                ModalComponent: importModalComponent && React6.cloneElement(importModalComponent, { isOpen, onClose }),
-                InputComponent: importInputComponent || /* @__PURE__ */ jsx7("input", {}),
-                addFeature,
-                ButtonComponentModal: importButtonComponentModal || /* @__PURE__ */ jsx7("button", {
-                  children: "add"
-                }),
-                DeleteIcon: importDeleteIcon,
-                LocationIcon: importLocationIcon,
-                FileIcon: importFileIcon,
-                SuccessIcon: importSuccessIcon,
-                FailureIcon: importFailureIcon
-              })
-            ]
-          }),
-          showTrace && /* @__PURE__ */ jsx7(TraceLocation, {
-            TraceButtonComponent: traceButtonComponent || /* @__PURE__ */ jsx7("button", {
-              children: "trace"
-            }),
-            onFeatureAdded
-          }),
-          /* @__PURE__ */ jsxs4(GoogleMap, {
-            id: "naksha-gmaps-draw",
-            mapContainerStyle: mapStyle || { height: "100%", width: "100%" },
-            zoom: viewPort.zoom,
-            center: viewPort.center,
-            options: GMAP_OPTIONS,
-            ref: mapRef,
-            onLoad: onMapLoaded,
-            children: [
-              isMultiple && /* @__PURE__ */ jsx7(ClearFeatures, {
-                onClick: onClearFeatures
-              }),
-              !isReadOnly && /* @__PURE__ */ jsx7(Data, {
-                options: __spreadValues({
-                  controls: [
-                    GMAP_FEATURE_TYPES.POINT,
-                    GMAP_FEATURE_TYPES.POLYGON,
-                    GMAP_FEATURE_TYPES.LINESTRING
-                  ],
-                  drawingMode: defaultDrawingMode || GMAP_FEATURE_TYPES.POLYGON,
-                  featureFactory: onFeatureAdded
-                }, options || {})
-              })
-            ]
-          })
-        ]
-      })
-    });
-  }
-);
-export {
-  GMAP_FEATURE_TYPES,
-  NakshaGmapsDraw
-};