[Mapbox]Error: Style is not done loading を解決する

MapboxでLayerのプロパティを変更すると、こんなエラーが出た。
「Error: Style is not done loading」

これは読んでそのまま、ロードイベントが実行される前に描画後のイベントを実行しようとしたためだ。

このコードだと、mapインスタンスが取得されたタイミングで実行されることになります。

  const { map } = useMap();

  useEffect(() => {
    if (map) {
      map.getMap().setLayoutProperty("polygon", "visibility", "none");
    }
  }, [map]);

Styleを読み込んだ後にLayserプロパティを変更させる

Mapboxのライフサイクルにloadイベントがあるのでそれを待ってから、実行するようにする。

Mapbox

Map | Mapbox GL JS The Map object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users …

マップインスタンスが取得されたタイミングで、loadイベントを紐付けます。
loadイベントは、必要なリソースがすべてダウンロードされ、マップの視覚的に完全なレンダリングが行われた直後に実行されます。
これにより、load時に定義した処理が実行されるようになります。

  useEffect(() => {
    if (map) {
      map.on("load", () => {
        map.getMap().setLayoutProperty("polygon", "visibility", "none");
      });
    }
  }, [map]);

JavaScriptっぽく書いてますが、react-map-glなら、CallbackにonLoadがあるので、こちらを使うほうがスマートだと思います。

Summary

Mapboxのloadイベントを見ている時に、他のイベントを見ていた。
mouseoutイベントなるものがあり、マップキャンバスからマウスカーソルが外れた時に発火されるイベントらしい。何かに使えそう。と思った時間でした。