@mint-ui/map 0.5.5-beta → 0.5.7-beta

package/dist/index.umd.js

@@ -365,9 +365,30 @@
       return false;
     };
 
-    PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
-      var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
-      return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+    PolygonCalculator.simplifyPoints = function (polygon, tolerance, _lastRepeated) {
+      return this.simplify(this.pathCleaning(polygon), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+    };
+
+    PolygonCalculator.pathCleaning = function (polygon) {
+      if (polygon.length < 3) {
+        return polygon;
+      }
+
+      var main = polygon[0];
+      var delCount = 0;
+
+      for (var i = polygon.length - 1; i >= 0; i--) {
+        if (main.equals(polygon[i])) {
+          delCount += 1;
+        } else {
+          break;
+        }
+      }
+
+      delCount > 0 && polygon.splice(polygon.length - delCount, delCount);
+      var out = [];
+      out.push.apply(out, polygon);
+      return out;
     };
 
     PolygonCalculator.simplify = function (points, tolerance) {
@@ -378,8 +399,10 @@
       var dMax = 0;
       var index = 0; // Find the point with the maximum distance from the line segment
 
+      var denominator = this.perpendicularDistanceDenominator(points[0], points[points.length - 1]);
+
       for (var i = 1; i < points.length - 1; i++) {
-        var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
+        var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1], denominator);
 
         if (d > dMax) {
           dMax = d;
@@ -397,19 +420,25 @@
         // If the maximum distance is less than or equal to the tolerance, return the endpoints
         return [points[0], points[points.length - 1]];
       }
+    };
+
+    PolygonCalculator.perpendicularDistanceDenominator = function (lineStart, lineEnd) {
+      var x1 = lineStart.x,
+          y1 = lineStart.y;
+      var x2 = lineEnd.x,
+          y2 = lineEnd.y;
+      return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
     }; // Calculate the perpendicular distance from a point to a line segment
 
 
-    PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
+    PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd, denominator) {
       var x = point.x;
       var y = point.y;
       var x1 = lineStart.x;
       var y1 = lineStart.y;
       var x2 = lineEnd.x;
       var y2 = lineEnd.y;
-      var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
-      var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
-      return numerator / denominator;
+      return Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1) / denominator;
     };
 
     PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
@@ -448,23 +477,23 @@
     return PolygonCalculator;
   }();
 
-  /**
-   * 좌표값
-   * @description 위도/경도, DOM 상의 X/Y 좌표
+  /**
+   * 좌표값
+   * @description 위도/경도, DOM 상의 X/Y 좌표
    */
 
   var Position =
   /** @class */
   function () {
     function Position(lat, lng) {
-      /**
-       * 위도
-       * @description 위도(latitude)
+      /**
+       * 위도
+       * @description 위도(latitude)
        */
       this.lat = 0;
-      /**
-       * 경도
-       * @description 경도(longitude)
+      /**
+       * 경도
+       * @description 경도(longitude)
        */
 
       this.lng = 0;
@@ -572,15 +601,15 @@
 
     return Bounds;
   }();
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
 
   var Offset =
   /** @class */
   function () {
-    /**
-     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+    /**
+     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
      */
     function Offset(x, y) {
       this.x = x;
@@ -707,6 +736,309 @@
     }));
   }
 
