ハウツー 地図インスタンス（maps-core）に直接アクセスし、MapLibre GL JS の機能を利用するには

Map の ref が GeoloniaMap そのものです。ただし地図はマウント後に作られるので、useRef で受けて useEffect で読むと、まだ null です。インスタンスが入った瞬間に動きたいので、関数を ref に渡します（コールバック ref）。React が要素を繋いだときに引数で呼んでくれます。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { useCallback, useState } from "react";
import { createRoot } from "react-dom/client";
import { Map } from "@geolonia/maps-react";

function App() {
  const [text, setText] = useState("読み込み中");

  const mapRef = useCallback((map) => {
    if (!map) return;

    const show = () => {
      const c = map.getCenter();
      setText(
        `zoom ${map.getZoom().toFixed(2)} / ${c.lat.toFixed(4)}, ${c.lng.toFixed(4)}`,
      );
    };

    map.on("move", show);
    show();

    return () => {
      map.off("move", show);
    };
  }, []);

  return (
    <div style={{ position: "relative", height: "100vh" }}>
      <div
        style={{
          position: "absolute", top: 8, left: 8, zIndex: 1,
          background: "#fff", padding: "6px 10px", borderRadius: 4,
          font: "13px/1.5 system-ui, sans-serif",
        }}
      >
        {text}
      </div>
      <Map
        ref={mapRef}
        apiKey="YOUR-API-KEY"
        center={[139.75, 35.68]}
        zoom={11}
        containerStyle={{ width: "100%", height: "100%" }}
      />
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

インスタンスが手に入った瞬間に呼ばれるので、待つ仕組みが要りません。後片付けも戻り値で書けます。上の例では、返した関数の中で off("move", show) してリスナを外しています。

あとから任意のタイミングで触りたいだけなら、受け取ったインスタンスを自分で持っておきます。

const mapRef = useRef(null);

<Map
  ref={(map) => { mapRef.current = map; }}
  apiKey="YOUR-API-KEY"
  center={[139.75, 35.68]}
  zoom={11}
/>

<button onClick={() => mapRef.current?.flyTo({ center: [135.5, 34.7], zoom: 12 })}>
  大阪へ
</button>

スタイルの読み込みを待つ必要があるとき

ref が呼ばれるのは地図を作った直後で、スタイルの読み込み完了は待ちません。レイヤやソースを足す操作は読み込み後でないとエラーになるので、isStyleLoaded() で見て、まだなら once("load") で待ちます。

const mapRef = useCallback((map) => {
  if (!map) return;

  const addLayer = () => {
    map.addSource("spots", { type: "geojson", data: "/data/sample-spots.geojson" });
    map.addLayer({ id: "spots", type: "circle", source: "spots" });
  };

  if (map.isStyleLoaded()) addLayer();
  else map.once("load", addLayer);
}, []);

Map には onLoad プロパティもあり、こちらは読み込み完了後に GeoloniaMap を引数で渡してきます。一度だけの初期化なら短く書けますが、リスナを外す先がないので、on() で購読するならコールバック ref にしてください。

React らしく書けるものは props で済みます。地図の移動を拾うだけなら onMove プロパティがありますし、データの描画は <Source> と <Layer> で書けます。土台のインスタンスを触るのは、props に用意がない操作をするときです。