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