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])},c=e.createContext(void 0),d=e.forwardRef((function(o,s){let{id:i,as:d,children:p,center:k,isPanto:m=!1,padding:f=32,disableDoubleClick:g,disableDoubleClickZoom:y,draggable:w,zoomable:h,keyboardShortcuts:v,level:C,maxLevel:L,minLevel:M,mapTypeId:x,projectionId:E,scrollwheel:I,tileAnimation:b,onBoundsChanged:O,onCenterChanged:S,onClick:R,onDoubleClick:A,onDrag:_,onDragEnd:T,onDragStart:P,onIdle:z,onMaptypeidChanged:D,onMouseMove:H,onRightClick:j,onTileLoaded:Z,onZoomChanged:W,onZoomStart:V,onCreate:N,...K}=o;const G=d||"div",[q,B]=e.useState(!1),[U,F]=e.useState(),$=e.useRef(null);return n((()=>{const e=l.addLoadEventLisnter((e=>B(!e)));return()=>{l.removeLoadEventLisnter(e)}}),[]),n((()=>{if(!q)return;const e=$.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:w,keyboardShortcuts:v,level:C,mapTypeId:"string"==typeof x?kakao.maps.MapTypeId[x]:x,projectionId:E,scrollwheel:I,tileAnimation:b});return F(o),()=>{e.innerHTML=""}}),[q,g,y,b]),e.useImperativeHandle(s,(()=>U),[U]),n((()=>{U&&N&&N(U)}),[U,N]),n((()=>{if(!U)return;let e=U.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?U.panTo(t,f):U.setCenter(t))}),[U,k.lat,k.lng,k.x,k.y]),u(U,"setDraggable",w),u(U,"setZoomable",h),u(U,"setKeyboardShortcuts",v),u(U,"setLevel",C),u(U,"setMapTypeId",q?"string"==typeof x?kakao.maps.MapTypeId[x]:x:void 0),u(U,"setProjectionId",E),u(U,"setMinLevel",L),u(U,"setMaxLevel",M),a(U,"bounds_changed",O),a(U,"center_changed",S),a(U,"click",R),a(U,"dblclick",A),a(U,"drag",_),a(U,"dragstart",P),a(U,"dragend",T),a(U,"idle",z),a(U,"maptypeid_changed",D),a(U,"mousemove",H),a(U,"rightclick",j),a(U,"tilesloaded",Z),a(U,"zoom_changed",W),a(U,"zoom_start",V),t.jsxs(t.Fragment,{children:[t.jsx(G,{id:i||`${r}_Map`,...K,ref:$}),U&&t.jsx(c.Provider,{value:U,children:p})]})})),p=t=>{const o=e.useContext(c);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:c,range:d,removable:p,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:c,range:d,removable:p,zIndex:k,content:e,position:r})}),[c,p]),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)}));var m,f={exports:{}},g={};var y,w={};
/**
 * @license React
 * use-sync-external-store-shim.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */"production"===process.env.NODE_ENV?f.exports=function(){if(m)return g;m=1;var t=e,o="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},n=t.useState,a=t.useEffect,r=t.useLayoutEffect,s=t.useDebugValue;function i(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!o(e,n)}catch(e){return!0}}var l="undefined"==typeof window||void 0===window.document||void 0===window.document.createElement?function(e,t){return t()}:function(e,t){var o=t(),l=n({inst:{value:o,getSnapshot:t}}),u=l[0].inst,c=l[1];return r((function(){u.value=o,u.getSnapshot=t,i(u)&&c({inst:u})}),[e,o,t]),a((function(){return i(u)&&c({inst:u}),e((function(){i(u)&&c({inst:u})}))}),[e]),s(o),o};return g.useSyncExternalStore=void 0!==t.useSyncExternalStore?t.useSyncExternalStore:l,g}():f.exports=(y||(y=1,"production"!==process.env.NODE_ENV&&function(){function t(e){var t=e.getSnapshot;e=e.value;try{var o=t();return!n(e,o)}catch(e){return!0}}"undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var o=e,n="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},a=o.useState,r=o.useEffect,s=o.useLayoutEffect,i=o.useDebugValue,l=!1,u=!1,c="undefined"==typeof window||void 0===window.document||void 0===window.document.createElement?function(e,t){return t()}:function(e,c){l||void 0===o.startTransition||(l=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var d=c();if(!u){var p=c();n(d,p)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),u=!0)}var k=(p=a({inst:{value:d,getSnapshot:c}}))[0].inst,m=p[1];return s((function(){k.value=d,k.getSnapshot=c,t(k)&&m({inst:k})}),[e,d,c]),r((function(){return t(k)&&m({inst:k}),e((function(){t(k)&&m({inst:k})}))}),[e]),i(d),d};w.useSyncExternalStore=void 0!==o.useSyncExternalStore?o.useSyncExternalStore:c,"undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),w);var h=f.exports;const v=e.createContext(null),C=e.forwardRef((function(o,n){let{onClusterclick:r,onClusterdblclick:s,onClustered:i,onClusterout:l,onClusterover:c,onClusterrightclick:d,onCreate:k,...m}=o;const{children:f,averageCenter:g,calculator:y,clickable:w,disableClickZoom:h,gridSize:C,hoverable:M,minClusterSize:x,minLevel:E,styles:I,texts:b}=m,O=p("MarkerClusterer"),S=e.useMemo((()=>(()=>{let e=0;const t=new Set;return{getSnapshot:()=>e,subscribe:e=>(t.add(e),()=>t.delete(e)),requestRedraw:()=>{e+=1,t.forEach((e=>e()))},completeRedraw:()=>{e=0,t.forEach((e=>e()))}}})()),[]),R=e.useMemo((()=>{if(window.kakao.maps.MarkerClusterer)return new kakao.maps.MarkerClusterer({averageCenter:g,calculator:y,clickable:w,disableClickZoom:h,gridSize:C,hoverable:M,minClusterSize:x,minLevel:E,styles:I,texts:b});console.warn("clusterer 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`")}),[]),A=e.useMemo((()=>({addMarker:e=>{R?.addMarker(e,!0),S.requestRedraw()},removeMarker:e=>{R?.removeMarker(e,!0),S.requestRedraw()}})),[R,S]);return e.useImperativeHandle(n,(()=>R),[R]),e.useLayoutEffect((()=>{if(R)return R.setMap(O),()=>{R.setMap(null)}}),[O,R]),e.useLayoutEffect((()=>{R&&k&&k(R)}),[R,k]),u(R,"setGridSize",C),u(R,"setMinClusterSize",x),u(R,"setAverageCenter",g),u(R,"setMinLevel",E),u(R,"setTexts",b),u(R,"setCalculator",y),u(R,"setStyles",I),a(R,"clustered",i),a(R,"clusterclick",r),a(R,"clusterover",c),a(R,"clusterout",l),a(R,"clusterdblclick",s),a(R,"clusterrightclick",d),R?t.jsxs(v.Provider,{value:A,children:[f,t.jsx(L,{markerClusterer:R,redrawVersionStore:S})]}):null})),L=e=>{let{markerClusterer:t,redrawVersionStore:o}=e;const a=h.useSyncExternalStore(o.subscribe,o.getSnapshot,o.getSnapshot);return n((()=>{0!==a&&(t.redraw(),o.completeRedraw())}),[t,o,a]),null},M=e.forwardRef((function(o,n){let{map:r,position:s,children:i,altitude:l,clickable:c,draggable:d,image:p,infoWindowOptions:m,onCreate:f,onClick:g,onDragEnd:y,onDragStart:w,onMouseOut:h,onMouseOver:C,opacity:L,range:M,title:x,zIndex:E}=o;const I=e.useContext(v),b=e.useMemo((()=>p&&new kakao.maps.MarkerImage(p.src,new kakao.maps.Size(p.size.width,p.size.height),{alt:p.options?.alt,coords:p.options?.coords,offset:p.options?.offset&&new kakao.maps.Point(p.options?.offset.x,p.options?.offset.y),shape:p.options?.shape,spriteOrigin:p.options?.spriteOrigin&&new kakao.maps.Point(p.options?.spriteOrigin.x,p.options?.spriteOrigin.y),spriteSize:p.options?.spriteSize&&new kakao.maps.Size(p.options?.spriteSize.width,p.options?.spriteSize.height)})),[JSON.stringify(p)]),O=e.useMemo((()=>new kakao.maps.Marker({altitude:l,clickable:c,draggable:d,image:b,opacity:L,range:M,title:x,zIndex:E,position:s})),[]);return e.useImperativeHandle(n,(()=>O),[O]),e.useLayoutEffect((()=>I?(I.addMarker(O),()=>{I.removeMarker(O)}):(O.setMap(r),()=>O.setMap(null))),[r,I,O]),e.useLayoutEffect((()=>{f&&f(O)}),[O,f]),u(O,"setPosition",s),u(O,"setImage",b),u(O,"setAltitude",l),u(O,"setClickable",c),u(O,"setDraggable",d),u(O,"setOpacity",L),u(O,"setRange",M),u(O,"setTitle",x),u(O,"setZIndex",E),a(O,"click",g),a(O,"dragstart",w),a(O,"dragend",y),a(O,"mouseout",h),a(O,"mouseover",C),i?t.jsx(k,{position:s,map:r,marker:O,altitude:m?.altitude,disableAutoPan:m?.disableAutoPan,range:m?.range,removable:m?.removable,zIndex:m?.zIndex,children:i}):null})),x=e.forwardRef((function(o,n){let{position:a,...r}=o;const s=p("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(M,{map:s,position:i,...r,ref:n})})),E=e.forwardRef((function(o,n){let{position:a,children:r,disableAutoPan:s,removable:i,zIndex:l,onCreate:u}=o;const c=p("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:c,position:d,onCreate:u,ref:n,children:r})})),I=e.forwardRef((function(t,n){let{position:a,children:r,clickable:s,xAnchor:i,yAnchor:l,zIndex:c,onCreate:d}=t;const k=p("CustomOverlayMap"),m=e.useContext(v),f=e.useMemo((()=>new kakao.maps.LatLng(a.lat,a.lng)),[a.lat,a.lng]),g=e.useMemo((()=>{const e=document.createElement("div");e.style.display="none";return new kakao.maps.CustomOverlay({clickable:s,xAnchor:i,yAnchor:l,zIndex:c,position:f,content:e})}),[s,i,l]),y=e.useMemo((()=>g.getContent()),[g]);return e.useImperativeHandle(n,(()=>g),[g]),e.useLayoutEffect((()=>m?(m.addMarker(g),()=>{m.removeMarker(g)}):(g.setMap(k),()=>{g.setMap(null)})),[k,m,g]),e.useLayoutEffect((()=>{d&&d(g)}),[g,d]),u(g,"setPosition",f),u(g,"setZIndex",c),y.parentElement&&o.createPortal(r,y.parentElement)})),b=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.TOPRIGHT}=t;const a=p("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})),O=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.RIGHT}=t;const a=p("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})),S=e.forwardRef((function(t,o){let{center:n,radius:r,fillColor:s,fillOpacity:i,strokeColor:l,strokeOpacity:c,strokeStyle:d,strokeWeight:k,zIndex:m,onMouseover:f,onMouseout:g,onMousemove:y,onMousedown:w,onClick:h,onCreate:v}=t;const C=p("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:c,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:c,strokeStyle:d,strokeWeight:k})}),[M,s,i,l,c,d,k]),a(M,"mouseover",f),a(M,"mouseout",g),a(M,"mousemove",y),a(M,"mousedown",w),a(M,"click",h),null})),R=e.forwardRef((function(t,o){let{path:n,endArrow:r,onClick:s,onMousedown:i,onMousemove:l,onMouseout:c,onMouseover:d,onCreate:k,strokeColor:m,strokeOpacity:f,strokeStyle:g,strokeWeight:y,zIndex:w}=t;const h=p("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:w})),[]);return e.useImperativeHandle(o,(()=>C),[C]),e.useLayoutEffect((()=>(C.setMap(h),()=>C.setMap(null))),[h,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",w),a(C,"mouseover",d),a(C,"mouseout",c),a(C,"mousemove",l),a(C,"mousedown",i),a(C,"click",s),null})),A=e.forwardRef((function(t,o){let{path:n,onClick:r,onMousedown:s,onMousemove:i,onMouseout:l,onMouseover:c,onCreate:d,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,fillColor:y,fillOpacity:w,zIndex:h}=t;const v=p("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:w,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,zIndex:h})),[]);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:w,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g})}),[L,y,w,k,m,f,g]),u(L,"setPath",C),u(L,"setZIndex",h),a(L,"mouseover",c),a(L,"mouseout",l),a(L,"mousemove",i),a(L,"mousedown",s),a(L,"click",r),null})),_=e.forwardRef((function(t,o){let{bounds:n,onClick:r,onMousedown:s,onMousemove:i,onMouseout:l,onMouseover:c,onCreate:d,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,fillColor:y,fillOpacity:w,zIndex:h}=t;const v=p("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:w,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g,zIndex:h})),[]);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:w,strokeColor:k,strokeOpacity:m,strokeStyle:f,strokeWeight:g})}),[L,y,w,k,m,f,g]),u(L,"setBounds",C),u(L,"setZIndex",h),a(L,"mouseover",c),a(L,"mouseout",l),a(L,"mousemove",i),a(L,"mousedown",s),a(L,"click",r),null})),T=e.forwardRef((function(t,o){let{center:n,rx:r,ry:s,fillColor:i,fillOpacity:l,strokeColor:c,strokeOpacity:d,strokeStyle:k,strokeWeight:m,zIndex:f,onMouseover:g,onMouseout:y,onMousemove:w,onMousedown:h,onClick:v,onCreate:C}=t;const L=p("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:c,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:c,strokeOpacity:d,strokeStyle:k,strokeWeight:m})}),[x,i,l,c,d,k,m]),a(x,"mouseover",g),a(x,"mouseout",y),a(x,"mousemove",w),a(x,"mousedown",h),a(x,"click",v),null})),P=e.forwardRef((function(t,o){let{draw:n,onAdd:a,onRemove:r,onCreate:s}=t;const i=p(),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})),z=e.createContext(void 0),D=e.forwardRef((function(o,s){let{id:i,as:u,children:c,position:d,pan:p,panoId:k,panoX:m,panoY:f,tilt:g,zoom:y,onCreate:w,onInit:h,onPanoidChange:v,onPositionChanged:C,onViewpointChange:L,onErrorGetNearestPanoId:M,...x}=o;const E=u||"div",[I,b]=e.useState(!1),[O,S]=e.useState(!0),[R,A]=e.useState(),_=e.useRef(null);return n((()=>{const e=l.addLoadEventLisnter((e=>b(!e)));return()=>{l.removeLoadEventLisnter(e)}}),[]),n((()=>{if(!I)return;const e=_.current;if(!e)return;const t=new kakao.maps.Roadview(e,{pan:p,panoId:k,panoX:m,panoY:f,tilt:g,zoom:y});return A(t),()=>{e.innerHTML=""}}),[I,m,f,y]),e.useImperativeHandle(s,(()=>R),[R]),n((()=>{R&&w&&w(R)}),[R,w]),n((()=>{if(!R||k||R.getPosition().getLat()===d.lat&&R.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(R):R.setPanoId(t,e)}))}),[R,k,d.lat,d.lng,d.radius,M]),n((()=>{if(!R||!k||k===R.getPanoId()||R.getPosition().getLat()===d.lat&&R.getPosition().getLng()===d.lng)return;const e=new kakao.maps.LatLng(d.lat,d.lng);R.setPanoId(k,e)}),[R,k,d.lat,d.lng]),n((()=>{if(!R)return;const e=R.getViewpoint();e.pan===p&&e.tilt===g||(p&&(e.pan=p),g&&(e.tilt=g),R.setViewpoint(e))}),[R,p,g]),a(R,"init",(e=>{S(!1),h&&h(e)})),a(R,"panoid_changed",v),a(R,"viewpoint_changed",L),a(R,"position_changed",C),t.jsxs(t.Fragment,{children:[t.jsx(E,{id:i||`${r}_Roadview`,...x,ref:_}),R&&!O&&t.jsx(z.Provider,{value:R,children:c})]})})),H=t=>{const o=e.useContext(z);if(!o)throw new Error((t?t+" Component":"useRoadview")+" must exist inside Roadview Component!");return o},j=e.forwardRef((function(t,n){let{position:a,children:r,clickable:s,xAnchor:i,yAnchor:l,zIndex:c,altitude:d,range:p,onCreate:k}=t;const m=H("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:c,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",c),u(g,"setAltitude",d),u(g,"setRange",p),y.parentElement&&o.createPortal(r,y.parentElement)})),Z=e.forwardRef((function(o,n){let{position:a,...r}=o;const s=H("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(M,{map:s,position:i,...r,ref:n})})),W=e.forwardRef((function(o,n){let{position:a,children:r,altitude:s,disableAutoPan:i,range:l,removable:u,zIndex:c,onCreate:d}=o;const p=H("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:c,map:p,position:m,onCreate:d,ref:n,children:r})})),V=e.createContext(void 0);function N(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 K=e.forwardRef((function(o,n){let{arrowOptions:a,circleOptions:r,ellipseOptions:s,markerOptions:i,polygonOptions:l,polylineOptions:u,rectangleOptions:c,drawingMode:d,guideTooltip:k,onSelect:m,onDrawstart:f,onDraw:g,onDrawend:y,onDrawnext:w,onCancle:h,onRemove:v,onStateChanged:C,onCreate:L,children:M}=o;const x=p("Toolbox"),E=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:c});console.warn("drawing 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`")}),[]);return e.useImperativeHandle(n,(()=>E),[E]),e.useLayoutEffect((()=>{E&&L&&L(E)}),[E,L]),N(E,"select",m),N(E,"drawstart",f),N(E,"draw",g),N(E,"drawend",y),N(E,"drawnext",w),N(E,"cancel",h),N(E,"remove",v),N(E,"state_changed",C),E?t.jsx(V.Provider,{value:E,children:M}):null})),G=e.forwardRef((function(t,o){let{position:n=kakao.maps.ControlPosition.TOP}=t;const a="string"==typeof n?kakao.maps.ControlPosition[n]:n,r=p("Toolbox"),s=e.useContext(V);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})),q=e.forwardRef((function(o,a){let{as:r,id:s,center:i,marker:c,level:d,mapTypeId:p,onCreate:k,...m}=o;const f=r||"div",[g,y]=e.useState(!1),[w,h]=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(c)?c.map((e=>({...e,position:new kakao.maps.LatLng(e.position.lat,e.position.lng)}))):"object"==typeof c&&c.position?{...c,position:new kakao.maps.LatLng(c.position.lat,c.position.lng)}:c,o=new kakao.maps.StaticMap(e,{center:new kakao.maps.LatLng(i.lat,i.lng),level:d,mapTypeId:"string"==typeof p?kakao.maps.MapTypeId[p]:p,marker:t});return h(o),()=>{e.innerHTML=""}}),[g,JSON.stringify(c)]),e.useImperativeHandle(a,(()=>w),[w]),n((()=>{w&&k&&k(w)}),[w,k]),n((()=>{w&&w.setCenter(new kakao.maps.LatLng(i.lat,i.lng))}),[w,i.lat,i.lng]),u(w,"setLevel",d),u(w,"setMapTypeId",g?"string"==typeof p?kakao.maps.MapTypeId[p]:p:void 0),t.jsx(f,{id:s,...m,ref:v})})),B=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},U=B;exports.AbstractOverlay=P,exports.Circle=S,exports.CustomOverlayMap=I,exports.CustomOverlayRoadview=j,exports.DrawingManager=K,exports.DrawingManagerContext=V,exports.Ellipse=T,exports.KakaoMapContext=c,exports.KakaoMapMarkerClustererContext=v,exports.KakaoRoadviewContext=z,exports.Loader=l,exports.LoaderStatus=s,exports.Map=d,exports.MapInfoWindow=E,exports.MapMarker=x,exports.MapTypeControl=b,exports.MapTypeId=t=>{let{type:o}=t;const n=p("MapTypeId"),a="string"==typeof o?kakao.maps.MapTypeId[o]:o;return e.useLayoutEffect((()=>(n.addOverlayMapTypeId(a),()=>{n.removeOverlayMapTypeId(a)})),[n,a]),null},exports.MarkerClusterer=C,exports.Polygon=A,exports.Polyline=R,exports.Rectangle=_,exports.Roadview=D,exports.RoadviewInfoWindow=W,exports.RoadviewMarker=Z,exports.StaticMap=q,exports.Toolbox=G,exports.ZoomControl=O,exports.useInjectKakaoMapApi=U,exports.useKakaoLoader=B,exports.useMap=p,exports.useRoadview=H;