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

package/dist/index.js

@@ -1 +1,1073 @@
-import{GMAPS_LIBRARIES as xe,mapboxToGmapsViewState as We}from"@biodiv-platform/naksha-commons";import{Data as Be,GoogleMap as Ue,LoadScriptNext as Ye}from"@react-google-maps/api";import je,{useEffect as Ee,useMemo as He,useReducer as Ze,useRef as Ke,useState as qe}from"react";import{GMAPS_AUTOCOMPLETE_FIELDS as Ce}from"@biodiv-platform/naksha-commons";import{Autocomplete as Le}from"@react-google-maps/api";import{useState as Oe}from"react";import Ae from"@turf/bbox";var p={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},re={mapTypeControlOptions:{position:10}};var ie=t=>({type:p.POINT,properties:{id:new Date().getTime(),name:t.name,formatted_address:t.formatted_address},coordinates:Object.values(t.geometry.location.toJSON()).reverse()}),se=t=>{let o=new Date().getTime();switch(t.getType()){case p.POINT:return{type:p.POINT,properties:{id:o},coordinates:Object.values(t.get().toJSON()).reverse()};case p.POLYGON:{let e=[],a=n=>e.push([n.lng(),n.lat()]);return t.forEachLatLng(a),e.push(e[0]),{type:p.POLYGON,properties:{id:o},coordinates:[e]}}case p.RAW:{let e=t.data;return e.push(e[0]),{type:p.POLYGON,properties:{id:o},coordinates:[e]}}case p.LINESTRING:{let e=[],a=n=>e.push([n.lng(),n.lat()]);return t.forEachLatLng(a),{type:p.LINESTRING,properties:{id:o},coordinates:e}}default:return null}},le=t=>{let o=(t||[]).filter(a=>a);return o.length===0?!1:{type:"FeatureCollection",features:o.map(a=>{if(Array.isArray(a)&&a.length>0&&a[0].isGeojson){let n=a[0];return{type:"Feature",properties:n.properties||{},geometry:n.geometry||null}}else return{type:"Feature",properties:{},geometry:a}})}},pe=t=>{let o=Ae(t);return{east:o[2],north:o[3],south:o[1],west:o[0]}};import{jsx as Pe}from"react/jsx-runtime";function H({InputComponent:t,addFeature:o,gmapRegion:e}){let[a,n]=Oe();return Pe(Le,{onLoad:s=>{n(s)},fields:Ce,onPlaceChanged:()=>{let s=ie(a?.getPlace());o(s)},options:e?{componentRestrictions:{country:e}}:{},children:t})}import{jsx as W}from"react/jsx-runtime";var Ne={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 Z({onClick:t}){return W("button",{type:"button",title:"Clear",onClick:t,style:Ne,children:W("svg",{viewBox:"0 0 24 24",width:"12",height:"12",children:W("g",{fill:"#E53E3E",children:W("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"})})})})}var C={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function de(t,{action:o,data:e,isMultiple:a}){switch(o){case C.ADD:return a?[...t||[],e]:[e];case C.CLEAR:return[];case C.REPLACE:return e;default:return t}}import ue,{useEffect as we,useState as fe}from"react";import{useState as ce,useEffect as Fe}from"react";var Ge={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},me=(t,o=Ge)=>{let[e,a]=ce(),[n,c]=ce(),l=({coords:r})=>{a([r.longitude,r.latitude])},s=r=>{c(r.message)};return Fe(()=>{if(!navigator||!navigator.geolocation){c("Geolocation is not supported");return}let r=null;return t?r=navigator.geolocation.watchPosition(l,s,o):r&&navigator.geolocation.clearWatch(r),()=>r&&navigator.geolocation.clearWatch(r)},[o,t]),{position:e,error:n}};import{jsx as ge}from"react/jsx-runtime";function K({TraceButtonComponent:t,onFeatureAdded:o}){let[e,a]=fe([]),[n,c]=fe(!1),{position:l}=me(n);we(()=>{n&&l&&a([...e,l])},[n,l]);let s=()=>{n?(c(!1),o({getType:()=>p.RAW,data:[...e]}),a([])):c(!0)};return ge("div",{children:ue.isValidElement(t)?ue.cloneElement(t,{onClick:s,isTracking:n}):ge("button",{type:"button",onClick:s,style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid #ccc",background:n?"#e53e3e":"#fff",color:n?"#fff":"#333",cursor:"pointer"},children:n?"Stop Tracing":"Trace Location"})})}import U,{useState as Ve}from"react";import v,{useRef as ke,useState as q}from"react";import{jsx as R,jsxs as M}from"react/jsx-runtime";var De=({addFeature:t,InputComponent:o,ButtonComponent:e,LocationIcon:a,SuccessIcon:n,FailureIcon:c})=>{let l=ke(null),[s,r]=q(!0),[g,m]=q(""),[y,I]=q([]),b=()=>{try{let i=l.current?.value??"";if(!i.trim()){r(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let F=i.split(",").map(Number)?.reverse();if(!x(F)){r(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let G={type:p.POINT,properties:{id:new Date().getTime(),name:i,formatted_address:i},coordinates:F};t(G),I(w=>[...w,G]),l.current&&(l.current.value=""),r(!0),m("Point added successfully")}catch{r(!1)}finally{setTimeout(()=>{m(""),r(!0)},3e3)}},x=i=>Array.isArray(i)&&i.length===2&&!isNaN(i[0])&&!isNaN(i[1])&&typeof i[0]=="number"&&typeof i[1]=="number";return M("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[R("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),M("div",{style:{display:"flex",alignItems:"center"},children:[v.isValidElement(o)?v.cloneElement(o,{ref:l,width:"300px"}):R("input",{ref:l,style:{width:"300px"}}),v.isValidElement(e)?v.cloneElement(e,{onClick:b,type:"button",marginLeft:"10px"}):R("button",{type:"button",onClick:b,style:{marginLeft:"10px"},children:"Add"})]}),g&&M("div",{style:{fontWeight:"bold",color:s?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[s?R("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:v.isValidElement(n)?v.cloneElement(n,{boxSize:6}):"\u2713"}):R("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:v.isValidElement(c)?v.cloneElement(c,{boxSize:4}):"\u26A0"}),g]}),y.length>0&&M("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[R("div",{style:{fontSize:"sm"},children:"Added Points:"}),R("ul",{style:{listStyleType:"none",padding:"0"},children:y.map(i=>M("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[v.isValidElement(a)?v.cloneElement(a,{boxSize:6,marginRight:2,color:"teal"}):R("span",{style:{marginRight:"6px"},children:"\u{1F4CD}"}),R("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:i.properties.name})]},i.properties.id))})]})]})},ye=De;import S,{useState as B,useRef as Me}from"react";import{Fragment as Je,jsx as u,jsxs as N}from"react/jsx-runtime";var ze=({addFeature:t,ButtonComponent:o,FileIcon:e,SuccessIcon:a,FailureIcon:n,DeleteIcon:c})=>{let[l,s]=B(!0),[r,g]=B(""),[m,y]=B([]),[I,b]=B([]),x=Me(null),i=d=>{d.preventDefault()},F=d=>{d.preventDefault()},G=d=>{d.preventDefault();let h=Array.from(d.dataTransfer.files);y(h)},w=()=>{let d=Array.from(x.current.files);y(d)},z=()=>{try{m.forEach(d=>{let h=new FileReader;h.onabort=()=>L("File reading was aborted. Please try again."),h.onerror=()=>L("File reading has failed. Please try again."),h.onload=()=>{let k=h.result;if(k){let j=typeof k=="string"?k:new TextDecoder().decode(k);try{let O=JSON.parse(j);(Array.isArray(O.features)?O.features.map(P=>({...P,isGeojson:!0})):[{...O,isGeojson:!0}]).forEach(P=>{t([P])}),g("Geojson added successfully"),s(!0),b(P=>[...P,{name:d.name}]),y([])}catch(O){console.error(O),L("Upload failed. Invalid GeoJSON format.")}}else L("File reading result is null.")},h.readAsText(d)})}catch(d){console.error(d),L("File upload failed. Please try again.")}finally{setTimeout(()=>{g(""),s(!0)},2e3)}},L=d=>{g(d),s(!1)},$=()=>{y([])};return N("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:i,onDragOver:F,onDrop:G,children:[u("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"GeoJSON"}),N("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[N("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:()=>x.current.click(),children:[u("input",{type:"file",ref:x,onChange:w,style:{display:"none"}}),u("div",{style:{display:"flex",alignItems:"center"},children:m.length>0?N("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[u("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:m[0].name}),u("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:$,children:S.isValidElement(c)?S.cloneElement(c,{boxSize:6}):"\u2715"})]}):u(Je,{children:u("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),S.isValidElement(o)?S.cloneElement(o,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:z}):u("button",{type:"button",onClick:z,style:{marginLeft:"30px",padding:"6px 15px",cursor:"pointer"},children:"Add"})]}),r&&N("div",{style:{fontWeight:"bold",color:l?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[l?u("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:S.isValidElement(a)?S.cloneElement(a,{boxSize:6}):"\u2713"}):u("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:S.isValidElement(n)?S.cloneElement(n,{boxSize:4}):"\u26A0"}),r]}),I.length>0&&N("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[u("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),u("ul",{style:{listStyleType:"none",padding:"0"},children:I.map((d,h)=>N("li",{style:{display:"flex",alignItems:"center"},children:[S.isValidElement(e)?S.cloneElement(e,{boxSize:6,marginRight:2}):u("span",{style:{marginRight:"8px"},children:"\u{1F4C4}"}),u("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:d.name})]},h))})]})]})},he=ze;import{jsx as T,jsxs as Y}from"react/jsx-runtime";var _e=({isOpen:t,onClose:o,nakshaImport:e,geoJSONImport:a})=>t?T("div",{style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:99999},onClick:o,children:Y("div",{style:{background:"#fff",borderRadius:"8px",padding:"24px",maxWidth:"500px",width:"90%",maxHeight:"85vh",overflowY:"auto",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",position:"relative"},onClick:n=>n.stopPropagation(),children:[T("button",{type:"button",onClick:o,style:{position:"absolute",top:12,right:12,border:"none",background:"none",fontSize:"18px",cursor:"pointer"},children:"\u2715"}),T("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Import Data"}),Y("div",{style:{marginBottom:"20px"},children:[T("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import Coordinates"}),e]}),Y("div",{children:[T("h4",{style:{margin:"0 0 8px 0",fontSize:"14px",fontWeight:500},children:"Import GeoJSON"}),a]})]})}):null;function Q({ButtonComponent:t,ModalComponent:o,addFeature:e,InputComponent:a,ButtonComponentModal:n,DeleteIcon:c,LocationIcon:l,FileIcon:s,SuccessIcon:r,FailureIcon:g}){let[m,y]=Ve(!1),I=()=>{y(!1)},b=()=>{y(!0)},x=T(ye,{addFeature:e,InputComponent:a,ButtonComponent:t,LocationIcon:l,SuccessIcon:r,FailureIcon:g}),i=T(he,{addFeature:e,ButtonComponent:t,DeleteIcon:c,FileIcon:s,SuccessIcon:r,FailureIcon:g});return Y("div",{style:{display:"flex"},children:[U.isValidElement(o)?U.cloneElement(o,{isOpen:m,onClose:I,nakshaImport:x,geoJSONImport:i}):T(_e,{isOpen:m,onClose:I,nakshaImport:x,geoJSONImport:i}),U.isValidElement(n)?U.cloneElement(n,{onClick:b,type:"button"}):T("button",{type:"button",onClick:b,style:{padding:"6px 16px",backgroundColor:"#519895",color:"white",border:"none",borderRadius:"4px",cursor:"pointer"},children:"Import"})]})}import{Fragment as Qe,jsx as f,jsxs as X}from"react/jsx-runtime";var _t=je.forwardRef(({defaultViewState:t,defaultDrawingMode:o,data:e,onDataChange:a,gmapAccessToken:n,isControlled:c,isReadOnly:l,isMultiple:s,isImport:r,isAutocomplete:g,gmapRegion:m,autoCompleteRegion:y,mapStyle:I,importInputComponent:b,importButtonComponent:x,autocompleteComponent:i,showTrace:F,traceButtonComponent:G,maxZoom:w,options:z,importModalComponent:L,isOpen:$,onClose:d,importButtonComponentModal:h,importDeleteIcon:k,importLocationIcon:j,importFileIcon:O,importSuccessIcon:ee,importFailureIcon:P},te)=>{let A=Ke(null),[J,V]=Ze(de,e),[oe,ve]=qe(),ne=He(()=>We(t),[t]),Se=()=>{A.current.state.map.data.forEach(function(D){A.current.state.map.data.remove(D)});let E=le(J);if(E){E&&A.current.state.map.data.addGeoJson(E);let D=pe(E);D&&A.current.state.map.fitBounds(D),w&&google.maps.event.addListenerOnce(A.current.state.map,"idle",function(){let Te=A.current.state.map.getZoom();A.current.state.map.setZoom(Math.min(w,Te))})}};Ee(()=>{oe&&(a&&a(J),te&&(te.current={addFeature:_,replaceFeature:Ie}),Se())},[oe,J]),Ee(()=>{c&&JSON.stringify(J)!==JSON.stringify(e)&&V({action:C.REPLACE,data:e})},[e]);let _=E=>{V({action:C.ADD,data:E,isMultiple:s})},Ie=E=>{V({action:C.REPLACE,data:[E]})},ae=E=>{let D=se(E);_(D)},be=()=>{V({action:C.CLEAR})},Re=()=>ve(!0);return f(Ye,{googleMapsApiKey:n,region:m,libraries:g?xe.AUTOCOMPLETE:xe.DEFAULT,children:X(Qe,{children:[X("div",{style:{display:"flex"},children:[g&&f("div",{style:{width:"500px"},children:f(H,{InputComponent:i||f("input",{}),addFeature:_,gmapRegion:y??m})}),f("div",{style:{flex:"1"}}),r&&f(Q,{ButtonComponent:x||f("button",{children:"add"}),ModalComponent:L,InputComponent:b||f("input",{}),addFeature:_,ButtonComponentModal:h||f("button",{children:"Import"}),DeleteIcon:k,LocationIcon:j,FileIcon:O,SuccessIcon:ee,FailureIcon:P})]}),F&&f(K,{TraceButtonComponent:G||f("button",{children:"trace"}),onFeatureAdded:ae}),X(Ue,{id:"naksha-gmaps-draw",mapContainerStyle:I||{height:"100%",width:"100%"},zoom:ne.zoom,center:ne.center,options:re,ref:A,onLoad:Re,children:[s&&f(Z,{onClick:be}),!l&&f(Be,{options:{controls:[p.POINT,p.POLYGON,p.LINESTRING],drawingMode:o||p.POLYGON,featureFactory:ae,...z||{}}})]})]})})});export{p as GMAP_FEATURE_TYPES,_t as NakshaGmapsDraw};
+// 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 useEffect3, useMemo, useReducer, useRef as useRef3, 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: (/* @__PURE__ */ new Date()).getTime(),
+      name: place.name,
+      formatted_address: place.formatted_address
+    },
+    coordinates: Object.values(place.geometry.location.toJSON()).reverse()
+  };
+};
+var geometryToGeoJsonFeature = (geometry) => {
+  const id = (/* @__PURE__ */ 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?.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.isValidElement(TraceButtonComponent) ? React2.cloneElement(TraceButtonComponent, {
+    onClick: handleOnTraceAction,
+    isTracking
+  }) : /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: handleOnTraceAction,
+      style: {
+        padding: "6px 12px",
+        borderRadius: "4px",
+        border: "1px solid #ccc",
+        background: isTracking ? "#e53e3e" : "#fff",
+        color: isTracking ? "#fff" : "#333",
+        cursor: "pointer"
+      },
+      children: isTracking ? "Stop Tracing" : "Trace Location"
+    }
+  ) });
+}
+
+// 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 = () => {
+    try {
+      const txtLatLng = importInputRef.current?.value ?? "";
+      if (!txtLatLng.trim()) {
+        setIsPointsValid(false);
+        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
+        return;
+      }
+      const numLatLng = txtLatLng.split(",").map(Number)?.reverse();
+      if (!isValidLatLng(numLatLng)) {
+        setIsPointsValid(false);
+        setUploadStatus("Invalid Format. Enter Latitude, Longitude.");
+        return;
+      }
+      const newFeature = {
+        type: GMAP_FEATURE_TYPES.POINT,
+        properties: {
+          id: (/* @__PURE__ */ 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.isValidElement(InputComponent) ? React3.cloneElement(InputComponent, {
+            ref: importInputRef,
+            width: "300px"
+          }) : /* @__PURE__ */ jsx4("input", { ref: importInputRef, style: { width: "300px" } }),
+          React3.isValidElement(ButtonComponent) ? React3.cloneElement(ButtonComponent, {
+            onClick: handleOnAddFeature,
+            type: "button",
+            marginLeft: "10px"
+          }) : /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: handleOnAddFeature,
+              style: { marginLeft: "10px" },
+              children: "Add"
+            }
+          )
+        ] }),
+        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.isValidElement(SuccessIcon) ? React3.cloneElement(SuccessIcon, { boxSize: 6 }) : "\u2713" }) : /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  style: { marginRight: "5px", fontSize: "1.25rem", color: "red" },
+                  children: React3.isValidElement(FailureIcon) ? React3.cloneElement(FailureIcon, { boxSize: 4 }) : "\u26A0"
+                }
+              ),
+              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.isValidElement(LocationIcon) ? React3.cloneElement(LocationIcon, {
+                  boxSize: 6,
+                  marginRight: 2,
+                  color: "teal"
+                }) : /* @__PURE__ */ jsx4("span", { style: { marginRight: "6px" }, children: "\u{1F4CD}" }),
+                /* @__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) => ({
+                ...feature,
+                isGeojson: true
+              })) : [{ ...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.isValidElement(DeleteIcon) ? React4.cloneElement(DeleteIcon, { boxSize: 6 }) : "\u2715"
+                                }
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5("div", { children: "Drag 'n' drop GeoJSON file here, or click to select a file" }) })
+                      }
+                    )
+                  ]
+                }
+              ),
+              React4.isValidElement(ButtonComponent) ? React4.cloneElement(ButtonComponent, {
+                type: "button",
+                marginLeft: "30px",
+                style: { paddingLeft: "15px" },
+                onClick: handleAddFeature
+              }) : /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAddFeature,
+                  style: {
+                    marginLeft: "30px",
+                    padding: "6px 15px",
+                    cursor: "pointer"
+                  },
+                  children: "Add"
+                }
+              )
+            ]
+          }
+        ),
+        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.isValidElement(SuccessIcon) ? React4.cloneElement(SuccessIcon, { boxSize: 6 }) : "\u2713"
+                }
+              ) : /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  style: {
+                    marginRight: "5px",
+                    fontSize: "1.25rem",
+                    color: "red"
+                  },
+                  children: React4.isValidElement(FailureIcon) ? React4.cloneElement(FailureIcon, { boxSize: 4 }) : "\u26A0"
+                }
+              ),
+              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.isValidElement(FileIcon) ? React4.cloneElement(FileIcon, { boxSize: 6, marginRight: 2 }) : /* @__PURE__ */ jsx5("span", { style: { marginRight: "8px" }, children: "\u{1F4C4}" }),
+                        /* @__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";
+var DefaultModal = ({ isOpen, onClose, nakshaImport, geoJSONImport }) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 99999
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: "8px",
+            padding: "24px",
+            maxWidth: "500px",
+            width: "90%",
+            maxHeight: "85vh",
+            overflowY: "auto",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            position: "relative"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: {
+                  position: "absolute",
+                  top: 12,
+                  right: 12,
+                  border: "none",
+                  background: "none",
+                  fontSize: "18px",
+                  cursor: "pointer"
+                },
+                children: "\u2715"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "h3",
+              {
+                style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 },
+                children: "Import Data"
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "20px" }, children: [
+              /* @__PURE__ */ jsx6(
+                "h4",
+                {
+                  style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 500 },
+                  children: "Import Coordinates"
+                }
+              ),
+              nakshaImport
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx6(
+                "h4",
+                {
+                  style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 500 },
+                  children: "Import GeoJSON"
+                }
+              ),
+              geoJSONImport
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+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);
+  };
+  const nakshaImport = /* @__PURE__ */ jsx6(
+    import_default,
+    {
+      addFeature,
+      InputComponent,
+      ButtonComponent,
+      LocationIcon,
+      SuccessIcon,
+      FailureIcon
+    }
+  );
+  const geoJSONImport = /* @__PURE__ */ jsx6(
+    geojson_default,
+    {
+      addFeature,
+      ButtonComponent,
+      DeleteIcon,
+      FileIcon,
+      SuccessIcon,
+      FailureIcon
+    }
+  );
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
+    React5.isValidElement(ModalComponent) ? React5.cloneElement(ModalComponent, {
+      isOpen: isModalOpen,
+      onClose: handleModalClose,
+      nakshaImport,
+      geoJSONImport
+    }) : /* @__PURE__ */ jsx6(
+      DefaultModal,
+      {
+        isOpen: isModalOpen,
+        onClose: handleModalClose,
+        nakshaImport,
+        geoJSONImport
+      }
+    ),
+    React5.isValidElement(ButtonComponentModal) ? React5.cloneElement(ButtonComponentModal, {
+      onClick: handleOpenModal,
+      type: "button"
+    }) : /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenModal,
+        style: {
+          padding: "6px 16px",
+          backgroundColor: "#519895",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer"
+        },
+        children: "Import"
+      }
+    )
+  ] });
+}
+
+// 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 = useRef3(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));
+            }
+          );
+        }
+      }
+    };
+    useEffect3(() => {
+      if (isLoaded) {
+        onDataChange && onDataChange(features);
+        if (ref) {
+          ref.current = { addFeature, replaceFeature };
+        }
+        reloadFeatures();
+      }
+    }, [isLoaded, features]);
+    useEffect3(() => {
+      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 ?? gmapRegion
+              }
+            ) }),
+            /* @__PURE__ */ jsx7("div", { style: { flex: "1" } }),
+            isImport && /* @__PURE__ */ jsx7(
+              ModalImport,
+              {
+                ButtonComponent: importButtonComponent || /* @__PURE__ */ jsx7("button", { children: "add" }),
+                ModalComponent: importModalComponent,
+                InputComponent: importInputComponent || /* @__PURE__ */ jsx7("input", {}),
+                addFeature,
+                ButtonComponentModal: importButtonComponentModal || /* @__PURE__ */ jsx7("button", { children: "Import" }),
+                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: {
+                      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
+};