ドキュメント / セットアップ / React / HERE

HERE セットアップ

Web で HERE を MapConductor から使う手順です。HERE Maps API for JavaScript は npm ではなく CDN から読み込み、H.service.Platform をアプリ側で作ってビューに渡します。

PACKAGE

react-for-here

API KEY

必要

CSS

CDN から

REACT NATIVE

あり

ほかのプラットフォームAndroid iOS

デモを見る店舗マップ · React ↗

前提

Node.js 18 以上

HERE Platform の API キー

STEP 01

インストールする

パッケージ自体は HERE の JS API を同梱しません。ページ側で読み込んだ H グローバルを使います。

terminalnpm

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

STEP 02

HERE の JS API を読み込む

HERE 自身のクイックスタートと同じく、CDN から script タグで読み込みます。@mapconductor/react-for-here はこれらが公開する H グローバルを前提にしています。

index.htmlHTML

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

STEP 03

Platform を作ってビューに渡す

HERE ではキーを状態フックではなく H.service.Platform に渡します。Platform はアプリ側の認証情報で作り、ビューの platform props に渡します。useMemo で作れば再レンダーのたびに作り直されません。

HereMap.tsxTypeScript · React

const platform = useMemo(
  () => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
  [],
);

<HereMapView2D state={state} platform={platform}>{children}</HereMapView2D>

注意

キーはビルド時の環境変数（Vite なら import.meta.env.VITE_*）から渡し、ソース管理には入れないでください。フロントエンドに渡る以上、公開されても被害が出ないようリファラ制限やドメイン制限を必ず掛けます。

動作確認

ここまで動けば完了

HERE の地図が出れば完了です。Web の HERE プロバイダは 2D ビューのみです。

HereMap.tsxTypeScript · React

import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { HereMapDesign, HereMapView2D, useHereViewState } from '@mapconductor/react-for-here';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function HereMap() {
  const state = useHereViewState({
    mapDesignType: HereMapDesign.NormalDay,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  // HERE Maps API for JavaScript is loaded from the CDN (see index.html);
  // the platform must be created with the host page's own credentials.
  const platform = useMemo(
    () => new H.service.Platform({ apikey: import.meta.env.VITE_HERE_API_KEY }),
    [],
  );
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <HereMapView2D state={state} platform={platform}>
      <Marker state={markerState} />
    </HereMapView2D>
  );
}

地図デザイン

HereMapDesign は HERE のマップスキームに対応します。

HereMapDesign

Notes

NormalDay / NormalNight

標準スタイルの昼・夜

Satellite

衛星画像

HybridDay / HybridNight

衛星画像＋道路とラベル

LiteDay / LiteNight

軽量スタイル

LogisticsDay

物流向け

うまくいかないとき

H が undefined になる

index.html の script タグが読み込まれているか、順序が正しいか確認します（core → core-legacy → service → ui → mapevents）。
SSR している場合は、Platform の生成をクライアント側だけで行うようにします。

地図が出ない

H.service.Platform に渡した apikey が正しいか確認します。

プロバイダを切り替えるとフックの順序エラーが出る

React はフックの呼び出し順を変えられません。プロバイダごとに小さなコンポーネントを作り、その中でそのプロバイダのフックを呼ぶ形にします。サンプルアプリの providers/ ディレクトリがこの構成です。

次に

マーカーが多い場合は markerTilingOptions を渡すと、静的なマーカー群をラスターオーバーレイとしてまとめて描画します。