react-kakao-maps-sdk/dist/index.cjs

React components for using kakao map api

"use strict";var e=require("react"),t=require("react/jsx-runtime"),o=require("react-dom");const n="undefined"!=typeof window&&"undefined"!=typeof document?e.useLayoutEffect:e.useEffect,a=(e,t,o)=>{n((()=>{if(!e||!o)return;const n=function(){for(var t=arguments.length,n=new Array(t),a=0;a<t;a++)n[a]=arguments[a];return void 0===n?o(e):o(e,...n)};return kakao.maps.event.addListener(e,t,n),()=>{kakao.maps.event.removeListener(e,t,n)}}),[e,t,o])},r="__react-kakao-maps-sdk__";let s=function(e){return e[e.INITIALIZED=0]="INITIALIZED",e[e.LOADING=1]="LOADING",e[e.SUCCESS=2]="SUCCESS",e[e.FAILURE=3]="FAILURE",e}({});const i=`${r}_Loader`;class l{static loadEventCallback=new Set;callbacks=[];done=!1;loading=!1;errors=[];constructor(e){let{appkey:t,id:o=i,libraries:n=[],nonce:a,retries:r=3,url:u="//dapi.kakao.com/v2/maps/sdk.js"}=e;if(this.id=o,this.appkey=t,this.libraries=n,this.nonce=a,this.retries=r,this.url=u,l.instance&&!l.equalOptions(this.options,l.instance.options)&&!l.equalOptions(this.options,l.instance.options)){if(l.instance.status===s.FAILURE)throw new Error(`Loader must not be called again with different options. \n${JSON.stringify(this.options,null,2)}\n!==\n${JSON.stringify(l.instance.options,null,2)}`);l.instance.reset(),l.instance=this}return l.instance||(l.instance=this),l.instance}get options(){return{appkey:this.appkey,id:this.id,libraries:this.libraries,nonce:this.nonce,retries:this.retries,url:this.url}}static addLoadEventLisnter(e){return window.kakao&&window.kakao.maps&&window.kakao.maps.load(e),l.loadEventCallback.add(e),e}static removeLoadEventLisnter(e){return l.loadEventCallback.delete(e)}load(){return new Promise(((e,t)=>{this.loadCallback((o=>{o?t(o):e(window.kakao)}))}))}get status(){return this.onEvent?s.FAILURE:this.done?s.SUCCESS:this.loading?s.LOADING:s.INITIALIZED}get failed(){return this.done&&!this.loading&&this.errors.length>=this.retries+1}loadCallback(e){this.callbacks.push(e),this.execute()}resetIfRetryingFailed(){this.failed&&this.reset()}reset(){this.deleteScript(),this.done=!0,this.loading=!1,this.errors=[],this.onEvent=void 0}execute(){if(this.resetIfRetryingFailed(),this.done)this.callback();else{if(window.kakao&&window.kakao.maps)return console.warn("Kakao Maps이 이미 외부 요소에 의해 로딩되어 있습니다.설정한 옵션과 일치 하지 않을 수 있으며, 이에 따른 예상치 동작이 발생할 수 있습니다."),void window.kakao.maps.load(this.callback);this.loading||(this.loading=!0,this.setScript())}}setScript(){document.getElementById(this.id)&&this.callback();const e=this.createUrl(),t=document.createElement("script");t.id=this.id,t.type="text/javascript",t.src=e,t.onerror=this.loadErrorCallback.bind(this),t.onload=this.callback.bind(this),t.defer=!0,t.async=!0,this.nonce&&(t.nonce=this.nonce),document.head.appendChild(t)}loadErrorCallback(e){if(this.errors.push(e),this.errors.length<=this.retries){const e=this.errors.length*2**this.errors.length;console.log(`Failed to load Kakao Maps script, retrying in ${e} ms.`),setTimeout((()=>{this.deleteScript(),this.setScript()}),e)}else this.done=!0,this.loading=!1,this.onEvent=this.errors[this.errors.length-1],this.callbacks.forEach((e=>{e(this.onEvent)})),this.callbacks=[],l.loadEventCallback.forEach((e=>{e(this.onEvent)}))}createUrl(){let e=this.url;return e+=`?appkey=${this.appkey}`,this.libraries.length&&(e+=`&libraries=${this.libraries.join(",")}`),e+="&autoload=false",e}deleteScript(){const e=document.getElementById(this.id);e&&e.remove()}callback(){kakao.maps.load((()=>{l.instance.done=!0,l.instance.loading=!1,l.instance.callbacks.forEach((e=>{e(l.instance.onEvent)})),l.instance.callbacks=[],l.loadEventCallback.forEach((e=>{e(l.instance.onEvent)}))}))}static equalOptions(e,t){if(e.appkey!==t.appkey)return!1;if(e.id!==t.id)return!1;if(e.libraries.length!==t.libraries.length)return!1;for(let o=0;o<e.libraries.length;++o)if(e.libraries[o]!==t.libraries[o])return!1;return e.nonce===t.nonce&&(e.retries===t.retries&&e.url===t.url)}}const u=function(e,t){for(var o=arguments.length,a=new Array(o>2?o-2:0),r=2;r<o;r++)a[r-2]=arguments[r];n((()=>{e&&!a.every((e=>void 0===e))&&e[t].call(e,...a)}),[e,t,...a])},p=e.createContext(void 0),d=e.forwardRef((function(o,s){let{id:i,as:d,children:c,center:k,isPanto:m=!1,padding:f=32,disableDoubleClick:g,disableDoubleClickZoom:y,draggable:h,zoomable:w,keyboardShortcuts:v,level:C,maxLevel:L,minLevel:M,mapTypeId:x,projectionId:I,scrollwheel:b,tileAnimation:E,onBoundsChanged:O,onCenterChanged:S,onClick:R,onDoubleClick:P,onDrag:z,onDragEnd:A,onDragStart:T,onIdle:D,onMaptypeidChanged:j,onMouseMove:H,onRightClick:Z,onTileLoaded:W,onZoomChanged:_,onZoomStart:N,onCreate:F,...U}=o;const q=d||"div",[K,$]=e.useState(!1),[G,V]=e.useState(),B=e.useRef(null);return n((()=>{const e=l.addLoadEventLisnter((e=>$(!e)));return()=>{l.removeLoadEventLisnter(e)}}),[]),n((()=>{if(!K)return;const e=B.current;if(!e)return;const t="lat"in k?new kakao.maps.LatLng(k.lat,k.lng):new kakao.maps.Coords(k.x,k.y),o=new kakao.maps.Map(e,{center:t,disableDoubleClick:g,disableDoubleClickZoom:y,draggable:h,keyboardShortcuts:v,level:C,mapTypeId:"string"==typeof x?kakao.maps.MapTypeId[x]:x,projectionId:I,scrollwheel:b,tileAnimation:E});return V(o),()=>{e.innerHTML=""}}),[K,g,y,E]),e.useImperativeHandle(s,(()=>G),[G]),n((()=>{G&&F&&F(G)}),[G,F]),n((()=>{if(!G)return;let e=G.getCenter();e instanceof kakao.maps.Coords&&(e=e.toLatLng());const t="lat"in k?new kakao.maps.LatLng(k.lat,k.lng):new kakao.maps.Coords(k.x,k.y);t instanceof kakao.maps.LatLng&&t.equals(e)||t instanceof kakao.maps.Coords&&t.toLatLng().equals(e)||(m?G.panTo(t,f):G.setCenter(t))}),[G,k.lat,k.lng,k.x,k.y]),u(G,"setDraggable",h),u(G,"setZoomable",w),u(G,"setKeyboardShortcuts",v),u(G,"setLevel",C),u(G,"setMapTypeId",K?"string"==typeof x?kakao.maps.MapTypeId[x]:x:void 0),u(G,"setProjectionId",I),u(G,"setMinLevel",L),u(G,"setMaxLevel",M),a(G,"bounds_changed",O),a(G,"center_changed",S),a(G,"click",R),a(G,"dblclick",P),a(G,"drag",z),a(G,"dragstart",T),a(G,"dragend",A),a(G,"idle",D),a(G,"maptypeid_changed",j),a(G,"mousemove",H),a(G,"rightclick",Z),a(G,"tilesloaded",W),a(G,"zoom_changed",_),a(G,"zoom_start",N),t.jsxs(t.Fragment,{children:[t.jsx(q,{id:i||`${r}_Map`,...U,ref:B}),G&&t.jsx(p.Provider,{value:G,children:c})]})})),c=t=>{const o=e.useContext(p);if(!o)throw new Error((t?t+" Component":"useMap")+" must exist inside Map Component!");return o},k=e.forwardRef((function(t,n){let{map:a,position:r,marker:s,children:i,altitude:l,disableAutoPan:p,range:d,removable:c,zIndex:k,onCreate:m}=t;const f=e.useMemo((()=>{const e=document.createElement("div");e.style.display="none";return new kakao.maps.InfoWindow({altitude:l,disableAutoPan:p,range:d,removable:c,zIndex:k,content:e,position:r})}),[p,c]),g=e.useMemo((()=>f.getContent()),[f]);return e.useImperativeHandle(n,(()=>f),[f]),e.useLayoutEffect((()=>(f.open(a,s),()=>{f.close()})),[a,s]),e.useLayoutEffect((()=>{m&&m(f)}),[f,m]),u(f,"setPosition",r),u(f,"setAltitude",l),u(f,"setRange",d),u(f,"setZIndex",k),o.createPortal(i,g.parentElement??g)})),m=e.createContext(void 0),f=e.forwardRef((function(o,n){let{onClusterclick:r,onClusterdblclick:s,onClustered:i,onClusterout:l,onClusterover:p,onClusterrightclick:d,onCreate:k,...f}=o;const{children:y,averageCenter:h,calculator:w,clickable:v,disableClickZoom:C,gridSize:L,hoverable:M,minClusterSize:x,minLevel:I,styles:b,texts:E}=f,O=c("MarkerClusterer"),S=e.useMemo((()=>{if(window.kakao.maps.MarkerClusterer)return new kakao.maps.MarkerClusterer({averageCenter:h,calculator:w,clickable:v,disableClickZoom:C,gridSize:L,hoverable:M,minClusterSize:x,minLevel:I,styles:b,texts:E});console.warn("clusterer 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`")}),[]);return e.useImperativeHandle(n,(()=>S),[S]),e.useLayoutEffect((()=>{if(S)return S.setMap(O),()=>{S.setMap(null)}}),[O,S]),e.useLayoutEffect((()=>{S&&k&&k(S)}),[S,k]),u(S,"setGridSize",L),u(S,"setMinClusterSize",x),u(S,"setAverageCenter",h),u(S,"setMinLevel",I),u(S,"setTexts",E),u(S,"setCalculator",w),u(S,"setStyles",b),a(S,"clustered",i),a(S,"clusterclick",r),a(S,"clusterover",p),a(S,"clusterout",l),a(S,"clusterdblclick",s),a(S,"clusterrightclick",d),S?t.jsxs(m.Provider,{value:S,children:[y,t.jsx(g,{...f})]}):null})),g=()=>{const t=e.useContext(m);return n((()=>{t.redraw()})),null},y=e.forwardRef((function(o,n){let{map:r,position:s,children:i,altitude:l,clickable:p,draggable:d,image:c,infoWindowOptions:f,onCreate:g,onClick:y,onDragEnd:h,onDragStart:w,onMouseOut:v,onMouseOver:C,opacity:L,range:M,title:x,zIndex:I}=o;const b=e.useContext(m),E=e.useMemo((()=>c&&new kakao.maps.MarkerImage(c.src,new kakao.maps.Size(c.size.width,c.size.height),{alt:c.options?.alt,coords:c.options?.coords,offset:c.options?.offset&&new kakao.maps.Point(c.options?.offset.x,c.options?.offset.y),shape:c.options?.shape,spriteOrigin:c.options?.spriteOrigin&&new kakao.maps.Point(c.options?.spriteOrigin.x,c.options?.spriteOrigin.y),spriteSize:c.options?.spriteSize&&new kakao.maps.Size(c.options?.spriteSize.width,c.options?.spriteSize.height)})),[JSON.stringify(c)]),O=e.useMemo((()=>new kakao.maps.Marker({altitude:l,clickable:p,draggable:d,image:E,opacity:L,range:M,title:x,zIndex:I,position:s})),[]);return e.useImperativeHandle(n,(()=>O),[O]),e.useLayoutEffect((()=>b?(b.addMarker(O,!0),()=>b.removeMarker(O,!0)):(O.setMap(r),()=>O.setMap(null))),[r,b,O]),e.useLayoutEffect((()=>{g&&g(O)}),[O,g]),u(O,"setPosition",s),u(O,"setImage",E),u(O,"setAltitude",l),u(O,"setClickable",p),u(O,"setDraggable",d),u(O,"setOpacity",L),u(O,"setRange",M),u(O,"setTitle",x),u(O,"setZIndex",I),a(O,"click",y),a(O,"dragstart",w),a(O,"dragend",h),a(O,"mouseout",v),a(O,"mouseover",C),i?t.jsx(k,{position:s,map:r,marker:O,altitude:f?.altitude,disableAutoPan:f?.disableAutoPan,range:f?.range,removable:f?.removable,zIndex:f?.zIndex,children:i}):null})),h=e.forwardRef((function(o,n){let{position:a,...r}=o;const s=c("MapMarker"),i=e.useMemo((()=>"lat"in a?new kakao.maps.LatLng(a.lat,a.lng):new kakao.maps.Coords(a.x,a.y).toLatLng()),[a.lat,a.lng,a.x,a.y]);return t.jsx(y,{map:s,position:i,...r,ref:n})})),w=e.forwardRef((function(o,n){let{position:a,children:r,disableAutoPan:s,removable:i,zIndex:l,onCreate:u}=o;const p=c("MapInfoWindow"),d=e.useMemo((()=>new kakao.maps.LatLng(a.lat,a.lng)),[a.lat,a.lng]);return t.jsx(k,{disableAutoPan:s,removable:i,zIndex:l,map:p,position:d,onCreate:u,ref:n,children:r})})),v=e.forwardRef((function(t,n){let{position:a,children:r,clickable:s,xAnchor:i,yAnchor:l,zIndex:p,onCreate:d}=t;const k=e.useContext(m),f=c("CustomOverlayMap"),g=e.useMemo((()=>new kakao.maps.LatLng(a.lat,a.lng)),[a.lat,a.lng]),y=e.useMemo((()=>{const e=document.createElement("div");e.style.display="none";return new kakao.maps.CustomOverlay({clickable:s,xAnchor:i,yAnchor:l,zIndex:p,position:g,content:e})}),[s,i,l]),h=e.useMemo((()=>y.getContent()),[y]);return e.useImperativeHandle(n,(()=>y),[y]),e.useLayoutEffect((()=>{if(f)return k?k.addMarker(y,!0):y.setMap(f),()=>{k?k.removeMarker(y,!0):y.setMap(null)}}),[f,k,y]),e.useLayoutEffect((()=>{d&&d(y)}),[y,d]),u(y,"setPosition",g),u(y,"setZIndex",p),h.parentElement&&o.createPortal(r,h.parentElement)})),C=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.TOPRIGHT}=t;const a=c("MapTypeControl"),r="string"==typeof n?kakao.maps.ControlPosition[n]:n,s=e.useMemo((()=>new kakao.maps.MapTypeControl),[]);return e.useImperativeHandle(o,(()=>s),[s]),e.useLayoutEffect((()=>(a.addControl(s,r),()=>{a.removeControl(r)})),[a,s,r]),null})),L=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.RIGHT}=t;const a=c("ZoomControl"),r="string"==typeof n?kakao.maps.ControlPosition[n]:n,s=e.useMemo((()=>new kakao.maps.ZoomControl),[]);return e.useImperativeHandle(o,(()=>s),[s]),e.useLayoutEffect((()=>(a.addControl(s,r),()=>{a.removeControl(s)})),[a,r,s]),null})),M=e.forwardRef((function(t,o){let{center:n,radius:r,fillColor:s,fillOpacity:i,strokeColor:l,strokeOpacity:p,strokeStyle:d,strokeWeight:k,zIndex:m,onMouseover:f,onMouseout:g,onMousemove:y,onMousedown:h,onClick:w,onCreate:v}=t;const C=c("Circle"),L=e.useMemo((()=>new kakao.maps.LatLng(n.lat,n.lng)),[n.lat,n.lng]),M=e.useMemo((()=>new kakao.maps.Circle({center:L,radius:r,fillColor:s,fillOpacity:i,strokeColor:l,strokeOpacity:p,strokeStyle:d,strokeWeight:k,zIndex:m})),[]);return e.useImperativeHandle(o,(()=>M),[M]),e.useLayoutEffect((()=>(M.setMap(C),()=>{M.setMap(null)})),[C,M]),e.useLayoutEffect((()=>{v&&v(M)}),[M,v]),u(M,"setPosition",L),u(M,"setRadius",r),u(M,"setZIndex",m),e.useLayoutEffect((()=>{M.setOptions({fillColor:s,fillOpacity:i,strokeColor:l,strokeOpacity:p,strokeStyle:d,strokeWeight:k})}),[M,s,i,l,p,d,k]),a(M,"mouseover",f),a(M,"mouseout",g),a(M,"mousemove",y),a(M,"mousedown",h),a(M,"click",w),null})),x=e.forwardRef((function(t,o){let{path:n,endArrow:r,onClick:s,onMousedown:i,onMousemove:l,onMouseout:p,onMouseover:d,onCreate:k,strokeColor:m,strokeOpacity:f,strokeStyle:g,strokeWeight:y,zIndex:h}=t;const w=c("Polyline"),v=e.useMemo((()=>n.every((e=>e instanceof Array))?n.map((e=>e.map((e=>new kakao.maps.LatLng(e.lat,e.lng))))):n.map((e=>new kakao.maps.LatLng(e.lat,e.lng)))),[n]),C=e.useMemo((()=>new kakao.maps.Polyline({path:v,endArrow:r,strokeColor:m,strokeOpacity:f,strokeStyle:g,strokeWeight:y,zIndex:h})),[]);return e.useImperativeHandle(o,(()=>C),[C]),e.useLayoutEffect((()=>(C.setMap(w),()=>C.setMap(null))),[w,C]),e.useLayoutEffect((()=>{k&&k(C)}),[C,k]),e.useLayoutEffect((()=>{C.setOptions({endArrow:r,strokeColor:m,strokeOpacity:f,strokeStyle:g,strokeWeight:y})}),[C,r,m,f,g,y]),u(C,"setPath",v),u(C,"setZIndex",h),a(C,"mouseover",d),a(C,"mouseout",p),a(C,"mousemove",l),a(C,"mousedown",i),a(C,"click",s),null})),I=e.forwardRef((function(t,o){let{path:n,onClick:r,onMousedown:s,onMousemove:i,onMouseout:l,onMouseover:p,onCreate:d,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,fillColor:y,fillOpacity:h,zIndex:w}=t;const v=c("Polygon"),C=e.useMemo((()=>n.every((e=>e instanceof Array))?n.map((e=>e.map((e=>new kakao.maps.LatLng(e.lat,e.lng))))):n.map((e=>new kakao.maps.LatLng(e.lat,e.lng)))),[n]),L=e.useMemo((()=>new kakao.maps.Polygon({path:C,fillColor:y,fillOpacity:h,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,zIndex:w})),[]);return e.useImperativeHandle(o,(()=>L),[L]),e.useLayoutEffect((()=>(L.setMap(v),()=>L.setMap(null))),[v,L]),e.useLayoutEffect((()=>{d&&d(L)}),[L,d]),e.useLayoutEffect((()=>{L.setOptions({fillColor:y,fillOpacity:h,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g})}),[L,y,h,k,m,f,g]),u(L,"setPath",C),u(L,"setZIndex",w),a(L,"mouseover",p),a(L,"mouseout",l),a(L,"mousemove",i),a(L,"mousedown",s),a(L,"click",r),null})),b=e.forwardRef((function(t,o){let{bounds:n,onClick:r,onMousedown:s,onMousemove:i,onMouseout:l,onMouseover:p,onCreate:d,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,fillColor:y,fillOpacity:h,zIndex:w}=t;const v=c("Rectangle"),C=e.useMemo((()=>new kakao.maps.LatLngBounds(new kakao.maps.LatLng(n.sw.lat,n.sw.lng),new kakao.maps.LatLng(n.ne.lat,n.ne.lng))),[n]),L=e.useMemo((()=>new kakao.maps.Rectangle({bounds:C,fillColor:y,fillOpacity:h,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,zIndex:w})),[]);return e.useImperativeHandle(o,(()=>L),[L]),e.useLayoutEffect((()=>(L.setMap(v),()=>L.setMap(null))),[v,L]),e.useLayoutEffect((()=>{d&&d(L)}),[L,d]),e.useLayoutEffect((()=>{L.setOptions({fillColor:y,fillOpacity:h,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g})}),[L,y,h,k,m,f,g]),u(L,"setBounds",C),u(L,"setZIndex",w),a(L,"mouseover",p),a(L,"mouseout",l),a(L,"mousemove",i),a(L,"mousedown",s),a(L,"click",r),null})),E=e.forwardRef((function(t,o){let{center:n,rx:r,ry:s,fillColor:i,fillOpacity:l,strokeColor:p,strokeOpacity:d,strokeStyle:k,strokeWeight:m,zIndex:f,onMouseover:g,onMouseout:y,onMousemove:h,onMousedown:w,onClick:v,onCreate:C}=t;const L=c("Ellipse"),M=e.useMemo((()=>new kakao.maps.LatLng(n.lat,n.lng)),[n.lat,n.lng]),x=e.useMemo((()=>new kakao.maps.Ellipse({center:M,rx:r,ry:s,fillColor:i,fillOpacity:l,strokeColor:p,strokeOpacity:d,strokeStyle:k,strokeWeight:m,zIndex:f})),[]);return e.useImperativeHandle(o,(()=>x),[x]),e.useLayoutEffect((()=>(x.setMap(L),()=>{x.setMap(null)})),[L,x]),e.useLayoutEffect((()=>{C&&C(x)}),[x,C]),u(x,"setPosition",M),u(x,"setRadius",r,s),u(x,"setZIndex",f),e.useLayoutEffect((()=>{x.setOptions({fillColor:i,fillOpacity:l,strokeColor:p,strokeOpacity:d,strokeStyle:k,strokeWeight:m})}),[x,i,l,p,d,k,m]),a(x,"mouseover",g),a(x,"mouseout",y),a(x,"mousemove",h),a(x,"mousedown",w),a(x,"click",v),null})),O=e.forwardRef((function(t,o){let{draw:n,onAdd:a,onRemove:r,onCreate:s}=t;const i=c(),l=e.useMemo((()=>{class e extends kakao.maps.AbstractOverlay{constructor(e,t,o){super(),this.draw=e,this.onAdd=t,this.onRemove=o}}return new e(n,a,r)}),[n,a,r]);return e.useImperativeHandle(o,(()=>l),[l]),e.useLayoutEffect((()=>(l.setMap(i),()=>{l.setMap(null)})),[i,l]),e.useLayoutEffect((()=>{s&&s(l)}),[l,s]),null})),S=e.createContext(void 0),R=e.forwardRef((function(o,s){let{id:i,as:u,children:p,position:d,pan:c,panoId:k,panoX:m,panoY:f,tilt:g,zoom:y,onCreate:h,onInit:w,onPanoidChange:v,onPositionChanged:C,onViewpointChange:L,onErrorGetNearestPanoId:M,...x}=o;const I=u||"div",[b,E]=e.useState(!1),[O,R]=e.useState(!0),[P,z]=e.useState(),A=e.useRef(null);return n((()=>{const e=l.addLoadEventLisnter((e=>E(!e)));return()=>{l.removeLoadEventLisnter(e)}}),[]),n((()=>{if(!b)return;const e=A.current;if(!e)return;const t=new kakao.maps.Roadview(e,{pan:c,panoId:k,panoX:m,panoY:f,tilt:g,zoom:y});return z(t),()=>{e.innerHTML=""}}),[b,m,f,y]),e.useImperativeHandle(s,(()=>P),[P]),n((()=>{P&&h&&h(P)}),[P,h]),n((()=>{if(!P||k||P.getPosition().getLat()===d.lat&&P.getPosition().getLng()===d.lng)return;const e=new kakao.maps.LatLng(d.lat,d.lng);(new kakao.maps.RoadviewClient).getNearestPanoId(e,d.radius,(t=>{null===t&&M?M(P):P.setPanoId(t,e)}))}),[P,k,d.lat,d.lng,d.radius,M]),n((()=>{if(!P||!k||k===P.getPanoId()||P.getPosition().getLat()===d.lat&&P.getPosition().getLng()===d.lng)return;const e=new kakao.maps.LatLng(d.lat,d.lng);P.setPanoId(k,e)}),[P,k,d.lat,d.lng]),n((()=>{if(!P)return;const e=P.getViewpoint();e.pan===c&&e.tilt===g||(c&&(e.pan=c),g&&(e.tilt=g),P.setViewpoint(e))}),[P,c,g]),a(P,"init",(e=>{R(!1),w&&w(e)})),a(P,"panoid_changed",v),a(P,"viewpoint_changed",L),a(P,"position_changed",C),t.jsxs(t.Fragment,{children:[t.jsx(I,{ref:A,id:i||`${r}_Roadview`,...x}),P&&!O&&t.jsx(S.Provider,{value:P,children:p})]})})),P=t=>{const o=e.useContext(S);if(!o)throw new Error((t?t+" Component":"useRoadview")+" must exist inside Roadview Component!");return o},z=e.forwardRef((function(t,n){let{position:a,children:r,clickable:s,xAnchor:i,yAnchor:l,zIndex:p,altitude:d,range:c,onCreate:k}=t;const m=P("CustomOverlayRoadview"),f=e.useMemo((()=>"lat"in a?new kakao.maps.LatLng(a.lat,a.lng):new kakao.maps.Viewpoint(a.pan,a.tilt,a.zoom,a.panoId)),[a.lat,a.lng,a.pan,a.tilt,a.zoom,a.panoId]),g=e.useMemo((()=>{const e=document.createElement("div");e.style.display="none";return new kakao.maps.CustomOverlay({clickable:s,xAnchor:i,yAnchor:l,zIndex:p,position:f,content:e})}),[s,i,l]),y=e.useMemo((()=>g.getContent()),[g]);return e.useImperativeHandle(n,(()=>g),[g]),e.useLayoutEffect((()=>{if(m)return g.setMap(m),()=>{g.setMap(null)}}),[g,m]),e.useLayoutEffect((()=>{k&&k(g)}),[g,k]),u(g,"setPosition",f),u(g,"setZIndex",p),u(g,"setAltitude",d),u(g,"setRange",c),y.parentElement&&o.createPortal(r,y.parentElement)})),A=e.forwardRef((function(o,n){let{position:a,...r}=o;const s=P("RoadviewMarker"),i=e.useMemo((()=>"lat"in a?new kakao.maps.LatLng(a.lat,a.lng):"x"in a?new kakao.maps.Coords(a.x,a.y).toLatLng():new kakao.maps.Viewpoint(a.pan,a.tilt,a.zoom,a.panoId)),[a.lat,a.lng,a.x,a.y,a.pan,a.tilt,a.zoom,a?.panoId]);return t.jsx(y,{map:s,position:i,...r,ref:n})})),T=e.forwardRef((function(o,n){let{position:a,children:r,altitude:s,disableAutoPan:i,range:l,removable:u,zIndex:p,onCreate:d}=o;const c=P("RoadviewInfoWindow"),m=e.useMemo((()=>"lat"in a?new kakao.maps.LatLng(a.lat,a.lng):new kakao.maps.Viewpoint(a.pan,a.tilt,a.zoom,a.panoId)),[a.lat,a.lng,a.pan,a.tilt,a.zoom,a.panoId]);return t.jsx(k,{altitude:s,disableAutoPan:i,range:l,removable:u,zIndex:p,map:c,position:m,onCreate:d,ref:n,children:r})})),D=e.createContext(void 0);function j(t,o,n){e.useLayoutEffect((()=>{if(!t||!n)return;t.addListener(o,(function(){for(var e=arguments.length,o=new Array(e),a=0;a<e;a++)o[a]=arguments[a];return void 0===AbortSignal?n(t):n(t,...o)}))}),[n,t,o])}const H=e.forwardRef((function(o,n){let{arrowOptions:a,circleOptions:r,ellipseOptions:s,markerOptions:i,polygonOptions:l,polylineOptions:u,rectangleOptions:p,drawingMode:d,guideTooltip:k,onSelect:m,onDrawstart:f,onDraw:g,onDrawend:y,onDrawnext:h,onCancle:w,onRemove:v,onStateChanged:C,onCreate:L,children:M}=o;const x=c("Toolbox"),I=e.useMemo((()=>{if(window.kakao.maps.drawing)return new kakao.maps.drawing.DrawingManager({map:x,drawingMode:d,guideTooltip:k,arrowOptions:a,circleOptions:r,ellipseOptions:s,markerOptions:i,polygonOptions:l,polylineOptions:u,rectangleOptions:p});console.warn("drawing 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`")}),[]);return e.useImperativeHandle(n,(()=>I),[I]),e.useLayoutEffect((()=>{I&&L&&L(I)}),[I,L]),j(I,"select",m),j(I,"drawstart",f),j(I,"draw",g),j(I,"drawend",y),j(I,"drawnext",h),j(I,"cancel",w),j(I,"remove",v),j(I,"state_changed",C),I?t.jsx(D.Provider,{value:I,children:M}):null})),Z=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.TOP}=t;const a="string"==typeof n?kakao.maps.ControlPosition[n]:n,r=c("Toolbox"),s=e.useContext(D);if(!s)throw new Error("Toolbox must exist inside DrawingManager Component!`");const i=e.useMemo((()=>new kakao.maps.drawing.Toolbox({drawingManager:s})),[s]);return e.useImperativeHandle(o,(()=>i),[i]),e.useLayoutEffect((()=>{const e=i.getElement();return r.addControl(e,a),()=>{r.removeControl(e)}}),[r,i,a]),null})),W=e.forwardRef((function(o,a){let{as:r,id:s,center:i,marker:p,level:d,mapTypeId:c,onCreate:k,...m}=o;const f=r||"div",[g,y]=e.useState(!1),[h,w]=e.useState(),v=e.useRef(null);return n((()=>{const e=l.addLoadEventLisnter((e=>y(!e)));return()=>{l.removeLoadEventLisnter(e)}}),[]),n((()=>{if(!g)return;const e=v.current;if(!e)return;const t=Array.isArray(p)?p.map((e=>({...e,position:new kakao.maps.LatLng(e.position.lat,e.position.lng)}))):"object"==typeof p&&p.position?{...p,position:new kakao.maps.LatLng(p.position.lat,p.position.lng)}:p,o=new kakao.maps.StaticMap(e,{center:new kakao.maps.LatLng(i.lat,i.lng),level:d,mapTypeId:"string"==typeof c?kakao.maps.MapTypeId[c]:c,marker:t});return w(o),()=>{e.innerHTML=""}}),[g,JSON.stringify(p)]),e.useImperativeHandle(a,(()=>h),[h]),n((()=>{h&&k&&k(h)}),[h,k]),n((()=>{h&&h.setCenter(new kakao.maps.LatLng(i.lat,i.lng))}),[h,i.lat,i.lng]),u(h,"setLevel",d),u(h,"setMapTypeId",g?"string"==typeof c?kakao.maps.MapTypeId[c]:c:void 0),t.jsx(f,{id:s,...m,ref:v})})),_=t=>{const[o,n]=e.useState([!0,void 0]);return e.useEffect((()=>{new l({...t}).load().then((()=>n([!1,void 0]))).catch((e=>{n([!1,e])}))}),[JSON.stringify(t)]),o},N=_;exports.AbstractOverlay=O,exports.Circle=M,exports.CustomOverlayMap=v,exports.CustomOverlayRoadview=z,exports.DrawingManager=H,exports.DrawingManagerContext=D,exports.Ellipse=E,exports.KakaoMapContext=p,exports.KakaoMapMarkerClustererContext=m,exports.KakaoRoadviewContext=S,exports.Loader=l,exports.LoaderStatus=s,exports.Map=d,exports.MapInfoWindow=w,exports.MapMarker=h,exports.MapTypeControl=C,exports.MapTypeId=t=>{let{type:o}=t;const n=c("MapTypeId"),a="string"==typeof o?kakao.maps.MapTypeId[o]:o;return e.useLayoutEffect((()=>(n.addOverlayMapTypeId(a),()=>{n.removeOverlayMapTypeId(a)})),[n,a]),null},exports.MarkerClusterer=f,exports.Polygon=I,exports.Polyline=x,exports.Rectangle=b,exports.Roadview=R,exports.RoadviewInfoWindow=T,exports.RoadviewMarker=A,exports.StaticMap=W,exports.Toolbox=Z,exports.ZoomControl=L,exports.useInjectKakaoMapApi=N,exports.useKakaoLoader=_,exports.useMap=c,exports.useRoadview=P;