ドキュメント / セットアップ / 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 です。どちらも同じ状態オブジェクトを共有します。