+  var AnimationPlayer =
+  /** @class */
+  function () {
+    function AnimationPlayer(drawFunction, fps) {
+      this.prevtime = 0;
+      this.elapsedTime = 0;
+      this.fps = null;
+      this.baseDrawGapTime = null;
+      this.deltaTime = 0;
+      this.playing = false;
+      this.draw = drawFunction;
+      this.fps = fps || null;
+
+      if (fps !== undefined) {
+        this.baseDrawGapTime = 1000 / fps;
+      }
+
+      this.init();
+    }
+
+    AnimationPlayer.prototype.init = function () {
+      this.deltaTime = 0;
+      this.prevtime = 0;
+      this.elapsedTime = 0;
+      this.playing = false;
+    };
+
+    AnimationPlayer.prototype.start = function () {
+      this.init();
+      this.resume();
+    };
+
+    AnimationPlayer.prototype.stop = function () {
+      this.playing = false;
+    };
+
+    AnimationPlayer.prototype.resume = function () {
+      this.playing = true; //@ts-ignore
+
+      window.requestAnimationFrame(this.makeFrame.bind(this));
+    };
+
+    AnimationPlayer.prototype.makeFrame = function (timestamp) {
+      //frame 간 시간 변화
+      if (this.prevtime === 0) {
+        this.prevtime = timestamp;
+      }
+
+      this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
+
+      this.prevtime = timestamp;
+
+      if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
+        //다음 루프 준비
+        this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
+
+        var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
+
+        this.deltaTime = 0;
+
+        if (stopFlag) {
+          this.stop();
+        }
+      }
+
+      if (this.playing) {
+        //@ts-ignore
+        window.requestAnimationFrame(this.makeFrame.bind(this));
+      }
+    };
+
+    return AnimationPlayer;
+  }();
+
+  function waiting(evaluation, timeoutSeconds) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var max;
+      return tslib.__generator(this, function (_a) {
+        max = (timeoutSeconds || 5) * 1000;
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
+          var start = new Date().getTime();
+          var inter = setInterval(function () {
+            //타임아웃 체크
+            var time = new Date().getTime();
+
+            if (time - start > max) {
+              clearInterval(inter);
+              resolve(false);
+              return;
+            } //평가식 체크
+
+
+            if (evaluation()) {
+              clearInterval(inter);
+              resolve(true);
+            }
+          }, 100);
+        })];
+      });
+    });
+  }
+
+  var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
+    var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
+
+
+    var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
+    var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
+
+    var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
+    var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
+    var boundsPos = [];
+    var tempX1, tempY1, tempX2, tempY2;
+
+    for (var i = 0; i < rowCount; i++) {
+      tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
+      tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
+      var rows = [];
+      boundsPos.push(rows);
+
+      for (var k = 0; k < colCount; k++) {
+        tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
+        tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
+        var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
+        var includedList = thisBounds.getIncludedPositions(itemList);
+        rows.push({
+          bounds: thisBounds,
+          checked: false,
+          center: false,
+          centerPosition: thisBounds.getCenter(),
+          incList: [],
+          itemList: includedList,
+          size: basePixelSize
+        });
+      }
+    } //좌표마다 검사해서 인접셀 병합 처리
+
+
+    var centerList = [];
+    var totalItemCount = 0;
+    var min;
+    var max;
+
+    for (var i = 0; i < boundsPos.length; i++) {
+      for (var k = 0; k < boundsPos[i].length; k++) {
+        var curr = boundsPos[i][k];
+        if (curr.checked) continue;
+        curr.checked = true; //현재기준 8방향 객체 모으기
+
+        var incList = [];
+
+        if (boundsPos[i]) {
+          boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
+          boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
+        }
+
+        if (boundsPos[i - 1]) {
+          boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
+          boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
+          boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
+        }
+
+        if (boundsPos[i + 1]) {
+          boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
+          boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
+          boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
+        }
+
+        for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
+          var inc = incList_1[_i];
+          if (inc.checked) continue;
+          inc.checked = true;
+
+          if (inc.itemList && inc.itemList.length > 0) {
+            curr.incList.push(inc);
+
+            (_a = curr.itemList).push.apply(_a, inc.itemList);
+
+            curr.center = true;
+          }
+        }
+
+        if (curr.center) {
+          centerList.push(curr);
+          var avrLat = calculateAverage(curr.itemList.map(function (item) {
+            return item.lat;
+          }));
+          var avrLng = calculateAverage(curr.itemList.map(function (item) {
+            return item.lng;
+          }));
+          curr.centerPosition = new Position(avrLat, avrLng);
+          totalItemCount += curr.itemList.length;
+
+          if (!min || curr.itemList.length < min) {
+            min = curr.itemList.length;
+          }
+
+          if (!max || curr.itemList.length > max) {
+            max = curr.itemList.length;
+          }
+        }
+      }
+    }
+
+    var status = {
+      total: totalItemCount,
+      average: totalItemCount / centerList.length,
+      min: min,
+      max: max
+    };
+
+    sizeFunction = sizeFunction || function (info, status) {
+      var minSize = basePixelSize / 4;
+      var maxSize = basePixelSize;
+      return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
+    };
+
+    for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
+      var center = centerList_1[_b];
+      center.size = sizeFunction(center, status);
+    } // console.log('centerList', centerList, status);
+
+
+    return centerList;
+  };
+
+  var calculateAverage = function (nums) {
+    var sum = 0;
+
+    for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
+      var num = nums_1[_i];
+      sum += num;
+    }
+
+    return Number((sum / nums.length).toFixed(7));
+  };
+
+  function log(debug, label) {
+    var args = [];
+
+    for (var _i = 2; _i < arguments.length; _i++) {
+      args[_i - 2] = arguments[_i];
+    }
+
+    if (!debug) return;
+    args && console.log.apply(console, tslib.__spreadArray(['[mint-map debug]', label || ''], args, false));
+  }
+
+  var MintMapStatus =
+  /** @class */
+  function () {
+    function MintMapStatus() {
+      this.marker = 0;
+      this.byLabel = new Map();
+    }
+
+    MintMapStatus.prototype.init = function () {
+      this.marker = 0;
+      this.byLabel.clear();
+    };
+
+    MintMapStatus.prototype.print = function () {
+      var str = "[mint-map status]\n\nmarker : ".concat(this.marker, "\n ");
+
+      if (this.byLabel.size > 0) {
+        str += '\n-------- status detail (by label) ----------';
+        this.byLabel.forEach(function (val, key) {
+          str += "\n(".concat(key, ") : ").concat(val);
+        });
+        str += '\n\n';
+      }
+
+      console.log(str);
+    };
+
+    MintMapStatus.prototype.setMarker = function (inc, label) {
+      this.marker += inc;
+
+      if (label) {
+        var curr = this.byLabel.get(label);
+        var calc = 0;
+
+        if (curr === undefined) {
+          calc = inc;
+        } else {
+          calc = curr + inc;
+        }
+
+        if (calc === 0) {
+          this.byLabel.delete(label);
+        } else {
+          this.byLabel.set(label, calc);
+        }
+      }
+    };
+
+    return MintMapStatus;
+  }();
+
+  var Status = new MintMapStatus();
+
   var MintMapController =
   /** @class */
   function () {
@@ -808,12 +1140,12 @@
     MintMapController.prototype.getRandomFunctionName = function (prefix) {
       return "".concat(prefix, "_").concat(uuid.v4().replace(/-/g, '_'));
     };
-    /**
-     * URL 빌더 메서드
-     *
-     * @param {string} baseUrl: 기본 URL
-     * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
-     * @returns {string} URL
+    /**
+     * URL 빌더 메서드
+     *
+     * @param {string} baseUrl: 기본 URL
+     * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+     * @returns {string} URL
      */
 
 
@@ -826,9 +1158,9 @@
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
     };
