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

Apple MapKit セットアップ

Web で Apple MapKit JS を MapConductor から使う手順です。iOS 版と違い、Apple が発行する JWT トークンが必要です。

PACKAGE

react-for-mapkit

API KEY

JWT トークン

CSS

不要

REACT

19 以上

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

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

前提

Node.js 18 以上、React 19 以上

Apple Developer アカウントと MapKit JS の Maps ID / 秘密鍵

STEP 01

MapKit JS のトークンを用意する

Apple Developer で Maps ID と秘密鍵を作り、サーバー側で JWT を署名して発行します。トークンには有効期限があるため、長時間開いたままの画面では更新の仕組みが要ります。

注意

秘密鍵をフロントエンドに置かないでください。JWT の署名は必ずサーバー側で行います。

STEP 02

インストールする

MapKit JS は Apple の CDN からパッケージが動的に読み込みます。script タグを書く必要はありません。

terminalnpm

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

STEP 03

トークンを状態フックに渡す

静的なトークンを渡すほか、トークンを供給・更新するコールバックを渡すこともできます。両方指定した場合はコールバックが優先されます。

MapKitMap.tsxTypeScript · React

const state = useMapKitViewState({
  token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
  mapDesignType: MapKitMapDesign.Standard,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

動作確認

ここまで動けば完了

MapKit の地図が出れば完了です。

MapKitMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapKitMapDesign, MapKitMapView, useMapKitViewState } from '@mapconductor/react-for-mapkit';

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

export function MapKitMap() {
  const state = useMapKitViewState({
    token: import.meta.env.VITE_MAPKIT_TOKEN ?? '',
    mapDesignType: MapKitMapDesign.Standard,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

地図デザイン

MapKitMapDesign は MapKit のマップタイプに対応します。

MapKitMapDesign

Notes

Standard

標準の道路地図

Satellite

衛星画像

Hybrid

衛星画像＋道路とラベル

MutedStandard

データを載せる下地向け

SatelliteFlyover / HybridFlyover

Flyover 対応地域向け

うまくいかないとき

地図が出ない

トークンが空文字になっていないか確認します。
トークンの有効期限が切れていないか確認します。長時間開く画面では authorizationCallback で更新してください。

React 18 でビルドできない

このパッケージだけ React 19 以上を要求します。

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

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

次に

iOS 版の MapKit プロバイダはキーも初期化も不要です。同じ画面コードのまま、プラットフォームごとに使い分けられます。