@mint-ui/map 0.3.5-beta → 0.3.7-beta

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -0,0 +1,514 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var MintMapController = require('../core/MintMapController.js');
+var waiting = require('../core/util/waiting.js');
+var MintMap = require('../MintMap.js');
+var tools = require('@mint-ui/tools');
+
+var KakaoMintMapController = function (_super) {
+  tslib.__extends(KakaoMintMapController, _super);
+
+  function KakaoMintMapController(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.type = 'kakao';
+    _this.map = null;
+    _this.scriptUrl = 'https://dapi.kakao.com/v2/maps/sdk.js';
+    _this.scriptModules = ['services', 'clusterer'];
+    _this.polylineEvents = ['mouseover', 'mouseout'];
+    _this.polygonEvents = ['mouseover', 'mouseout'];
+    _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+    _this.dragStartPoint = [0, 0];
+    _this.dragged = false;
+    console.log("".concat(_this.type, " controller loadded"));
+    return _this;
+  }
+
+  KakaoMintMapController.prototype.initMarkerPool = function () {
+    var _this = this;
+
+    if (!this.mapProps.markerCache) return;
+    this.markerPool = new tools.ObjectPool().setFactory(function () {
+      return new kakao.maps.CustomOverlay({
+        position: _this.positionToLatLng(new MintMap.Position(0, 0)),
+        map: _this.map || undefined
+      });
+    }).setClear(function (item) {
+      item.setMap(null);
+    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+  };
+
+  KakaoMintMapController.prototype.createPolyline = function (polyline) {
+    var _this = this;
+
+    var _a = polyline.options,
+        position = _a.position,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'blue' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d;
+        _a.visible;
+        _a.editable;
+        var event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var path = position.map(function (elem) {
+        return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+      });
+      var pol_1 = new kakao.maps.Polyline({
+        map: this.map,
+        path: path,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity
+      });
+      polyline.native = pol_1;
+      event && event.forEach(function (handler, key) {
+        if (_this.polylineEvents.includes(key)) {
+          kakao.maps.event.addListener(pol_1, key, handler);
+        }
+      });
+    }
+  };
+
+  KakaoMintMapController.prototype.updatePolyline = function (polyline, options) {
+    var _this = this;
+
+    if (polyline && polyline.native && polyline.native instanceof kakao.maps.Polyline) {
+      var path = void 0;
+
+      if (Array.isArray(options.position)) {
+        path = options.position.map(function (elem) {
+          return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+        });
+      }
+
+      polyline.native.setOptions({
+        path: path || polyline.native.getPath(),
+        strokeColor: options.lineColor,
+        strokeWeight: options.lineSize,
+        strokeOpacity: options.lineOpacity
+      });
+    }
+  };
+
+  KakaoMintMapController.prototype.createPolygon = function (polygon) {
+    var _this = this;
+
+    var _a = polygon.options,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'green' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.fillColor,
+        fillColor = _e === void 0 ? 'lightgreen' : _e,
+        _f = _a.fillOpacity,
+        fillOpacity = _f === void 0 ? 0.5 : _f;
+        _a.visible;
+        _a.editable;
+        var event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var outLine = position.map(function (elem) {
+        return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+      });
+      var path = [outLine];
+      innerPositions && path.push(innerPositions.map(function (inner) {
+        return _this.positionToLatLng(inner);
+      }));
+      var pol_2 = new kakao.maps.Polygon({
+        map: this.map,
+        path: path,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity
+      });
+      polygon.native = pol_2;
+      event && event.forEach(function (handler, key) {
+        if (_this.polygonEvents.includes(key)) {
+          kakao.maps.event.addListener(pol_2, key, handler);
+        }
+      });
+    }
+  };
+
+  KakaoMintMapController.prototype.updatePolygon = function (polygon, options) {
+    var _this = this;
+
+    if (polygon && polygon.native && polygon.native instanceof kakao.maps.Polygon) {
+      var paths = void 0;
+
+      if (Array.isArray(options.position)) {
+        var outLine = options.position.map(function (elem) {
+          return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+        });
+        paths = [outLine];
+        options.innerPositions && paths.push.apply(paths, options.innerPositions.map(function (inner) {
+          return _this.positionToLatLng(inner);
+        }));
+      }
+
+      polygon.native.setOptions({
+        path: paths || polygon.native.getPath(),
+        strokeColor: options.lineColor,
+        strokeWeight: options.lineSize,
+        strokeOpacity: options.lineOpacity,
+        fillColor: options.fillColor,
+        fillOpacity: options.fillOpacity
+      });
+    }
+  };
+
+  KakaoMintMapController.prototype.createMarker = function (marker) {
+    var _this = this;
+
+    var _a;
+
+    if (this.map) {
+      var options = {
+        map: this.map,
+        position: this.positionToLatLng(marker.options.position)
+      };
+      marker.element && (options.content = marker.element);
+      var kakaoMarker_1;
+
+      if (this.mapProps.markerCache && this.markerPool) {
+        kakaoMarker_1 = this.markerPool.getPoolItem();
+        kakaoMarker_1.setVisible(true);
+        options.content && kakaoMarker_1.setContent(options.content);
+        marker.native = kakaoMarker_1;
+        this.updateMarker(marker, marker.options);
+      } else {
+        kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
+        marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
+        marker.native = kakaoMarker_1;
+      }
+
+      ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
+        if (_this.markerEvents.includes(key)) {
+          kakao.maps.event.addListener(kakaoMarker_1, key, handler);
+        }
+      });
+    }
+  };
+
+  KakaoMintMapController.prototype.updateMarker = function (marker, options) {
+    if (marker && marker.native && marker.native instanceof kakao.maps.CustomOverlay) {
+      var map = marker.native.getMap();
+
+      if (map) {
+        if (options.position && options.position instanceof MintMap.Position) {
+          marker.native.setPosition(this.positionToLatLng(options.position));
+        }
+
+        if (options.visible !== undefined) {
+          marker.native.setVisible(options.visible);
+        }
+      }
+    }
+  };
+
+  KakaoMintMapController.prototype.getMaxZIndex = function (increment, parent) {
+    if (increment === void 0) {
+      increment = 0;
+    }
+
+    if (this.map) {
+      var targetPane = parent;
+      var max = 0;
+
+      for (var i = 0; i < targetPane.childElementCount; i++) {
+        var elem = targetPane.children[i];
+
+        if (elem instanceof HTMLElement) {
+          var index = Number(elem.style.zIndex);
+
+          if (!isNaN(index) && index > max) {
+            max = index;
+          }
+        }
+      }
+
+      this.markerMaxZIndex = max + increment;
+      return this.markerMaxZIndex;
+    } else {
+      return this.markerMaxZIndex || 1;
+    }
+  };
+
+  KakaoMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_1 = marker.element.parentElement;
+
+      if (parent_1) {
+        parent_1.style.zIndex = String(zIndex);
+      }
+    }
+  };
+
+  KakaoMintMapController.prototype.markerToTheTop = function (marker) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_2 = marker.element.parentElement;
+
+      if (parent_2) {
+        this.setMarkerZIndex(marker, this.getMaxZIndex(1, parent_2));
+      }
+    }
+  };
+
+  KakaoMintMapController.prototype.clearDrawable = function (drawable) {
+    var _this = this;
+
+    var _a, _b;
+
+    if (drawable && drawable.native && (drawable.native instanceof kakao.maps.CustomOverlay || drawable.native instanceof kakao.maps.Polyline || drawable.native instanceof kakao.maps.Polygon)) {
+      if (drawable.native instanceof kakao.maps.CustomOverlay) {
+        if (this.mapProps.markerCache && this.markerPool) {
+          drawable.native.setVisible(false);
+          (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
+        } else {
+          drawable.native.setMap(null);
+        }
+      } else {
+        drawable.native.setMap(null);
+      }
+
+      ((_b = drawable.options) === null || _b === void 0 ? void 0 : _b.event) && drawable.options.event.forEach(function (handler, key) {
+        if (_this.markerEvents.includes(key)) {
+          kakao.maps.event.removeListener(drawable.native, key, handler);
+        }
+      });
+      return true;
+    }
+
+    return false;
+  };
+
+  KakaoMintMapController.prototype.isMapDragged = function () {
+    return this.dragged;
+  };
+
+  KakaoMintMapController.prototype.setMapDragged = function (value) {
+    this.dragged = false;
+  };
+
+  KakaoMintMapController.prototype.loadMapApi = function () {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return tslib.__generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            var params, ok;
+            return tslib.__generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  params = {
+                    appkey: this.mapProps.mapKey,
+                    libraries: this.scriptModules.join(','),
+                    autoload: false
+                  };
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakaoscript')];
+
+                case 1:
+                  _a.sent();
+
+                  window.kakao.maps.load();
+                  return [4, waiting.waiting(function () {
+                    return window.kakao.maps.Map ? true : false;
+                  })];
+
+                case 2:
+                  ok = _a.sent();
+
+                  if (!ok) {
+                    throw new Error('kakao script api load failed!!');
+                  }
+
+                  this.mapApiLoaded = true;
+                  resolve(true);
+                  console.log("".concat(this.type, " map script loaded"));
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  KakaoMintMapController.prototype.initializingMap = function (divElement) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return tslib.__generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            var options, maxZoom, minZoom, map;
+
+            var _this = this;
+
+            var _a, _b, _c, _d;
+
+            return tslib.__generator(this, function (_e) {
+              switch (_e.label) {
+                case 0:
+                  if (this.mapInitialized && this.map) {
+                    if (this.map.getElement() === divElement) {
+                      resolve(this.map);
+                      return [2];
+                    } else {
+                      this.map.destroy();
+                    }
+                  }
+
+                  if (!!this.mapApiLoaded) return [3, 2];
+                  return [4, this.loadMapApi()];
+
+                case 1:
+                  _e.sent();
+
+                  _e.label = 2;
+
+                case 2:
+                  options = {
+                    center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
+                    level: this.getBaseToMapZoom((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel),
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
+                  };
+                  maxZoom = 1;
+                  minZoom = 14;
+
+                  if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
+                    maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
+                  }
+
+                  if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
+                    minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
+                  }
+
+                  if (minZoom < maxZoom) {
+                    minZoom = 14;
+                  }
+
+                  map = new kakao.maps.Map(divElement, options);
+                  map.setMaxLevel(minZoom);
+                  map.setMinLevel(maxZoom);
+                  this.map = map;
+                  map.addListener('idle', function (e) {
+                    _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('zoom_changed', function () {
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.getZoomLevel());
+                  });
+                  map.addListener('click', function (e) {
+                    if (!_this.mapProps.onClick) return;
+                    var pos = new MintMap.Position(e.latLng.getLat(), e.latLng.getLng());
+                    pos.offset = new MintMap.Offset(e.point.x, e.point.y);
+
+                    _this.mapProps.onClick(pos);
+                  });
+                  map.addListener('mousemove', function (e) {
+                    if (!_this.mapProps.onMouseMove) return;
+                    var pos = new MintMap.Position(e.latLng.getLat(), e.latLng.getLng());
+                    pos.offset = new MintMap.Offset(e.point.x, e.point.y);
+
+                    _this.mapProps.onMouseMove(pos);
+                  });
+                  this.mapInitialized = true;
+                  this.initMarkerPool();
+                  console.log("".concat(this.type, " map script initialized"), divElement);
+                  resolve(map);
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+    var mapValue = this.getBaseToMapZoom(value);
+
+    if (mapValue > 14) {
+      return 14;
+    } else if (mapValue < 1) {
+      return 1;
+    }
+
+    return mapValue;
+  };
+
+  KakaoMintMapController.prototype.destroyMap = function () {
+    var _a;
+
+    try {
+      (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
+    } catch (e) {
+      console.log('kakao map destroy error', e);
+    }
+
+    console.log("".concat(this.type, " map destroyed"));
+  };
+
+  KakaoMintMapController.prototype.getCurrBounds = function () {
+    if (!this.map) {
+      throw new Error('Map is not initialized!!');
+    }
+
+    var bounds = this.map.getBounds();
+    return MintMap.Bounds.fromNESW(this.latLngToPosition(bounds.getNorthEast()), this.latLngToPosition(bounds.getSouthWest()));
+  };
+
+  KakaoMintMapController.prototype.panningTo = function (targetCenter) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.panTo(this.positionToLatLng(targetCenter));
+  };
+
+  KakaoMintMapController.prototype.getZoomLevel = function () {
+    return this.map ? this.getMapToBaseZoom(this.map.getLevel()) : 13;
+  };
+
+  KakaoMintMapController.prototype.setZoomLevel = function (zoom) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setLevel(this.getBaseToMapZoom(zoom));
+  };
+
+  KakaoMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  KakaoMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
+  };
+
+  KakaoMintMapController.prototype.positionToLatLng = function (pos) {
+    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : undefined;
+  };
+
+  KakaoMintMapController.prototype.latLngToPosition = function (latLng) {
+    return latLng ? new MintMap.Position(latLng.getLat(), latLng.getLng()) : undefined;
+  };
+
+  return KakaoMintMapController;
+}(MintMapController.MintMapController);
+
+exports.KakaoMintMapController = KakaoMintMapController;

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -36,4 +36,6 @@ export declare class NaverMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -394,6 +394,9 @@ var NaverMintMapController = function (_super) {
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
@@ -515,6 +518,16 @@ var NaverMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
   };
 
+  NaverMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  NaverMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return NaverMintMapController;
 }(MintMapController.MintMapController);