Когда планируется переход на api 3?

[petrtar]

https://yandex.ru/dev/maps/jsapi/doc/3.0/upgrade/index.html

[Semro]

Есть поддержка реакта из коробки: https://yandex.ru/dev/maps/jsapi/doc/3.0/dg/concepts/general.html#react Из примеров "Геообъекты - Добавление метки на карту": https://codesandbox.io/embed/88lxcl?initialpath=react.html&codemirror=1

[KODerFunk]

@Semro Ну и как там с поддержкой TS?

[kaptn3]

Вроде попробовала как-то реализовать api 3.0 в react, что думаете?

export const Map = () => {
  const [YMaps, setYMaps] = useState(<div />);
  const map = useRef(null);

  useEffect(() => {
    (async () => {
      try {
        // @ts-ignore
        const ymaps3 = window.ymaps3;
        const [ymaps3React] = await Promise.all([
          ymaps3.import("@yandex/ymaps3-reactify"),
          ymaps3.ready,
        ]);
        const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);

        const {
          YMap,
          YMapDefaultSchemeLayer,
          YMapDefaultFeaturesLayer,
          YMapMarker,
        } = reactify.module(ymaps3);

        setYMaps(() => (
          <YMap
            location={{
              center: [37.623082, 55.75254],
              zoom: 9,
            }}
            camera={{ tilt: 0, azimuth: 0, duration: 0 }}
            ref={map}
          >
            <YMapDefaultSchemeLayer />
            <YMapDefaultFeaturesLayer />
            <YMapMarker coordinates={[37.8, 55.8]}>
              <div>PIN</div>
            </YMapMarker>
          </YMap>
        ));
      } catch (e) {
        setYMaps(<div />);
      }
    })();
  }, []);

  return <div style={{ width: "100%", height: "100vh" }}>{YMaps}</div>;
};

[alexrapro]

Вроде попробовала как-то реализовать api 3.0 в react, что думаете?

export const Map = () => {
  const [YMaps, setYMaps] = useState(<div />);
  const map = useRef(null);

  useEffect(() => {
    (async () => {
      try {
        // @ts-ignore
        const ymaps3 = window.ymaps3;
        const [ymaps3React] = await Promise.all([
          ymaps3.import("@yandex/ymaps3-reactify"),
          ymaps3.ready,
        ]);
        const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);

        const {
          YMap,
          YMapDefaultSchemeLayer,
          YMapDefaultFeaturesLayer,
          YMapMarker,
        } = reactify.module(ymaps3);

        setYMaps(() => (
          <YMap
            location={{
              center: [37.623082, 55.75254],
              zoom: 9,
            }}
            camera={{ tilt: 0, azimuth: 0, duration: 0 }}
            ref={map}
          >
            <YMapDefaultSchemeLayer />
            <YMapDefaultFeaturesLayer />
            <YMapMarker coordinates={[37.8, 55.8]}>
              <div>PIN</div>
            </YMapMarker>
          </YMap>
        ));
      } catch (e) {
        setYMaps(<div />);
      }
    })();
  }, []);

  return <div style={{ width: "100%", height: "100vh" }}>{YMaps}</div>;
};

а ты знаешь толк в извращениях xDDD

[alexrapro]

Есть поддержка реакта из коробки: https://yandex.ru/dev/maps/jsapi/doc/3.0/dg/concepts/general.html#react Из примеров "Геообъекты - Добавление метки на карту": https://codesandbox.io/embed/88lxcl?initialpath=react.html&codemirror=1

Не подскажешь случайно, как её адекватно подключить к React + Vite? API-ключ не хочу светить (проект коммерческий), поэтому в index.html подключать не вариант. Пробовал подключать по инструкции webpack через externals, но в случае с Vite с плагином vite-plugin-externals это не удалось.

[kaptn3]

@alexrapro если пользоваться яндекс картами, то да :D