-    /**
-     * 쓰로틀링 처리
-     * @returns
+    /**
+     * 쓰로틀링 처리
+     * @returns
      */
 
 
@@ -869,6 +1201,10 @@
       throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
     };
 
+    MintMapController.prototype.printStatus = function () {
+      Status.print();
+    };
+
     return MintMapController;
   }();
 
@@ -1066,36 +1402,6 @@
     return MapZoomInfo;
   }();
 
-  function waiting(evaluation, timeoutSeconds) {
-    return tslib.__awaiter(this, void 0, void 0, function () {
-      var max;
-      return tslib.__generator(this, function (_a) {
-        max = (timeoutSeconds || 5) * 1000;
-        return [2
-        /*return*/
-        , new Promise(function (resolve) {
-          var start = new Date().getTime();
-          var inter = setInterval(function () {
-            //타임아웃 체크
-            var time = new Date().getTime();
-
-            if (time - start > max) {
-              clearInterval(inter);
-              resolve(false);
-              return;
-            } //평가식 체크
-
-
-            if (evaluation()) {
-              clearInterval(inter);
-              resolve(true);
-            }
-          }, 100);
-        })];
-      });
-    });
-  }
-
   // export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
   // export type MapUIEvent = 'click'|'dblclick'|''
   var MapEvent =
@@ -1356,8 +1662,7 @@
           map: this.map,
           position: marker.options.position,
           visible: marker.options.visible === undefined || marker.options.visible
-        }; //console.log('controller createMarker', marker.options);
-
+        };
         marker.element && (options.icon = {
           content: marker.element,
           anchor: marker.options.anchor
@@ -1375,6 +1680,8 @@
           marker.native = naverMarker_1;
         }
 
+        log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+        Status.setMarker(1, marker.options.debugLabel);
         ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
           if (_this.markerEvents.includes(key)) {
             naver.maps.Event.addListener(naverMarker_1, key, handler);
@@ -1389,11 +1696,11 @@
         var map = marker.native.getMap();
 
         if (map) {
-          /** 중요!!!!
-           * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
-           * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
-           * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
-           * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+          /** 중요!!!!
+           * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+           * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+           * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+           * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
           */
           //Position
           if (options.position && options.position instanceof Position) {
@@ -1408,7 +1715,9 @@
             marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
               anchor: options.anchor
             }));
-          } // const newOption = {
+          }
+
+          log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated'); // const newOption = {
           //   map:map,
           //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
           //   visible:options.visible === undefined || options.visible,
@@ -1422,7 +1731,6 @@
           //   visible:options.visible === undefined || options.visible,
           //   icon:{...marker.native.getIcon(), anchor:options.anchor}
           // })
