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

Azure Maps セットアップ

Web で Azure Maps を MapConductor から使う手順です。Azure のサブスクリプションキーで認証します。

PACKAGE

react-for-azuremaps

API KEY

サブスクリプションキー

CSS

必要

REACT NATIVE

なし

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

前提

Node.js 18 以上

Azure Maps のアカウントとサブスクリプションキー

STEP 01

インストールする

azure-maps-control はパッケージに同梱されています。

terminalnpm

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

STEP 02

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

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

main.tsxTypeScript

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

STEP 03

サブスクリプションキーを渡す

キーは状態フックの subscriptionKey に渡します。空のままだと地図は初期化されません。

AzureMap.tsxTypeScript · React

const state = useAzureMapsViewState({
  subscriptionKey: import.meta.env.VITE_AZURE_MAPS_SUBSCRIPTION_KEY ?? '',
  mapDesignType: AzureMapsDesign.Road,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

注意

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

動作確認

ここまで動けば完了

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

AzureMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { AzureMapsDesign, AzureMapsMapView, useAzureMapsViewState } from '@mapconductor/react-for-azuremaps';
import '@mapconductor/react-for-azuremaps/style.css';

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

export function AzureMap() {
  const state = useAzureMapsViewState({
    subscriptionKey: import.meta.env.VITE_AZURE_MAPS_SUBSCRIPTION_KEY ?? '',
    mapDesignType: AzureMapsDesign.Road,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

地図デザイン

AzureMapsDesign は Azure Maps のスタイルに対応します。

AzureMapsDesign

Notes

Road / RoadShadedRelief

標準の道路地図と陰影起伏付き

Satellite / SatelliteRoadLabels

衛星画像とラベル付き

GrayscaleLight / GrayscaleDark

データを載せる下地向け

Night

夜間スタイル

HighContrastLight / HighContrastDark

高コントラスト

Blank / BlankAccessible

ベースマップなし

うまくいかないとき

地図が出ない

subscriptionKey が空文字になっていないか確認します。
Azure ポータルでキーが有効か確認します。

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

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

次に

サブスクリプションキーはブラウザに渡ります。本番では利用範囲を制限するか、Azure の認証方式を検討してください。