@42dot/maps-platform-js

Maps Platform JS

Maps Platform JS는 42dot이 제공하는 Map, Direction, Place API등의 사용을 위한 JS 라이브러리입니다.

Maps Platform 지도, 경로안내, 주소검색, 공간검색, 실시간 교통정보 검색 등 다양한 기능을 제공합니다.

Installation

HTML에 script 태그로 설치하는 방법과 npm을 이용하는 방법 두가지를 제공하고 있습니다.

1. <script>를 이용한 방법

<script src="https://static.maps.umos.ai/sdk/v1/maps.js"></script>

2. npm을 이용한 방법

$ npm install @42dot/maps-platform-js

setClientCredentials

• setClientCredentials에서 clientId, clientSecret과 함께 사용할 맵 라이브러리를 추가로 지정해야 합니다.
• mapbox-gl, maplibre-gl 두 가지 맵 라이브러리를 선택하여 사용할 수 있습니다.
• 정상적인 SDK 사용을 위해서는 선택한 맵 라이브러리의 dependencies를 설치해야 합니다.
• mapbox-gl를 사용할 경우, 맵 초기화 시 accessToken을 파라미터로 전달해야 합니다.

---

1. MapLibre 사용 방법

1.1. 설치

npm install maplibre-gl

1.2. 설정

import maplibre from "maplibre-gl";

setClientCredentials(
  "{{clientId}}",
  "{{clientSecret}}",
  import("maplibre-gl"), // 사용할 라이브러리 지정
  {
    env: "{{int|real|stage}}",
  },
);

1.3. 맵 초기화

const map = new Map(mapRef.current, {});

---

2. Mapbox 사용 방법

2.1. 설치

npm install mapbox-gl

2.2. 설정

import mapboxgl from "mapbox-gl";

setClientCredentials(
  "{{clientId}}",
  "{{clientSecret}}",
  import("mapboxgl-gl"), // 사용할 라이브러리 지정
  {
    env: "{{int|real|stage}}",
  },
);

2.3. 맵 초기화 (Access Token 필요)

const map = new Map(mapRef.current, {
  accessToken: process.env.MAPBOX_ACCESS_TOKEN,
});

---

Common Interface

Coordinates

지도의 경위도 좌표를 나타내는 클래스입니다.

Field	Type	Description
lat	number	위도
lon	number	경도

CoordinatesLike

지도 상의 좌표를 표현하는 다양한 형식을 정의합니다.

• CoordinatesArray 형식의 배열
• 객체 형식 { lon: number; lat: number }
• Coordinates 클래스 Instance

CoordinatesLong

latitude,longitude 에 대응하기 위한 interface coordinate 형식입니다.

Field	Type	Description
latitude	number	위도
longitude	number	경도

CoordinatesArray

경위도를 [경도, 위도] 형식으로 표현하는 배열입니다.

인덱스	Description	Type
0	경도 (longitude)	number
1	위도 (latitude)	number

예시: [126.9780, 37.5665]는 경도 126.9780, 위도 37.5665를 나타냅니다.

CoordinatesBounds

지도의 경계 영역을 나타내는 클래스입니다.

Field	Type	Description
sw	Coordinates	남서쪽 모서리 좌표
ne	Coordinates	북동쪽 모서리 좌표

CoordinatesBoundsLike

CoordinatesBoundsLike는 지도 경계 영역을 표현하는 두 가지 형식을 지원합니다.

형식	Description
CoordinatesBounds	sw와 ne Field를 사용하여 남서쪽과 북동쪽 모서리 좌표를 나타내는 클래스
[number, number, number, number] 배열	[남서쪽 경도, 남서쪽 위도, 북동쪽 경도, 북동쪽 위도] 형식의 number 배열

예시

• CoordinatesBounds 객체: { sw: { lon: 126.0, lat: 37.0 }, ne: { lon: 127.0, lat: 38.0 } }
• 배열: [126.0, 37.0, 127.0, 38.0] (남서쪽 경도 126.0, 위도 37.0과 북동쪽 경도 127.0, 위도 38.0)

---