문서 / 설정 / React / Longdo

Longdo 설정

Web에서 Longdo Map을 MapConductor에서 쓰는 절차입니다. 태국의 지도에 강한 프로바이더로, Longdo Map JS API3을 감싸고 있습니다.

PACKAGE

react-for-longdo

API KEY

필요

CSS

불필요

REACT NATIVE

없음

같은 프로바이더, 다른 플랫폼Android iOS

데모 보기매장 지도 · React ↗

시작하기 전에

Node.js 18 이상

Longdo Map 콘솔에서 발행한 API 키

STEP 01

설치한다

Longdo Map JS API3은 패키지가 키를 붙여 동적으로 읽어 들입니다. script 태그를 쓸 필요는 없습니다.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-longdo

STEP 02

API 키를 상태 훅에 넘긴다

키는 도메인에 연결해 등록합니다. 빈 문자열인 채로는 지도가 읽히지 않습니다.

LongdoMap.tsxTypeScript · React

const state = useLongdoViewState({
  apiKey: import.meta.env.VITE_LONGDO,
  mapDesignType: LongdoDesign.Normal,
  cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
});

주의

키는 빌드 시의 환경 변수(Vite라면 import.meta.env.VITE_*)에서 넘기고, 소스 관리에는 넣지 마세요. 프런트엔드로 전달되는 이상, 공개되어도 피해가 나지 않도록 리퍼러 제한이나 도메인 제한을 반드시 겁니다.

동작 확인

여기까지 보이면 완료

방콕을 중심으로 지도가 나오면 완료입니다.

LongdoMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LongdoDesign, LongdoMapView2D, useLongdoViewState } from '@mapconductor/react-for-longdo';

const BANGKOK = createGeoPoint({ latitude: 13.7563, longitude: 100.5018 });

export function LongdoMap() {
  const state = useLongdoViewState({
    apiKey: import.meta.env.VITE_LONGDO,
    mapDesignType: LongdoDesign.Normal,
    cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'bkk', position: BANGKOK }));

  return (
    <LongdoMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </LongdoMapView2D>
  );
}

지도 디자인

LongdoDesign은 Longdo의 베이스 레이어에 대응합니다.

LongdoDesign

Notes

Normal / Easy / Political

표준 계열의 스타일

Pastel / PastelGray / Light / Gray

옅은 스타일

Night / Dark / Hard

암색・고대비

Satellite / Hybrid

위성 화상과 하이브리드

Osm

OpenStreetMap 기반

잘 안 될 때

지도가 나오지 않는다

apiKey가 빈 문자열이 되어 있지 않은지 확인합니다.
콘솔에서 키가 배포 도메인에 연결되어 있는지 확인합니다.

개발 시에만 지도가 이중으로 초기화된다

React StrictMode는 effect를 2번 실행합니다. 각 프로바이더는 이것을 감지해 한쪽을 파기하도록 되어 있으므로, StrictMode를 뺄 필요는 없습니다.

LongdoMapView는 3D, LongdoMapView2D는 2D입니다. 둘 다 같은 상태 객체를 공유합니다.