react-map-glでgeojsonで定義されたポリゴンを表示する

mapboxのドキュメント

https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/

を読むとプレーンなjsでの実装サンプルはありますが、react-map-glではどうすればいいんだろうと思っていろいろ試行錯誤したらとりあえず表示できるところまではできたのでメモ

とりあえず動くコードはこんな感じになった

import * as React from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import Map, {Source, Layer}  from "react-map-gl";


const layerStyle = {
  id: 'point',
  type: 'fill',
  paint: {
    "fill-color": "#00ffff",
    "fill-opacity": 0.7,
    "fill-outline-color": "#ff0000",
  }
};

const maine = {
  'type': 'Feature',
  'geometry': {
      'type': 'Polygon',
      // These coordinates outline Maine.
      'coordinates': [
        [
            [-67.13734, 45.13745],
            [-66.96466, 44.8097],
            [-68.03252, 44.3252],
            [-69.06, 43.98],
            [-70.11617, 43.68405],
            [-70.64573, 43.09008],
            [-70.75102, 43.08003],
            [-70.79761, 43.21973],
            [-70.98176, 43.36789],
            [-70.94416, 43.46633],
            [-71.08482, 45.30524],
            [-70.66002, 45.46022],
            [-70.30495, 45.91479],
            [-70.00014, 46.69317],
            [-69.23708, 47.44777],
            [-68.90478, 47.18479],
            [-68.2343, 47.35462],
            [-67.79035, 47.06624],
            [-67.79141, 45.70258],
            [-67.13734, 45.13745]
        ]
    ]
  }
};

const MapComponent = ({ markers }) => {
  return (
    <>
      <Map
        mapboxAccessToken="<your token>"
        initialViewState={{
          longitude: -69.31576531453206,
          latitude: 45.45856760814173,
          zoom: 5,
        }}
        style={{ width: 800, height: 600 }}
        mapStyle="mapbox://styles/mapbox/light-v11"
      >
        <Source id="my-data" type="geojson" data={maine}>
          <Layer {...layerStyle} />
        </Source>
      </Map>
    </>
  );
};

export default MapComponent;

とりあえずこんな感じに表示するところまではできました！

参考になりそうなドキュメント

• https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
• https://visgl.github.io/react-map-gl/docs/api-reference/source
• https://docs.mapbox.com/style-spec/reference/layers/