-
         }
       }
     };
@@ -1480,6 +1788,9 @@
           } else {
             drawable.native.setMap(null);
           }
+
+          log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+          Status.setMarker(-1, drawable.options.debugLabel);
         } else {
           drawable.native.setMap(null);
         }
@@ -2085,6 +2396,8 @@
           googleMarker_1 = new google.maps.Marker(options);
         }
 
+        log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+        Status.setMarker(1, marker.options.debugLabel);
         marker.native = googleMarker_1;
         ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
           if (_this.markerEvents.includes(key)) {
@@ -2123,6 +2436,8 @@
             marker.native.position = options.position;
           }
         }
+
+        log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated');
       }
     };
 
@@ -2189,6 +2504,8 @@
         } else if (drawable.native instanceof google.maps.marker.AdvancedMarkerView) {
           google.maps.event.clearInstanceListeners(drawable.native);
           drawable.native.map = null;
+          log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+          Status.setMarker(-1, drawable.options.debugLabel);
           return true;
         }
       }
@@ -2771,6 +3088,8 @@
           this.updateMarker(marker, marker.options);
         } else {
           kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
+          log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+          Status.setMarker(1, marker.options.debugLabel);
           marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
           this.removeParentElementsMargin(marker);
           marker.native = kakaoMarker_1;
@@ -2799,6 +3118,7 @@
             marker.native.setVisible(options.visible);
           }
 
+          log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated');
           this.removeParentElementsMargin(marker);
         }
       }
@@ -2871,6 +3191,8 @@
             (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
           } else {
             drawable.native.setMap(null);
+            log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+            Status.setMarker(-1, drawable.options.debugLabel);
           }
         } else {
           drawable.native.setMap(null);
@@ -3075,13 +3397,13 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-      /**
-       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-       * - 가장 확대된 값 : 1
-       * - 가장 축소된 값 : 14
-       *
-       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
       */
       var mapValue = this.getBaseToMapZoom(value);
 
@@ -3266,12 +3588,12 @@
     lat: 37.5036845,
     lng: 127.0448698
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MintMapProps} MintMapProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MintMapProps} MintMapProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MintMap(_a) {
@@ -3608,80 +3930,6 @@
     }, children));
   }
 
-  var AnimationPlayer =
-  /** @class */
-  function () {
-    function AnimationPlayer(drawFunction, fps) {
-      this.prevtime = 0;
-      this.elapsedTime = 0;
-      this.fps = null;
-      this.baseDrawGapTime = null;
-      this.deltaTime = 0;
-      this.playing = false;
-      this.draw = drawFunction;
-      this.fps = fps || null;
-
-      if (fps !== undefined) {
-        this.baseDrawGapTime = 1000 / fps;
-      }
-
-      this.init();
-    }
-
-    AnimationPlayer.prototype.init = function () {
-      this.deltaTime = 0;
-      this.prevtime = 0;
-      this.elapsedTime = 0;
-      this.playing = false;
-    };
-
-    AnimationPlayer.prototype.start = function () {
-      this.init();
-      this.resume();
-    };
-
-    AnimationPlayer.prototype.stop = function () {
-      this.playing = false;
-    };
-
-    AnimationPlayer.prototype.resume = function () {
-      this.playing = true; //@ts-ignore
-
-      window.requestAnimationFrame(this.makeFrame.bind(this));
-    };
-
-    AnimationPlayer.prototype.makeFrame = function (timestamp) {
-      //frame 간 시간 변화
-      if (this.prevtime === 0) {
-        this.prevtime = timestamp;
-      }
-
-      this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
-
-      this.prevtime = timestamp;
-
-      if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
-        //다음 루프 준비
-        this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
-
-        var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
-
-        this.deltaTime = 0;
-
-        if (stopFlag) {
-          this.stop();
-        }
-      }
-
-      if (this.playing) {
-        //@ts-ignore
-        window.requestAnimationFrame(this.makeFrame.bind(this));
-      }
-    };
-
-    return AnimationPlayer;
-  }();
-
   var Drawable =
   /** @class */
   function () {
@@ -3694,8 +3942,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
+    /**
+     * 지도에 표시할 마커정보
      */
 
 
@@ -3713,8 +3961,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3732,8 +3980,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3743,8 +3991,8 @@
       _this.options = options;
       return _this;
     }
-    /**
-     * 폴리곤의 중점을 구한다.
+    /**
+     * 폴리곤의 중점을 구한다.
      */
 
 
@@ -3914,12 +4162,12 @@
       divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
 
