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

package/dist/esm/index.js

@@ -1 +1,888 @@
-import{GMAPS_LIBRARIES as he,mapboxToGmapsViewState as We}from"@biodiv-platform/naksha-commons";import{Data as Ve,GoogleMap as je,LoadScriptNext as He}from"@react-google-maps/api";import xe,{useEffect as Ee,useMemo as Ze,useReducer as Ke,useRef as qe,useState as Qe}from"react";import{GMAPS_AUTOCOMPLETE_FIELDS as Re}from"@biodiv-platform/naksha-commons";import{Autocomplete as Oe}from"@react-google-maps/api";import{useState as Fe}from"react";import Le from"@turf/bbox";var l={POINT:"Point",POLYGON:"Polygon",LINESTRING:"LineString",RECTANGLE:"Rectangle",RAW:"Raw",NONE:null},re={mapTypeControlOptions:{position:10}};var ae=t=>({type:l.POINT,properties:{id:new Date().getTime(),name:t.name,formatted_address:t.formatted_address},coordinates:Object.values(t.geometry.location.toJSON()).reverse()}),ie=t=>{let n=new Date().getTime();switch(t.getType()){case l.POINT:return{type:l.POINT,properties:{id:n},coordinates:Object.values(t.get().toJSON()).reverse()};case l.POLYGON:{let e=[],o=r=>e.push([r.lng(),r.lat()]);return t.forEachLatLng(o),e.push(e[0]),{type:l.POLYGON,properties:{id:n},coordinates:[e]}}case l.RAW:{let e=t.data;return e.push(e[0]),{type:l.POLYGON,properties:{id:n},coordinates:[e]}}case l.LINESTRING:{let e=[],o=r=>e.push([r.lng(),r.lat()]);return t.forEachLatLng(o),{type:l.LINESTRING,properties:{id:n},coordinates:e}}default:return null}},se=t=>{let n=(t||[]).filter(o=>o);return n.length===0?!1:{type:"FeatureCollection",features:n.map(o=>{if(Array.isArray(o)&&o.length>0&&o[0].isGeojson){let r=o[0];return{type:"Feature",properties:r.properties||{},geometry:r.geometry||null}}else return{type:"Feature",properties:{},geometry:o}})}},le=t=>{let n=Le(t);return{east:n[2],north:n[3],south:n[1],west:n[0]}};import{jsx as Ne}from"react/jsx-runtime";function H({InputComponent:t,addFeature:n,gmapRegion:e}){let[o,r]=Fe();return Ne(Oe,{onLoad:i=>{r(i)},fields:Re,onPlaceChanged:()=>{let i=ae(o==null?void 0:o.getPlace());n(i)},options:e?{componentRestrictions:{country:e}}:{},children:t})}import{jsx as W}from"react/jsx-runtime";var Ce={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:Ce,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 P={ADD:"add",CLEAR:"clear",REPLACE:"replace"};function pe(t,{action:n,data:e,isMultiple:o}){switch(n){case P.ADD:return o?[...t||[],e]:[e];case P.CLEAR:return[];case P.REPLACE:return e;default:return t}}import we,{useEffect as De,useState as ue}from"react";import{useState as ce,useEffect as be}from"react";var Ge={enableHighAccuracy:!1,timeout:1/0,maximumAge:0},de=(t,n=Ge)=>{let[e,o]=ce(),[r,d]=ce(),p=({coords:a})=>{o([a.longitude,a.latitude])},i=a=>{d(a.message)};return be(()=>{if(!navigator||!navigator.geolocation){d("Geolocation is not supported");return}let a=null;return t?a=navigator.geolocation.watchPosition(p,i,n):a&&navigator.geolocation.clearWatch(a),()=>a&&navigator.geolocation.clearWatch(a)},[n,t]),{position:e,error:r}};import{jsx as Me}from"react/jsx-runtime";function K({TraceButtonComponent:t,onFeatureAdded:n}){let[e,o]=ue([]),[r,d]=ue(!1),{position:p}=de(r);De(()=>{r&&p&&o([...e,p])},[r,p]);let i=()=>{r?(d(!1),n({getType:()=>l.RAW,data:[...e]}),o([])):d(!0)};return Me("div",{children:we.cloneElement(t,{onClick:i,isTracking:r})})}import ge,{useState as Ue}from"react";import z,{useRef as ke,useState as q}from"react";import{jsx as M,jsxs as J}from"react/jsx-runtime";var ze=({addFeature:t,InputComponent:n,ButtonComponent:e,LocationIcon:o,SuccessIcon:r,FailureIcon:d})=>{let p=ke(null),[i,a]=q(!0),[g,m]=q(""),[u,T]=q([]),L=()=>{var c,C,b;try{let E=(C=(c=p.current)==null?void 0:c.value)!=null?C:"";if(!E.trim()){a(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let G=(b=E.split(",").map(Number))==null?void 0:b.reverse();if(!R(G)){a(!1),m("Invalid Format. Enter Latitude, Longitude.");return}let h={type:l.POINT,properties:{id:new Date().getTime(),name:E,formatted_address:E},coordinates:G};t(h),T(k=>[...k,h]),p.current&&(p.current.value=""),a(!0),m("Point added successfully")}catch{a(!1)}finally{setTimeout(()=>{m(""),a(!0)},3e3)}},R=c=>Array.isArray(c)&&c.length===2&&!isNaN(c[0])&&!isNaN(c[1])&&typeof c[0]=="number"&&typeof c[1]=="number";return J("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start"},children:[M("h1",{style:{marginBottom:"10px",fontWeight:"bold",fontSize:"1.25rem"},children:"Point"}),J("div",{style:{display:"flex",alignItems:"center"},children:[z.cloneElement(n,{ref:p,width:"300px"}),z.cloneElement(e,{onClick:L,type:"button",marginLeft:"10px"})]}),g&&J("div",{style:{fontWeight:"bold",color:i?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[i?M("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:z.cloneElement(r,{boxSize:6})}):M("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:z.cloneElement(d,{boxSize:4})}),g]}),u.length>0&&J("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[M("div",{style:{fontSize:"sm"},children:"Added Points:"}),M("ul",{style:{listStyleType:"none",padding:"0"},children:u.map(c=>J("li",{style:{display:"flex",alignItems:"center",marginBottom:"5px"},children:[z.cloneElement(o,{boxSize:6,marginRight:2,color:"teal"}),M("span",{style:{overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:c.properties.name})]},c.properties.id))})]})]})},me=ze;import _,{useState as V,useRef as Je}from"react";import{Fragment as Be,jsx as y,jsxs as N}from"react/jsx-runtime";var _e=({addFeature:t,ButtonComponent:n,FileIcon:e,SuccessIcon:o,FailureIcon:r,DeleteIcon:d})=>{let[p,i]=V(!0),[a,g]=V(""),[m,u]=V([]),[T,L]=V([]),R=Je(null),c=s=>{s.preventDefault()},C=s=>{s.preventDefault()},b=s=>{s.preventDefault();let x=Array.from(s.dataTransfer.files);u(x)},E=()=>{let s=Array.from(R.current.files);u(s)},G=()=>{try{m.forEach(s=>{let x=new FileReader;x.onabort=()=>h("File reading was aborted. Please try again."),x.onerror=()=>h("File reading has failed. Please try again."),x.onload=()=>{let w=x.result;if(w){let j=typeof w=="string"?w:new TextDecoder().decode(w);try{let O=JSON.parse(j);(Array.isArray(O.features)?O.features.map(F=>({...F,isGeojson:!0})):[{...O,isGeojson:!0}]).forEach(F=>{t([F])}),g("Geojson added successfully"),i(!0),L(F=>[...F,{name:s.name}]),u([])}catch(O){console.error(O),h("Upload failed. Invalid GeoJSON format.")}}else h("File reading result is null.")},x.readAsText(s)})}catch(s){console.error(s),h("File upload failed. Please try again.")}finally{setTimeout(()=>{g(""),i(!0)},2e3)}},h=s=>{g(s),i(!1)},k=()=>{u([])};return N("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",marginTop:"10px"},onDragEnter:c,onDragOver:C,onDrop:b,children:[y("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:()=>R.current.click(),children:[y("input",{type:"file",ref:R,onChange:E,style:{display:"none"}}),y("div",{style:{display:"flex",alignItems:"center"},children:m.length>0?N("div",{style:{marginLeft:"10px",display:"flex",alignItems:"center"},children:[y("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"200px"},children:m[0].name}),y("div",{style:{color:"red",marginLeft:"10px",marginTop:"10px",cursor:"pointer"},onClick:k,children:_.cloneElement(d,{boxSize:6})})]}):y(Be,{children:y("div",{children:"Drag 'n' drop GeoJSON file here, or click to select a file"})})})]}),_.cloneElement(n,{type:"button",marginLeft:"30px",style:{paddingLeft:"15px"},onClick:G})]}),a&&N("div",{style:{fontWeight:"bold",color:p?"green":"red",marginTop:"10px",display:"flex",alignItems:"center"},children:[p?y("span",{style:{marginRight:"5px",fontSize:"1.25rem"},children:_.cloneElement(o,{boxSize:6})}):y("span",{style:{marginRight:"5px",fontSize:"1.25rem",color:"red"},children:_.cloneElement(r,{boxSize:4})}),a]}),T.length>0&&N("div",{style:{marginTop:"10px",paddingLeft:"15px"},children:[y("div",{style:{fontSize:"sm"},children:"Added GeoJSONs:"}),y("ul",{style:{listStyleType:"none",padding:"0"},children:T.map((s,x)=>N("li",{style:{display:"flex",alignItems:"center"},children:[_.cloneElement(e,{boxSize:6,marginRight:2}),y("div",{style:{marginTop:"10px",overflow:"hidden",whiteSpace:"pre-wrap",textOverflow:"ellipsis",maxWidth:"300px"},children:s.name})]},x))})]})]})},fe=_e;import{jsx as ye,jsxs as Ye}from"react/jsx-runtime";function Q({ButtonComponent:t,ModalComponent:n,addFeature:e,InputComponent:o,ButtonComponentModal:r,DeleteIcon:d,LocationIcon:p,FileIcon:i,SuccessIcon:a,FailureIcon:g}){let[m,u]=Ue(!1),T=()=>{u(!1)},L=()=>{u(!0)};return Ye("div",{style:{display:"flex"},children:[ge.cloneElement(n,{isOpen:m,onClose:T,nakshaImport:ye(me,{addFeature:e,InputComponent:o,ButtonComponent:t,LocationIcon:p,SuccessIcon:a,FailureIcon:g}),geoJSONImport:ye(fe,{addFeature:e,ButtonComponent:t,DeleteIcon:d,FileIcon:i,SuccessIcon:a,FailureIcon:g})}),ge.cloneElement(r,{onClick:L,type:"button"})]})}import{Fragment as Xe,jsx as f,jsxs as X}from"react/jsx-runtime";var zt=xe.forwardRef(({defaultViewState:t,defaultDrawingMode:n,data:e,onDataChange:o,gmapAccessToken:r,isControlled:d,isReadOnly:p,isMultiple:i,isImport:a,isAutocomplete:g,gmapRegion:m,autoCompleteRegion:u,mapStyle:T,importInputComponent:L,importButtonComponent:R,autocompleteComponent:c,showTrace:C,traceButtonComponent:b,maxZoom:E,options:G,importModalComponent:h,isOpen:k,onClose:s,importButtonComponentModal:x,importDeleteIcon:w,importLocationIcon:j,importFileIcon:O,importSuccessIcon:$,importFailureIcon:F},ee)=>{let A=qe(null),[B,U]=Ke(pe,e),[te,Ie]=Qe(),oe=Ze(()=>We(t),[t]),Se=()=>{A.current.state.map.data.forEach(function(D){A.current.state.map.data.remove(D)});let I=se(B);if(I){I&&A.current.state.map.data.addGeoJson(I);let D=le(I);D&&A.current.state.map.fitBounds(D),E&&google.maps.event.addListenerOnce(A.current.state.map,"idle",function(){let Pe=A.current.state.map.getZoom();A.current.state.map.setZoom(Math.min(E,Pe))})}};Ee(()=>{te&&(o&&o(B),ee&&(ee.current={addFeature:Y,replaceFeature:ve}),Se())},[te,B]),Ee(()=>{d&&JSON.stringify(B)!==JSON.stringify(e)&&U({action:P.REPLACE,data:e})},[e]);let Y=I=>{U({action:P.ADD,data:I,isMultiple:i})},ve=I=>{U({action:P.REPLACE,data:[I]})},ne=I=>{let D=ie(I);Y(D)},Te=()=>{U({action:P.CLEAR})},Ae=()=>Ie(!0);return f(He,{googleMapsApiKey:r,region:m,libraries:g?he.AUTOCOMPLETE:he.DEFAULT,children:X(Xe,{children:[X("div",{style:{display:"flex"},children:[g&&f("div",{style:{width:"500px"},children:f(H,{InputComponent:c||f("input",{}),addFeature:Y,gmapRegion:u!=null?u:m})}),f("div",{style:{flex:"1"}}),f(Q,{ButtonComponent:R||f("button",{children:"add"}),ModalComponent:h&&xe.cloneElement(h,{isOpen:k,onClose:s}),InputComponent:L||f("input",{}),addFeature:Y,ButtonComponentModal:x||f("button",{children:"add"}),DeleteIcon:w,LocationIcon:j,FileIcon:O,SuccessIcon:$,FailureIcon:F})]}),C&&f(K,{TraceButtonComponent:b||f("button",{children:"trace"}),onFeatureAdded:ne}),X(je,{id:"naksha-gmaps-draw",mapContainerStyle:T||{height:"100%",width:"100%"},zoom:oe.zoom,center:oe.center,options:re,ref:A,onLoad:Ae,children:[i&&f(Z,{onClick:Te}),!p&&f(Ve,{options:{controls:[l.POINT,l.POLYGON,l.LINESTRING],drawingMode:n||l.POLYGON,featureFactory:ne,...G||{}}})]})]})})});export{l as GMAP_FEATURE_TYPES,zt as NakshaGmapsDraw};
+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
+};