react-map-glのレイヤーを試してみる

はじめに

前回に続き、react-map-glを試します。今回はGeoJSONレイヤーを追加します。東京駅を表現したポリゴンを追加します。

以下がデモです。SafariやFirefoxを使用されている方はデモが実行されない可能性があります。Chromeで表示するか、 https://stackblitz.com/edit/vitejs-vite-fi2kyj を直接ご参照ください。

コードを確認

以下が今回作成したコードです。YOUR_MAPBOX_ACCESS_TOKENはご自身のMapboxのパブリックトークンを使用してください。

App.jsx

import Map, { Source, Layer } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import './App.css';

const TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
function App() {
  const TOKYO_STATION = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [139.76761579513547, 35.68415867760534],
              [139.76710081100464, 35.682973504734456],
              [139.76534128189087, 35.682712067172254],
              [139.76489067077637, 35.680533387506074],
              [139.76585626602173, 35.679609609368576],
              [139.76523399353027, 35.677796881563715],
              [139.7668218612671, 35.677448275341874],
              [139.7706413269043, 35.68347894825895],
              [139.76761579513547, 35.68415867760534],
            ],
          ],
        },
      },
    ],
  };

  return (
    <Map
      mapLib={import('mapbox-gl')}
      initialViewState={{
        longitude: 139.76711,
        latitude: 35.68074,
        zoom: 14.5,
      }}
      style={{ position: 'absolute', top: 0, bottom: 0, width: '100%' }}
      mapStyle="mapbox://styles/mapbox/streets-v12"
      mapboxAccessToken={TOKEN}
    >
      <Source id="tokyo_station" type="geojson" data={TOKYO_STATION}>
        <Layer
          id="tokyo_station"
          type="fill"
          paint={{ 'fill-color': '#00ff00' }}
        ></Layer>
      </Source>
    </Map>
  );
}

export default App;

ソースの作成

SourceコンポーネントはMapコンテキストを取得しているので、Mapコンポーネントの子コンポーネントとして作成します。また、Map#addSourceは以下のコードで実行されますが、引数のoptionsはpropsがそのまま展開されます。

https://github.com/visgl/react-map-gl/blob/v7.1.7/src/components/source.ts#L32-L36

そこで、ソースの種類に合わせてdataなどをpropsとして指定します。

<Source id="tokyo_station" type="geojson" data={TOKYO_STATION}>

レイヤーの作成

LayerコンポーネントはMapコンテキストを取得しているので、Mapコンポーネントの子コンポーネントとして作成します。また、Map#addLayerは以下のコードで実行されますが、引数のoptionsはpropsがそのまま展開されます。

https://github.com/visgl/react-map-gl/blob/v7.1.7/src/components/layer.ts#L79-L83

そこで、レイヤーの種類に合わせて以下のようにpropsを指定します。

<Layer
  id="tokyo_station"
  type="fill"
  paint={{ 'fill-color': '#00ff00' }}
>

また、SourceコンポーネントでソースIDをpropとして追加してくれているいます。したがって、LayerコンポーネントをSourceコンポーネントの子コンポーネントとして作成した場合にはソースIDは指定する必要がありません。

まとめ

レイヤーの追加も直感的に行うことができました。