@@ -4072,147 +4320,12 @@
     return reactDom.createPortal(children, divElement);
   }
 
-  var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-    var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
-
-
-    var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-    var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
-
-    var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
-    var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
-    var boundsPos = [];
-    var tempX1, tempY1, tempX2, tempY2;
-
-    for (var i = 0; i < rowCount; i++) {
-      tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
-      tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
-      var rows = [];
-      boundsPos.push(rows);
-
-      for (var k = 0; k < colCount; k++) {
-        tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
-        tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
-        var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
-        var includedList = thisBounds.getIncludedPositions(itemList);
-        rows.push({
-          bounds: thisBounds,
-          checked: false,
-          center: false,
-          centerPosition: thisBounds.getCenter(),
-          incList: [],
-          itemList: includedList,
-          size: basePixelSize
-        });
-      }
-    } //좌표마다 검사해서 인접셀 병합 처리
-
-
-    var centerList = [];
-    var totalItemCount = 0;
-    var min;
-    var max;
-
-    for (var i = 0; i < boundsPos.length; i++) {
-      for (var k = 0; k < boundsPos[i].length; k++) {
-        var curr = boundsPos[i][k];
-        if (curr.checked) continue;
-        curr.checked = true; //현재기준 8방향 객체 모으기
-
-        var incList = [];
-
-        if (boundsPos[i]) {
-          boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
-          boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
-        }
-
-        if (boundsPos[i - 1]) {
-          boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
-          boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
-          boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
-        }
-
-        if (boundsPos[i + 1]) {
-          boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
-          boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
-          boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
-        }
-
-        for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
-          var inc = incList_1[_i];
-          if (inc.checked) continue;
-          inc.checked = true;
-
-          if (inc.itemList && inc.itemList.length > 0) {
-            curr.incList.push(inc);
-
-            (_a = curr.itemList).push.apply(_a, inc.itemList);
-
-            curr.center = true;
-          }
-        }
-
-        if (curr.center) {
-          centerList.push(curr);
-          var avrLat = calculateAverage(curr.itemList.map(function (item) {
-            return item.lat;
-          }));
-          var avrLng = calculateAverage(curr.itemList.map(function (item) {
-            return item.lng;
-          }));
-          curr.centerPosition = new Position(avrLat, avrLng);
-          totalItemCount += curr.itemList.length;
-
-          if (!min || curr.itemList.length < min) {
-            min = curr.itemList.length;
-          }
-
-          if (!max || curr.itemList.length > max) {
-            max = curr.itemList.length;
-          }
-        }
-      }
-    }
-
-    var status = {
-      total: totalItemCount,
-      average: totalItemCount / centerList.length,
-      min: min,
-      max: max
-    };
-
-    sizeFunction = sizeFunction || function (info, status) {
-      var minSize = basePixelSize / 4;
-      var maxSize = basePixelSize;
-      return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
-    };
-
-    for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
-      var center = centerList_1[_b];
-      center.size = sizeFunction(center, status);
-    } // console.log('centerList', centerList, status);
-
-
-    return centerList;
-  };
-
-  var calculateAverage = function (nums) {
-    var sum = 0;
-
-    for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
-      var num = nums_1[_i];
-      sum += num;
-    }
-
-    return Number((sum / nums.length).toFixed(7));
-  };
-
-  /**
-   * CircleMarker
-   *
-   * @param {CircleMarkerProps} CircleMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * CircleMarker
+   *
+   * @param {CircleMarkerProps} CircleMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function CircleMarker(_a) {
@@ -4324,12 +4437,12 @@
     }, children)));
   }
 
-  /**
-   *PolygonMarker
-   *
-   * @param {PolygonMarkerProps} PolygonMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   *PolygonMarker
+   *
+   * @param {PolygonMarkerProps} PolygonMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function PolygonMarker(_a) {
@@ -4480,12 +4593,12 @@
     }, children)));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolygonWrapper(_a) {
@@ -4973,12 +5086,12 @@
 
     throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
 
@@ -5003,12 +5116,12 @@
     }, children);
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolylineWrapper(_a) {
@@ -5049,12 +5162,12 @@
     log: function () {
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasWrapper(_a) {
@@ -5373,12 +5486,12 @@
     }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasMarkerWrapper(_props) {
@@ -5419,7 +5532,9 @@
   exports.SVGCircle = SVGCircle;
   exports.SVGPolygon = SVGPolygon;
   exports.SVGRect = SVGRect;
+  exports.Status = Status;
   exports.getClusterInfo = getClusterInfo;
+  exports.log = log;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;
   exports.waiting = waiting;