@mint-ui/map/dist/components/mint-map/core/MintMapCore.js

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var classNames = require('classnames/bind');
var React = require('react');
var MapTypes = require('../types/MapTypes.js');
var MintMapProvider = require('./provider/MintMapProvider.js');
var MintMapCore_module = require('./MintMapCore.module.scss.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var cn = classNames__default["default"].bind(MintMapCore_module);
function MintMapCore(_a) {
  var _this = this;

  var onLoad = _a.onLoad,
      _b = _a.visible,
      visible = _b === void 0 ? true : _b,
      zoomLevel = _a.zoomLevel,
      center = _a.center,
      _c = _a.centerMoveWithPanning,
      centerMoveWithPanning = _c === void 0 ? false : _c,
      children = _a.children; //controller

  var controller = MintMapProvider.useMintMapController(); //맵 초기화

  var elementRef = React.useRef(null);

  var _d = React.useState(false),
      mapInitialized = _d[0],
      setMapInitialized = _d[1];

  var currMapInitialized = React.useRef(false);
  React.useEffect(function () {
    (function () {
      return tslib.__awaiter(_this, void 0, void 0, function () {
        var map_1;
        return tslib.__generator(this, function (_a) {
          switch (_a.label) {
            case 0:
              if (!(elementRef && elementRef.current)) return [3
              /*break*/
              , 2];
              return [4
              /*yield*/
              , controller.initializingMap(elementRef.current)];

            case 1:
              map_1 = _a.sent();

              if (!currMapInitialized.current) {
                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)

                setTimeout(function () {
                  // console.log('setMapInitialized true');
                  setMapInitialized(true);
                  onLoad && onLoad(map_1, controller);
                }, 100);
              }

              _a.label = 2;

            case 2:
              return [2
              /*return*/
              ];
          }
        });
      });
    })();
  }, [controller, elementRef]); //줌레벨

  React.useEffect(function () {
    if (zoomLevel && controller && mapInitialized) {
      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();

      if (prevZoomLevel !== zoomLevel) {
        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
      }
    }
  }, [zoomLevel]); //센터

  React.useEffect(function () {
    if (center && controller && mapInitialized) {
      var prevCenter = controller.getCenter();

      if (!MapTypes.Position.equals(prevCenter, center)) {
        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
      }
    }
  }, [center]);
  return React__default["default"].createElement("div", {
    className: cn('mint-map-root')
  }, mapInitialized && children, React__default["default"].createElement("div", {
    className: cn('mint-map-container'),
    style: {
      visibility: visible ? 'inherit' : 'hidden'
    },
    ref: elementRef
  }));
}

exports.MintMapCore = MintMapCore;