React Mapbox GLでカスタムマーカーを使用する方法

必要なパッケージのインストール: Reactプロジェクトのルートディレクトリで、以下のコマンドを実行して必要なパッケージをインストールします。

npm install react-mapbox-gl mapbox-gl

Mapbox アクセストークンの取得: Mapbox GLを使用するためには、Mapboxアカウントを作成し、アクセストークンを取得する必要があります。Mapboxのウェブサイトでアカウントを作成し、アクセストークンを取得してください。

マップコンポーネントの作成: Reactコンポーネント内で、Mapbox GLのマップを表示するためのコンポーネントを作成します。以下は基本的な例です。

import React from 'react';
import ReactMapboxGl, { Marker } from 'react-mapbox-gl';
const Map = ReactMapboxGl({
 accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
});
const CustomMarker = () => (
 <Marker
   coordinates={[longitude, latitude]}
   anchor="bottom">
   <img src="custom-marker.png" alt="Custom Marker" />
 </Marker>
);
const MapComponent = () => (
 <Map
   style="mapbox://styles/mapbox/streets-v11"
   center={[longitude, latitude]}
   zoom={[zoomLevel]}
   containerStyle={{
     height: '400px',
     width: '100%'
   }}>
   <CustomMarker />
 </Map>
);
export default MapComponent;

YOUR_MAPBOX_ACCESS_TOKEN を取得したアクセストークンに置き換えてください。longitude、latitude、zoomLevel は表示したい場所の座標とズームレベルに置き換えてください。

マップコンポーネントの使用: 他のReactコンポーネントでマップコンポーネントを使用します。

import React from 'react';
import MapComponent from './MapComponent';
const App = () => (
 <div>
   <h1>カスタムマーカーを使用したマップ</h1>
   <MapComponent />
 </div>
);
export default App;

マップコンポーネントを適切な場所で呼び出すことで、カスタムマーカーを含むマップが表示されます。