문서 / 설정 / React / Mappls

Mappls 설정

Mappls(MapmyIndia)의 Web SDK를 MapConductor에서 쓰는 절차입니다. web에서는 1개의 API 키를 view state에 넘깁니다.

PACKAGE
@mapconductor/react-for-mappls
API KEY
필요
VIEW
MapplsMapView2D
TIME
10분
같은 프로바이더, 다른 플랫폼AndroidiOS

시작하기 전에

Node.js와 React 18 이상의 프로젝트
Mappls(MapmyIndia)의 계정과 API 키
STEP 01

API 키를 취득한다

Mappls의 개발자 콘솔에서 Web용의 API 키를 발행합니다. 네이티브 쪽과 달리, web은 설정 파일이 아니라 1개의 키로 동작합니다.

STEP 02

패키지를 넣는다

Mappls의 web SDK는 의존으로서 동봉됩니다.

shellShell
npm install @mapconductor/react-for-mappls @mapconductor/js-sdk-core @mapconductor/js-sdk-react
STEP 03

키를 view state에 넘긴다

Mappls의 web SDK는 sdk.mappls.com에서 키를 붙여 읽힙니다.

동작 확인

여기까지 보이면 완료

델리를 중심으로 지도를 냅니다. 타일이 읽히면 완료입니다.

import {
  MapplsDesign,
  MapplsMapView2D,
  useMapplsViewState,
} from '@mapconductor/react-for-mappls';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';

// Your own key. Read it from your environment however your build tool does
// it, and keep it out of source control.
const MAPPLS_API_KEY = '…';

const DELHI = createGeoPoint({ latitude: 28.6139, longitude: 77.2090 });

export default function App() {
  const state = useMapplsViewState({
    apiKey: MAPPLS_API_KEY,
    mapDesignType: MapplsDesign.Default,
    cameraPosition: createMapCameraPosition({ position: DELHI, zoom: 11 }),
  });

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <MapplsMapView2D state={state} />
    </div>
  );
}

지도 디자인

Notes
Default
계약에 관계없이 쓸 수 있는 기본 스타일
StandardDay
표준의 낮 스타일
StandardNight / GreyDay
추가 요금의 유료 옵션. 계약하지 않으면 SDK가 튕겨 냄

잘 안 될 때

지도가 새하얗고, 타일이 한 장도 오지 않는다

  • 자격 정보가 지도 생성보다 먼저 설정되어 있는지 확인합니다.
  • Mappls의 콘솔에서 키가 유효한지, 이용 한도를 넘지 않았는지 확인합니다.
  • 단말이 네트워크에 나갈 수 있는지 확인합니다.

스타일을 바꾸면 style not found가 된다

  • StandardNight와 GreyDay는 추가 요금의 유료 옵션입니다. 계약하지 않은 경우는 Default나 StandardDay를 써 주세요.

SDK의 스크립트가 401로 읽히지 않는다

  • Mappls의 web SDK는 sdk.mappls.com에서 키를 붙여 읽힙니다. 401이 반환되는 경우, 그 키에 web SDK의 이용 권한이 붙어 있지 않거나, 실효되었습니다.

다음

마커・폴리라인・폴리곤・원・그라운드 이미지・래스터 레이어・InfoBubble은 공통 API인 채로 쓸 수 있습니다.