React Mapbox GLでカスタムマーカーを追加する方法

React Mapbox GLのインストールとセットアップ: まず、React Mapbox GLパッケージをプロジェクトにインストールします。以下のコマンドを使用します。

npm install react-mapbox-gl mapbox-gl

または

yarn add react-mapbox-gl mapbox-gl

次に、Reactコンポーネント内でMapコンポーネントを設定します。

import React from 'react';
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
const Map = ReactMapboxGl({
  accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
});
const CustomMarkerMap = () => (
  <Map
    style="mapbox://styles/mapbox/streets-v11"
    center={[lng, lat]}
    zoom={[zoom]}
    containerStyle={{
      height: '400px',
      width: '100%'
    }}
  >
    {/* マーカーを追加するためのLayerとFeature */}
    <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
      <Feature coordinates={[lng, lat]} />
    </Layer>
  </Map>
);
export default CustomMarkerMap;

カスタムマーカーの追加: 上記の例では、マップ上に単純なマーカーを追加しています。カスタムマーカーを表示するには、マーカーアイコンの画像を指定する必要があります。マーカーアイコンは、Mapboxのアイコンセットを使用するか、独自のアイコンを指定することができます。

マーカーアイコンをMapboxのアイコンセットから選択する場合:

<Layer type="symbol" id="marker" layout={{ 'icon-image': 'rocket-15' }}>
  {/* ... */}
</Layer>

独自のマーカーアイコンを使用する場合:

<Layer type="symbol" id="marker" layout={{ 'icon-image': 'custom-marker' }}>
  {/* ... */}
</Layer>

上記の例では、"custom-marker"という名前のアイコンを使用しています。このアイコンは、プロジェクト内の適切な場所に配置されている必要があります。

カスタムマーカーの詳細なスタイリング: カスタムマーカーのスタイルを詳細に制御するには、layoutオブジェクト内でさまざまなプロパティを指定できます。以下にいくつかの例を示します。

<Layer
  type="symbol"
  id="marker"
  layout={{
    'icon-image': 'custom-marker',
    'icon-size': 1.5,
    'icon-rotate': 45,
    'icon-offset': [0, -10]
  }}
>
  {/* ... */}
</Layer>

上記の例では、マーカーアイコンのサイズを1.5倍に拡大し、45度回転させ、Y軸方向に-10ピクセルオフセットを適用しています。

これで、React Mapbox GLでカスタムマーカーを追加する方法がわかりました。適宜、マーカーアイコンの画像やスタイルをカスタマイズして、プロジェクトに適したマーカーを表示できます。