문서 / 설정 / React / TomTom

TomTom 설정

Web에서 TomTom Orbis Maps를 MapConductor에서 쓰는 절차입니다. @tomtom-org/maps-sdk(maplibre 기반)를 감싸고 있습니다.

PACKAGE

react-for-tomtom

API KEY

필요

CSS

불필요

REACT NATIVE

없음

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

데모 보기매장 지도 · React ↗

시작하기 전에

Node.js 18 이상

TomTom Developer Portal의 Orbis Maps API 키

STEP 01

설치한다

@tomtom-org/maps-sdk와 maplibre-gl은 패키지에 동봉되어 있습니다.

terminalnpm

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

STEP 02

API 키를 상태 훅에 넘긴다

키는 뷰 component의 props가 아니라, 상태 훅에 넘깁니다. props에 두면 테스트의 로그나 스냅숏에 섞이기 때문입니다.

TomTomMap.tsxTypeScript · React

const state = useTomTomViewState({
  apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
  mapDesignType: TomTomDesign.Standard,
  cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});

주의

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

동작 확인

여기까지 보이면 완료

TomTom의 지도가 나오면 완료입니다.

TomTomMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { TomTomDesign, TomTomMapView2D, useTomTomViewState } from '@mapconductor/react-for-tomtom';

const AMSTERDAM = createGeoPoint({ latitude: 52.3676, longitude: 4.9041 });

export function TomTomMap() {
  const state = useTomTomViewState({
    apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
    mapDesignType: TomTomDesign.Standard,
    cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'ams', position: AMSTERDAM }));

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

지도 디자인

TomTomDesign은 Orbis Maps의 스타일에 대응합니다. 명암의 페어가 갖춰져 있습니다.

TomTomDesign

Notes

Standard / StandardLight / StandardDark

표준의 열람용 스타일

Driving / DrivingLight / DrivingDark

운전용

MonoLight / MonoDark

단색. 데이터를 얹는 바탕용

Satellite

위성 화상

잘 안 될 때

지도가 새하얀 채로

apiKey가 빈 문자열이 되어 있지 않은지 확인합니다.
키가 Orbis Maps용으로 발행된 것인지 확인합니다.

줌이 다른 프로바이더와 어긋난다

TomTom의 줌은 위도에 의존합니다. MapConductor는 카메라 위도를 써서 Google 상당의 줌으로 환산하고 있습니다.

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

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

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