@mint-ui/map 0.1.1-beta

package/dist/index.es.js

@@ -0,0 +1,1096 @@
+import { __awaiter, __generator, __extends, __rest, __assign, __spreadArray } from 'tslib';
+import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
+import classNames from 'classnames/bind';
+import styleInject from 'style-inject';
+import { createPortal } from 'react-dom';
+
+var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.MintMap-module_ani-blink__K89JK {\n  animation: MintMap-module_blink__mqfeV infinite 0.6s;\n}\n\n@keyframes MintMap-module_blink__mqfeV {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-in__lpHuy {\n  animation: MintMap-module_fade-in__jHpv1 1s;\n}\n\n@keyframes MintMap-module_fade-in__jHpv1 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-out__5-esw {\n  animation: MintMap-module_fade-out__CIjGe 1s;\n}\n\n@keyframes MintMap-module_fade-out__CIjGe {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.MintMap-module_ani-expansion__S2vOZ {\n  animation: MintMap-module_expansion__WMo5- ease 0.6s;\n}\n\n@keyframes MintMap-module_expansion__WMo5- {\n  0% {\n    width: 0%;\n  }\n  100% {\n    width: 100%;\n  }\n}";
+var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
+styleInject(css_248z$2);
+
+var MintMapControllerContext = createContext(null);
+function MintMapProvider(_a) {
+  var controller = _a.controller,
+      children = _a.children;
+  return React.createElement(MintMapControllerContext.Provider, {
+    value: controller
+  }, children);
+}
+function MintMapProvider.useMintMapController() {
+  var controller = useContext(MintMapControllerContext);
+
+  if (controller === null) {
+    throw new Error('controller is not initialized');
+  }
+
+  return controller;
+}
+
+var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
+var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
+styleInject(css_248z$1);
+
+var cn$2 = classNames.bind(styles$1);
+function MintMapCore(_a) {
+  var _this = this;
+
+  var onLoad = _a.onLoad,
+      _b = _a.visible,
+      visible = _b === void 0 ? true : _b,
+      children = _a.children;
+  var controller = MintMapProvider.useMintMapController();
+  var elementRef = useRef(null);
+
+  var _c = useState(false),
+      mapInitialized = _c[0],
+      setMapInitialized = _c[1];
+
+  useEffect(function () {
+    (function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var map_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(elementRef && elementRef.current)) return [3, 2];
+              return [4, controller.initializingMap(elementRef.current)];
+
+            case 1:
+              map_1 = _a.sent();
+              setTimeout(function () {
+                setMapInitialized(true);
+                onLoad && onLoad(map_1, controller);
+              }, 100);
+              _a.label = 2;
+
+            case 2:
+              return [2];
+          }
+        });
+      });
+    })();
+
+    return function () {
+      controller && controller.destroyMap();
+    };
+  }, [controller, elementRef]);
+  return React.createElement("div", {
+    className: cn$2('mint-map-root'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    }
+  }, mapInitialized && children, React.createElement("div", {
+    className: cn$2('mint-map-container'),
+    ref: elementRef
+  }));
+}
+
+var LinePoints = function () {
+  function LinePoints(x1, y1, x2, y2) {
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+  }
+
+  return LinePoints;
+}();
+
+var PolygonCalculator = function () {
+  function PolygonCalculator() {}
+
+  PolygonCalculator.getCenter = function (positions) {
+    var maxX, minX, maxY, minY;
+
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+      var pos = positions_1[_i];
+
+      if (maxX === undefined || pos.lat > maxX) {
+        maxX = pos.lat;
+      }
+
+      if (minX === undefined || pos.lat < minX) {
+        minX = pos.lat;
+      }
+
+      if (maxY === undefined || pos.lng > maxY) {
+        maxY = pos.lng;
+      }
+
+      if (minY === undefined || pos.lng < minY) {
+        minY = pos.lng;
+      }
+    }
+
+    if (maxX && minX && maxY && minY) {
+      return new MintMap.Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+    }
+
+    throw new Error('Calculate Center Error!!!');
+  };
+
+  PolygonCalculator.intersects = function (positions1, positions2) {
+    var lines = [];
+
+    for (var i = 0; i < positions2.length - 1; i++) {
+      lines.push(this.convertPositionToPoints(positions2[i], positions2[i + 1]));
+    }
+
+    for (var i = 0; i < positions1.length - 1; i++) {
+      var targetLinePoints = this.convertPositionToPoints(positions1[i], positions1[i + 1]);
+
+      if (this.findCrossPoint(lines, targetLinePoints)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
+    return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
+  };
+
+  PolygonCalculator.findCrossPoint = function (sr, tr) {
+    for (var _i = 0, sr_1 = sr; _i < sr_1.length; _i++) {
+      var tmp = sr_1[_i];
+      var p1 = (tmp.x1 - tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 - tr.x2);
+
+      if (p1 != 0) {
+        var x = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.x1 - tr.x2) - (tmp.x1 - tmp.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+        var y = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+
+        if ((x - tmp.x1) * (x - tmp.x2) <= 0 && (y - tmp.y1) * (y - tmp.y2) <= 0 && (x - tr.x1) * (x - tr.x2) <= 0 && (y - tr.y1) * (y - tr.y2) <= 0) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  return PolygonCalculator;
+}();
+
+var calculate.GeoCalulator = function () {
+  function GeoCalulator() {}
+
+  GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
+    var dLat = this.deg2rad(pos2.lat - pos1.lat);
+    var dLon = this.deg2rad(pos2.lng - pos1.lng);
+    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    var d = this.EARTH_RADIUS * c;
+    return d;
+  };
+
+  GeoCalulator.deg2rad = function (deg) {
+    return deg * (Math.PI / 180);
+  };
+
+  GeoCalulator.convertMeterToLatitudeValue = function (meter) {
+    return meter * this.LATITUDE_POSITION_VALUE_PER_METER;
+  };
+
+  GeoCalulator.computeNextPositionAndDistances = function (context) {
+    var pos1 = context.pos1,
+        pos2 = context.pos2,
+        prevPos2 = context.prevPos2,
+        velocityKmh = context.velocityKmh,
+        prevVelocityKmh = context.prevVelocityKmh,
+        elapsedTimeMs = context.elapsedTimeMs;
+
+    if (pos2 !== prevPos2) {
+      context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
+      context.currDistance = 0;
+      context.prevPos2 = pos2;
+    }
+
+    var totalDistance = context.totalDistance;
+
+    if (velocityKmh !== prevVelocityKmh) {
+      context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
+      context.prevVelocityKmh = velocityKmh;
+    }
+
+    var vPerMs = context.vPerMs;
+    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs;
+    context.currDistance = nextDistance;
+
+    if (totalDistance < context.currDistance) {
+      context.distanceRemain = context.currDistance - totalDistance;
+      context.nextPos = pos2;
+      return context;
+    } else {
+      context.distanceRemain = 0;
+    }
+
+    var ratio = nextDistance / totalDistance;
+    var latCalib = pos2.lat > pos1.lat ? 1 : -1;
+    var lngCalib = pos2.lng > pos1.lng ? 1 : -1;
+    var newPos = new MintMap.Position(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+
+    if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
+      newPos = pos2;
+    }
+
+    context.nextPos = newPos;
+    return context;
+  };
+
+  GeoCalulator.EARTH_RADIUS = 6371;
+  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000);
+  GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
+  return GeoCalulator;
+}();
+
+var MintMap.Position = function () {
+  function Position(lat, lng) {
+    this.lat = 0;
+    this.lng = 0;
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return Position;
+}();
+
+var Drawable = function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var MintMap.Marker = function (_super) {
+  __extends(Marker, _super);
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var MintMap.Polyline = function (_super) {
+  __extends(Polyline, _super);
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var MintMap.Polygon = function (_super) {
+  __extends(Polygon, _super);
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof MintMap.Position ? elem : new MintMap.Position(elem[0], elem[1]);
+      });
+      return PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
+var cn$1 = classNames.bind(styles$2);
+function MintMap(_a) {
+  var _this = this;
+
+  var mapType = _a.mapType,
+      children = _a.children,
+      props = __rest(_a, ["mapType", "children"]);
+
+  var _b = useState(),
+      controller = _b[0],
+      setController = _b[1];
+
+  useEffect(function () {
+    if (mapType && mapType.length > 0) {
+      setController(undefined);
+
+      (function () {
+        return __awaiter(_this, void 0, void 0, function () {
+          var moduleName, controllerModule, newController;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                moduleName = getMapModulePrefix(mapType);
+                return [4, import("./".concat(mapType, "/").concat(moduleName, "MintMapController"))];
+
+              case 1:
+                controllerModule = _a.sent();
+                newController = new controllerModule.default(__assign({
+                  mapType: mapType
+                }, props));
+                newController.loadMapApi().then(function () {
+                  setController(newController);
+                });
+                return [2];
+            }
+          });
+        });
+      })();
+    } else {
+      setController(undefined);
+    }
+  }, [mapType]);
+  return React.createElement(React.Fragment, null, controller ? React.createElement(MintMapProvider, {
+    controller: controller
+  }, React.createElement(MintMapCore, __assign({
+    mapType: mapType
+  }, props), children)) : React.createElement(PointLoading, {
+    text: "Loading"
+  }));
+}
+
+function PointLoading(_a) {
+  var text = _a.text,
+      _b = _a.pointCount,
+      pointCount = _b === void 0 ? 4 : _b,
+      _c = _a.speedMs,
+      speedMs = _c === void 0 ? 200 : _c;
+  var pointStringPool = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+    return Array.from(Array(idx + 1)).map(function () {
+      return '.';
+    }).join('');
+  }))[0];
+
+  var _d = useState(''),
+      pointString = _d[0],
+      setPointString = _d[1];
+
+  useEffect(function () {
+    var pointStringIndex = 0;
+    var interval = setInterval(function () {
+      pointStringIndex += 1;
+
+      if (pointStringIndex >= pointCount) {
+        pointStringIndex = 0;
+      }
+
+      setPointString(pointStringPool[pointStringIndex]);
+    }, speedMs);
+    return function () {
+      interval && clearInterval(interval);
+    };
+  }, []);
+  return React.createElement("div", {
+    className: cn$1('loading-point-container')
+  }, React.createElement("div", {
+    style: {
+      width: '300px',
+      fontSize: '16px',
+      fontWeight: 600,
+      color: 'gray',
+      transform: 'translateX(130px)'
+    }
+  }, "".concat(text, " ").concat(pointString)));
+}
+
+var getMapModulePrefix = function (mapType) {
+  return mapType.substring(0, 1).toUpperCase() + mapType.substring(1).toLowerCase();
+};
+
+var MintMapController = function () {
+  function MintMapController(props) {
+    this.mapApiLoaded = false;
+    this.mapInitialized = false;
+    this.mapProps = props;
+  }
+
+  MintMapController.prototype.getMap = function () {
+    return this.map;
+  };
+
+  MintMapController.prototype.getMapType = function () {
+    return this.type;
+  };
+
+  MintMapController.prototype.loadScript = function (url, id) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          if (id && document.getElementById(id)) {
+            console.log("already loaded script => ".concat(id));
+            resolve();
+            return;
+          }
+
+          var script = document.createElement('script');
+          script.src = url;
+          script.async = true;
+          script.defer = true;
+          script.addEventListener('load', function () {
+            resolve();
+          });
+          document.body.appendChild(script);
+        })];
+      });
+    });
+  };
+
+  MintMapController.prototype.buildUrl = function (baseUrl, param) {
+    var params = Object.entries(param).map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      return "".concat(key, "=").concat(temp);
+    }).join('&');
+    return "".concat(baseUrl, "?").concat(params);
+  };
+
+  return MintMapController;
+}();
+
+var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
+styleInject(css_248z);
+
+var cn = classNames.bind(styles);
+
+var getSizeString = function (size) {
+  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
+};
+
+var getAlignPosition = function (value, align) {
+  if (typeof value === 'string') {
+    var trimmed = value.replace(/ /g, '');
+    console.log('trimmed:', trimmed);
+    var isPercent = trimmed.endsWith('%');
+
+    if (!isPercent && !trimmed.endsWith('px')) {
+      throw new Error("Size [".concat(value, "] is not valid string value."));
+    }
+
+    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
+    var unit = isPercent ? '%' : 'px';
+    var numberValue = Number(numberPart);
+
+    if (isNaN(numberValue)) {
+      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
+    }
+
+    if (align === 'center') {
+      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(numberValue).concat(unit, ")");
+    } else {
+      return '0px';
+    }
+  } else if (typeof value === 'number') {
+    if (align === 'center') {
+      return "calc(50% - ".concat(value / 2, "px)");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(value, "px)");
+    } else {
+      return '0px';
+    }
+  }
+
+  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
+};
+
+function MapControlWrapper(_a) {
+  var _b = _a.width,
+      width = _b === void 0 ? 100 : _b,
+      _c = _a.height,
+      height = _c === void 0 ? 40 : _c,
+      _d = _a.positionHorizontal,
+      positionHorizontal = _d === void 0 ? 'left' : _d,
+      _e = _a.positionVertical,
+      positionVertical = _e === void 0 ? 'top' : _e,
+      children = _a.children;
+  return React.createElement("div", {
+    className: cn('mint-map-control-wrapper'),
+    style: {
+      width: getSizeString(width),
+      height: getSizeString(height),
+      left: getAlignPosition(width, positionHorizontal),
+      top: getAlignPosition(height, positionVertical)
+    }
+  }, children);
+}
+
+var AnimationPlayer = 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;
+    window.requestAnimationFrame(this.makeFrame.bind(this));
+  };
+
+  AnimationPlayer.prototype.makeFrame = function (timestamp) {
+    if (this.prevtime === 0) {
+      this.prevtime = timestamp;
+    }
+
+    this.deltaTime += timestamp - this.prevtime;
+    this.prevtime = timestamp;
+
+    if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
+      this.elapsedTime += this.deltaTime;
+      var stopFlag = this.draw(this.deltaTime, this.elapsedTime);
+      this.deltaTime = 0;
+
+      if (stopFlag) {
+        this.stop();
+      }
+    }
+
+    if (this.playing) {
+      window.requestAnimationFrame(this.makeFrame.bind(this));
+    }
+  };
+
+  return AnimationPlayer;
+}();
+
+function nextIndex(array, currIdx) {
+  var next = currIdx + 1;
+
+  if (next > array.length - 1) {
+    next = 0;
+  }
+
+  return next;
+}
+
+function useMarkerMoving(_a) {
+  var _b = _a.marker,
+      marker = _b === void 0 ? undefined : _b,
+      _c = _a.positions,
+      positions = _c === void 0 ? [] : _c,
+      _d = _a.positionClosed,
+      positionClosed = _d === void 0 ? false : _d,
+      _e = _a.loop,
+      loop = _e === void 0 ? false : _e,
+      _f = _a.fps,
+      fps = _f === void 0 ? 1 : _f,
+      _g = _a.startPositionIndex,
+      startPositionIndex = _g === void 0 ? 0 : _g,
+      _h = _a.velocity,
+      velocity = _h === void 0 ? 10 : _h,
+      onMovingStart = _a.onMovingStart,
+      onMovingEnd = _a.onMovingEnd;
+  var controller = MintMapProvider.useMintMapController();
+  useEffect(function () {
+    contextRef.current && (contextRef.current.velocityKmh = velocity);
+  }, [velocity]);
+  var contextRef = useRef();
+  useEffect(function () {
+    if (marker) {
+      var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
+      var stopNext_1 = false;
+      var loopCount_1 = 0;
+      var context_1 = contextRef.current = {
+        pos1: positions[startPositionIndex],
+        pos2: positions[currTargetIndex_1],
+        velocityKmh: velocity
+      };
+      var nextOption_1 = {
+        position: context_1.nextPos,
+        anchor: marker.options.anchor
+      };
+
+      var draw = function (frameGapTime, _elapsedTime) {
+        if (!marker) {
+          console.log('myMarker is not exist!!!');
+          return true;
+        }
+
+        context_1.elapsedTimeMs = frameGapTime;
+
+        while (true) {
+          calculate.GeoCalulator.computeNextPositionAndDistances(context_1);
+
+          if (context_1.nextPos === context_1.pos2) {
+            if (currTargetIndex_1 === startPositionIndex) {
+              loopCount_1 += 1;
+            }
+
+            if (!loop && loopCount_1 > 0) {
+              stopNext_1 = true;
+              break;
+            }
+
+            context_1.pos1 = positions[currTargetIndex_1];
+            currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
+
+            if (currTargetIndex_1 === 0 && !positionClosed) {
+              context_1.pos1 = positions[currTargetIndex_1];
+              currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
+            }
+
+            context_1.pos2 = positions[currTargetIndex_1];
+          } else {
+            break;
+          }
+        }
+
+        nextOption_1.position = context_1.nextPos;
+        marker.options.position = nextOption_1.position;
+        controller.updateMarker(marker, nextOption_1);
+
+        if (stopNext_1) {
+          onMovingEnd && onMovingEnd();
+          return true;
+        }
+
+        return false;
+      };
+
+      player.current = new AnimationPlayer(draw, fps);
+    }
+
+    return function () {
+      player.current && player.current.stop();
+    };
+  }, [marker]);
+  var player = useRef();
+
+  var _j = useState('stop'),
+      playbackStatus = _j[0],
+      setPlaybackStatus = _j[1];
+
+  useEffect(function () {
+    var _a, _b, _c;
+
+    if (playbackStatus === 'start') {
+      (_a = player === null || player === void 0 ? void 0 : player.current) === null || _a === void 0 ? void 0 : _a.start();
+      onMovingStart && onMovingStart();
+    } else if (playbackStatus === 'resume') {
+      (_b = player === null || player === void 0 ? void 0 : player.current) === null || _b === void 0 ? void 0 : _b.resume();
+    } else if (playbackStatus === 'stop') {
+      (_c = player === null || player === void 0 ? void 0 : player.current) === null || _c === void 0 ? void 0 : _c.stop();
+    }
+  }, [playbackStatus]);
+
+  var start = function () {
+    setPlaybackStatus('start');
+  };
+
+  var stop = function () {
+    setPlaybackStatus('stop');
+  };
+
+  var resume = function () {
+    setPlaybackStatus('resume');
+  };
+
+  return [start, stop, resume];
+}
+
+var offsetCalibration = function (mapType, divElement, options) {
+  if (mapType === 'google') {
+    divElement.style.transform = "translate(50%, 100%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
+  }
+};
+
+function MapMarkerWrapper(_a) {
+  var startAnimationClassName = _a.startAnimationClassName,
+      endAnimationClassName = _a.endAnimationClassName,
+      _b = _a.topOnClick,
+      topOnClick = _b === void 0 ? false : _b,
+      _c = _a.topOnHover,
+      topOnHover = _c === void 0 ? false : _c,
+      movingAnimation = _a.movingAnimation,
+      children = _a.children,
+      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  var divRef = useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var divCloneRef = useRef();
+  var markerRef = useRef();
+
+  var _d = useState({}),
+      movingState = _d[0],
+      setMovingState = _d[1];
+
+  useEffect(function () {
+    if (movingState.autoStart) {
+      setTimeout(function () {
+        start();
+      }, movingState.delay);
+    }
+  }, [movingState]);
+  useEffect(function () {
+    setMovingState(__assign(__assign({}, movingAnimation), {
+      marker: markerRef.current
+    }));
+  }, [movingAnimation]);
+  var start = useMarkerMoving(movingState)[0];
+
+  var onClickHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      controller.setMapDragged(false);
+      var clickHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('click');
+      var next = true;
+
+      if (clickHandler) {
+        var hasNext = clickHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && !topOnHover && topOnClick && controller.markerToTheTop(marker);
+    }
+  };
+
+  var onMouseOverHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
+      var next = true;
+
+      if (mouseOverHandler) {
+        var hasNext = mouseOverHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.markerToTheTop(marker);
+    }
+  };
+
+  useEffect(function () {
+    divElement.addEventListener('click', onClickHandler);
+    divElement.addEventListener('mouseover', onMouseOverHandler);
+    return function () {
+      if (divCloneRef.current && endAnimationClassName) {
+        divCloneRef.current.classList.add(endAnimationClassName);
+
+        var aniListener_1 = function () {
+          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
+
+          if (markerRef.current) {
+            console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+          }
+
+          divCloneRef.current = undefined;
+        };
+
+        divCloneRef.current.addEventListener('animationend', aniListener_1);
+        divElement.append(divCloneRef.current);
+      } else {
+        divElement.removeEventListener('click', onClickHandler);
+        divElement.removeEventListener('mouseover', onMouseOverHandler);
+
+        if (markerRef.current) {
+          console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+        }
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (options) {
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, options);
+        offsetCalibration(controller.getMapType(), divElement, options);
+      } else {
+        markerRef.current = new MintMap.Marker(options);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current);
+        offsetCalibration(controller.getMapType(), divElement, options);
+
+        if (movingAnimation) {
+          setMovingState(__assign(__assign({}, movingAnimation), {
+            marker: markerRef.current
+          }));
+        }
+
+        if (startAnimationClassName) {
+          divElement.style.visibility = 'hidden';
+          setTimeout(function () {
+            var _a, _b;
+
+            divCloneRef.current = divElement.firstElementChild;
+            divElement.style.visibility = 'visible';
+            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+
+            var aniListener = function () {
+              var _a, _b;
+
+              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
+              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
+            };
+
+            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
+          });
+        } else {
+          setTimeout(function () {
+            divCloneRef.current = divElement.firstElementChild;
+          });
+        }
+      }
+    }
+  }, [options]);
+  return createPortal(children, divElement);
+}
+
+function MapPolygonWrapper(_a) {
+  var children = _a.children,
+      options = __rest(_a, ["children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  useEffect(function () {
+    return function () {
+      if (polygonRef.current) {
+        console.log('polygon cleared', controller.clearDrawable(polygonRef.current));
+      }
+    };
+  }, []);
+  var polygonRef = useRef();
+  useEffect(function () {
+    if (options) {
+      if (polygonRef.current) {
+        controller.updatePolygon(polygonRef.current, options);
+      } else {
+        var polygon = new MintMap.Polygon(options);
+        polygonRef.current = polygon;
+        controller.createPolygon(polygon);
+      }
+    }
+  }, [options]);
+  return React.createElement(React.Fragment, null, options && children);
+}
+
+function MapPolylineWrapper(_a) {
+  var children = _a.children,
+      options = __rest(_a, ["children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  useEffect(function () {
+    return function () {
+      if (polylineRef.current) {
+        console.log('polyline cleared', controller.clearDrawable(polylineRef.current));
+      }
+    };
+  }, []);
+  var polylineRef = useRef();
+  useEffect(function () {
+    if (options) {
+      if (polylineRef.current) {
+        controller.updatePolyline(polylineRef.current, options);
+      } else {
+        var polyline = new MintMap.Polyline(options);
+        polylineRef.current = polyline;
+        controller.createPolyline(polyline);
+      }
+    }
+  }, [options]);
+  return React.createElement(React.Fragment, null, options && children);
+}
+
+function getMaxLat(items) {
+  var max;
+
+  for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+    var item = items_1[_i];
+
+    if (!max || max.lat < item.lat) {
+      max = item;
+    }
+  }
+
+  return max;
+}
+
+function getLngMinMaxPos(items, maxFlag) {
+  var data = __spreadArray([], items, true);
+
+  data.sort(function (a, b) {
+    var maxA = getLngMinMax(a.position, maxFlag);
+    var maxB = getLngMinMax(b.position, maxFlag);
+    return maxA.lat < maxB.lat ? maxFlag ? 1 : -1 : maxFlag ? -1 : 1;
+  });
+  return data[0];
+}
+
+function getLngMinMax(items, maxFlag) {
+  var val;
+
+  for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+    var item = items_2[_i];
+
+    if (!val || maxFlag && val.lat < item.lat || !maxFlag && val.lat > item.lat) {
+      val = item;
+    }
+  }
+
+  return val;
+}
+
+function MapBuildingProjection(props) {
+  var basePolygonPath = props.basePolygonPath,
+      numberOfFloor = props.numberOfFloor,
+      _a = props.heightOfFloor,
+      heightOfFloor = _a === void 0 ? 4 : _a,
+      _b = props.lineColor,
+      lineColor = _b === void 0 ? 'blue' : _b,
+      _c = props.lineOpacity,
+      lineOpacity = _c === void 0 ? 1 : _c,
+      _d = props.fillColor,
+      fillColor = _d === void 0 ? 'lightblue' : _d,
+      _e = props.fillOpacity,
+      fillOpacity = _e === void 0 ? 1 : _e,
+      _f = props.title,
+      title = _f === void 0 ? '빌딩11' : _f,
+      titleElement = props.titleElement;
+
+  var _g = useState(),
+      basePolygon = _g[0],
+      setBasePolygon = _g[1];
+
+  var roofPolygon = useRef();
+  var wallPolygons = useRef();
+  var titlePosition = useRef();
+  useEffect(function () {
+    var base = {
+      position: basePolygonPath
+    };
+    var height = numberOfFloor * heightOfFloor;
+    var projectionHeight = calculate.GeoCalulator.convertMeterToLatitudeValue(height);
+    var roofPaths = [];
+
+    for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
+      var pos = basePolygonPath_1[_i];
+      roofPaths.push(new MintMap.Position(pos.lat + projectionHeight, pos.lng));
+    }
+
+    roofPolygon.current = {
+      position: roofPaths
+    };
+    wallPolygons.current = [];
+
+    for (var i = 0; i < basePolygonPath.length; i++) {
+      var start = basePolygonPath[i];
+      var startNext = basePolygonPath[i + 1] || basePolygonPath[0];
+      var end = roofPaths[i];
+      var endNext = roofPaths[i + 1] || roofPaths[0];
+      wallPolygons.current.push({
+        position: [start, startNext, endNext, end]
+      });
+    }
+
+    wallPolygons.current.sort(function (a, b) {
+      var maxA = getMaxLat(a.position);
+      var maxB = getMaxLat(b.position);
+      return maxA.lat < maxB.lat ? 1 : -1;
+    });
+
+    if (title || titleElement) {
+      var maxPos = getMaxLat(wallPolygons.current[0].position);
+      var maxLngPos = getLngMinMaxPos(wallPolygons.current, true);
+      var minLngPos = getLngMinMaxPos(wallPolygons.current, false);
+      var maxLng = getLngMinMax(maxLngPos.position, true);
+      var minLng = getLngMinMax(minLngPos.position, false);
+      var mid = minLng.lng + (maxLng.lng - minLng.lng) / 2;
+      titlePosition.current = {
+        position: new MintMap.Position(maxPos.lat, mid)
+      };
+    } else {
+      titlePosition.current = undefined;
+    }
+
+    setBasePolygon(base);
+  }, [props]);
+  return React.createElement(React.Fragment, null, basePolygon && React.createElement(MapPolygonWrapper, __assign({}, basePolygon, {
+    lineColor: lineColor,
+    lineOpacity: lineOpacity,
+    fillColor: fillColor,
+    fillOpacity: fillOpacity
+  })), wallPolygons.current && wallPolygons.current.map(function (poly, idx) {
+    return React.createElement(MapPolygonWrapper, __assign({
+      key: "walls-".concat(idx)
+    }, poly, {
+      lineColor: lineColor,
+      lineOpacity: lineOpacity,
+      fillColor: fillColor,
+      fillOpacity: fillOpacity
+    }));
+  }), roofPolygon.current && React.createElement(MapPolygonWrapper, __assign({}, roofPolygon.current, {
+    lineColor: lineColor,
+    lineOpacity: lineOpacity,
+    fillColor: fillColor,
+    fillOpacity: fillOpacity
+  })), titlePosition.current && React.createElement(MapMarkerWrapper, __assign({}, titlePosition.current), titleElement ? titleElement : React.createElement("div", {
+    style: {
+      width: '150px',
+      height: '30px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      left: 'calc(50% - 75px)',
+      top: '-35px'
+    }
+  }, React.createElement("div", {
+    style: {
+      maxWidth: '150px',
+      border: '1px solid gray',
+      borderRadius: '5px',
+      padding: '2px 5px',
+      background: 'white',
+      fontSize: '12px',
+      fontWeight: 600,
+      color: '#006fd1'
+    }
+  }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
+}
+
+export { MapBuildingProjection, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MintMap, MintMapController, MintMapProvider };