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

Mapbox セットアップ

Web で Mapbox を MapConductor から使う手順です。アクセストークンが要るのは Mapbox ホストのスタイル（mapbox:// で始まるもの）を使うときだけです。

PACKAGE

react-for-mapbox

API KEY

スタイル次第

CSS

必要

REACT NATIVE

なし

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

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

前提

Node.js 18 以上

Mapbox ホストのスタイルを使う場合はパブリックアクセストークン

STEP 01

インストールする

mapbox-gl はパッケージに同梱されているので、別途インストールする必要はありません。React Native 版はありません。

terminalnpm

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

STEP 02

スタイルシートを読み込む

アプリのエントリーポイントで一度だけ読み込みます。忘れると地図の位置やコントロールの見た目が崩れます。

main.tsxTypeScript

import '@mapconductor/react-for-mapbox/style.css';

STEP 03

アクセストークンを渡す（必要な場合）

トークンは状態フックに渡します。内部で mapboxgl.accessToken にグローバル設定されます。OSM ベースのデザインだけを使うなら省略できます。

HelloMap.tsxTypeScript · React

const mapState = useMapboxViewState({
  id: 'mapbox-map',
  accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
  mapDesignType: MapboxDesign.Streets,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

キーはビュー component の props ではなく、状態フックに渡します。props に置くとテストのログやスナップショットに混ざるためです。

注意

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

動作確認

ここまで動けば完了

OsmBright を使えばトークンなしでも動作を確認できます。

HelloMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapboxDesign, MapBoxMapView2D, useMapboxViewState } from '@mapconductor/react-for-mapbox';
import '@mapconductor/react-for-mapbox/style.css';

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

export function HelloMap() {
  // No token needed for the OsmBright design
  const mapState = useMapboxViewState({
    id: 'mapbox-map',
    mapDesignType: MapboxDesign.OsmBright,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

状態オブジェクト

useMapboxViewState が受け取るパラメータです。ビューの export 名が MapBoxMapView / MapBoxMapView2D（B が大文字）である点に注意してください。

signatureTypeScript

useMapboxViewState({
  id?: string;
  accessToken?: string;
  mapDesignType?: MapboxMapDesignType; // default MapboxDesign.Streets
  cameraPosition?: MapCameraPosition;  // default MapCameraPosition.Default
})

地図デザイン

MapboxDesign は「トークンが要るもの」と「要らないもの」の 2 群に分かれます。

MapboxDesign

Notes

Streets / Outdoors / Light / Dark

Mapbox ホスト。トークンが必要

SatelliteStreets

Mapbox ホストの衛星画像。トークンが必要

OsmBright / OsmBrightEn / OsmBrightJa

MapLibre と共通の OSM スタイル。トークン不要

MapTilerToner* / MapTilerBasic* / OpenMapTiles

同じく MapLibre 共通。トークン不要

うまくいかないとき

Mapbox のスタイルだけ表示されない

mapbox:// で始まるスタイルにはトークンが必要です。accessToken を渡しているか確認します。
トークンがパブリックトークンか、失効していないか確認します。

ズームレベルが他のプロバイダとずれる

MapConductor は Google 基準にズームを揃えています。Mapbox はそこに実測のオフセット（googleZoom ≒ mapboxZoom + 1.0）を掛けて換算しています。

開発時だけ地図が二重に初期化される

React StrictMode は effect を 2 回実行します。各プロバイダはこれを検知して片方を破棄するようになっているので、StrictMode を外す必要はありません。

次に

MapLibre と同じ構造なので、mapDesignType の変更は地図の作り直しになります。