@mint-ui/map
Version:
- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported
112 lines (111 loc) • 2.75 kB
TypeScript
/// <reference types="react" />
import { MapType } from "./CommonTypes";
import { Position } from "./MapTypes";
import { MintMapEvents } from "./MintMapEvents";
import { Property } from "csstype";
/**
* Mint Map Props
*/
export interface MintMapProps extends MintMapEvents {
/**
* Mint Map 에서 지원하는 지도 타입
*/
mapType: MapType | null;
/**
* Map 종류에 따른 인증키
* @description 각 지도 타입에 맞는 키를 입력해야한다.
*/
mapKey: string;
/**
* Map Script 로드시에 지도 타입에 따라 로드할 서브 모듈 목록
* @description 각 지도 타입에 맞는 서브모듈을 지정해야한다.
*/
scriptModules?: string[];
/**
* Map Script 로드시에 파라미터를 추가
* @description 내부적으로 key=value 의 형태로 처리된다.
*/
scriptParams?: Record<string, string>;
/**
* Map 종류에 따른 추가 맵 ID
* @description 특정 지도에서는 맵ID 가 추가로 요구된다 (ex: Google Maps)
*/
mapId?: string;
/**
* 지도의 기본 설정 정보
*/
base?: BaseProps;
/**
* 지도의 보기 설정
*/
visible?: boolean;
/**
* 지도 중심 좌표
*/
center?: Position;
/**
* center 값을 통해 지도의 중심 으로 이동할때 panning 효과 적용 여부
*/
centerMoveWithPanning?: boolean;
/**
* 지도 줌레벨
*/
zoomLevel?: number;
/**
* 마우스의 드래그로 지도 위치 움직임 가능 여부
*/
draggable?: boolean;
/**
* 키보드 방향키로 지도 위치 움직임 가능 여부
*/
keyboardShortcuts?: boolean;
/**
* 마커 cache 사용 여부
*/
markerCache?: boolean;
/**
* 마커 cache 사용시 초기 pool 갯수
*/
markerCachePoolSize?: number;
/**
* 마커 cache 사용시 초기 pool 갯수
*/
boundsChangeThrottlingTime?: number;
/**
* 로딩 완료 후 장면전환 효과 여부
*/
dissolveEffectWhenLoaded?: boolean;
/**
* 맵 로딩화면
*/
mapLoadingComponent?: () => JSX.Element;
/**
* 디버그
*/
debug?: boolean;
}
/**
* 지도의 기본 설정
*/
export interface BaseProps {
/**
* 지도 시작시의 중심 좌표
*/
center?: Position;
/**
* 지도 시작시의 줌레벨
*/
zoomLevel?: number;
/**
* 지도의 최대 줌 레벨
*/
maxZoomLevel?: number;
/**
* 지도의 최소 줌 레벨
*/
minZoomLevel?: number;
/**
* 지도의 기본 커서
*/
mapCursor?: Property.Cursor;
}