@42dot/maps-platform-js v0.2.3

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

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

Credentials

제공받은 APP_ID와 APP_KEY를 {@link setCredentials | setCredentials}를 호출하여 라이브러리에 설정해 사용할 수 있습니다.

Sample

dot42.maps.setCredentials("{{ APP_ID }}", "{{ APP_KEY }}");

Quick start

지도 표시

지도 표시를 위해선 지도를 위한 DOM element를 생성 후 아래와 같은 방법으로 {@link Map | Map} 클래스를 이용해 사용가능합니다.

Sample

<div id="map"></div>
<script>
  const map = new dot42.maps.Map("map", {
    zoom: 14,
  });

  // --- or ---

  const map = new dot42.maps.Map(document.getElementById("map"), {
    zoom: 14,
  });
</script>

Marker

지도위에 위치를 표시할 수 있는 마커를 생성하여 그릴 수 있는 기능을 제공합니다.

const map = new dot42.maps.Map("map", {
  zoom: 14,
});
const marker = new dot42.maps.Marker();
marker.setColor("black").setMap(map);

Drawing

Maps platform에서는 지도위에 선형, 도형 등을 그릴 수 있는 방법을 제공합니다. {@link Map | Map} 클래스의 {@link Map.addSource | Map.addSource} 함수를 이용해서 데이터(GeoJSON)를 설정하고, 데이터를 이용하여 레이어를 추가하여 지도에 표시합니다.

const map = new dot42.maps.Map("map", {
  zoom: 14,
});

map.addEventListener("load", async () => {
  const line = await fetch("/line.geojson");
  const source = map.addSource(await line.json());
  const layer = source.addSourceLayer("example", {
    type: "line",
    paint: {
      "line-color": "#5A46FA",
      "line-width": 14,
    },
    layout: {
      "line-cap": "round",
      "line-join": "round",
    },
  });
});

Places

주소를 좌표로 혹은 좌표를 주소로 변환하는 geocoding을 지원합니다. {@link Places | Places }를 참고해주세요.

let resp = await dot42.maps.Places.geocode("남부순환로 2621");
console.log(resp);

resp = await dot42.maps.Places.reverseGeocode({
  lat: 37.4852303,
  lon: 127.0366098,
});
console.log(resp);

Directions

도로를 기준으로 하는 길을 찾고 거리, 도착시간 등을 알려주는 API를 지원합니다. {@link Directions | Directions } 클래스를 참고해주세요.

경유지, 교통정보 사용 여부, 회피옵션 등 다양한 옵션을 지원합니다.

const directions = new dot42.maps.Directions();
const direction = await directions.getDirection({
  origin: {
    lat: 37.575985588,
    lon: 126.97688108,
  },
  dest: {
    lat: 37.39609581215878,
    lon: 127.11178616908984,
  },
});

const source = map.addSource(direction.result.geometry);
const layer = source.addSourceLayer("example", {
  type: "line",
  paint: {
    "line-color": "#5A46FA",
    "line-width": 10,
  },
  layout: {
    "line-cap": "round",
    "line-join": "round",
  },
});