How to use onLoad to switch displayed language of a map?

[belkocik]

How to switch displayed language of a map? with onLoad prop or in a different way? Got to use mapbox-gl-js package somehow?

import { useRef, useState } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxMap, {ViewState, MapRef } from "react-map-gl";

interface IProps {}

const Mapbox = ({}: IProps) => {
  const mapRef = useRef<MapRef | null>(null);
  const [viewport, setViewport] = useState<ViewState>({
    latitude: 50.102242,
    longitude: 21.338631,
    zoom: 6,
    bearing: 0,
    pitch: 0,
    padding: { left: 0, right: 0, top: 0, bottom: 0 },
  });

// this \/ doesn't work 
  const onMapLoad = useCallback((e) => {
    // reading the doc, the onLoad callback gives you the Mapbox Map back in e.target
    e.target.setLayoutProperty("country-label-lg", "text-field", [
      "get",
      "name_pl", // tried wtih "name_fr", "name_zh" too
    ]);
    console.log(e.target.getStyle().layers);
    console.log(e.target);
  }, []);

  return (
    <div className="text-black relative">
      <MapboxMap
        style={{ width: "100%", height: "calc(100vh - 64px)" }}
        initialViewState={{
          ...viewport,
        }}
        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        minZoom={5.5}
        maxZoom={15}
        onLoad={onMapLoad} // change language of a map to Polish
      ></MapboxMap>
    </div>
  );
};

export default Mapbox;

Could change lanaguage like this:

  const onMapLoad = () => {
    mapRef.current?.getStyle().layers.forEach((thisLayer) => {
      if (thisLayer.id.indexOf("-label") > 0) {
        console.log("change" + thisLayer.id);
        mapRef.setLayoutProperty(thisLayer.id, "text-field", [
          "get",
          "name_fr",
        ]);
      } // error: Property 'setLayoutProperty' does not exist on type 'MutableRefObject<MapRef | null>'.
    });
  }; 

but as i mentioned setLayoutProperty doesn't exist :/

[belkocik]

I managed to solve it, but there is no Polish language, whaaaaaat?

import { useRef, useState } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxMap, { ViewState, MapRef } from "react-map-gl";

interface IProps {}

const Mapbox = ({}: IProps) => {
  const mapRef = useRef<MapRef | null>(null);
  const [viewport, setViewport] = useState<ViewState>({
    latitude: 50.102242,
    longitude: 21.338631,
    zoom: 6,
    bearing: 0,
    pitch: 0,
    padding: { left: 0, right: 0, top: 0, bottom: 0 },
  });

  const onMapLoad = () => {
    const map = mapRef.current?.getMap();
    map?.getStyle().layers.forEach((thisLayer) => {
      if (thisLayer.id.indexOf("-label") > 0) {
        console.log("change" + thisLayer.id);
        map?.setLayoutProperty(thisLayer.id, "text-field", ["get", "name_de"]);
      }
    });
  };

  return (
    <div className="text-black relative">
      <MapboxMap
        style={{ width: "100%", height: "calc(100vh - 64px)" }}
        initialViewState={{
          ...viewport,
        }}
        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        minZoom={5.5}
        maxZoom={15}
        ref={(instance) => (mapRef.current = instance)}
        onLoad={onMapLoad}
      ></MapboxMap>
    </div>
  );
};

export default Mapbox;