Пакеты JS API

Пакеты JS API предоставляют дополнительную функциональность в JS API, которая не входит в основное API и модули.

Подключение пакетовПодключение пакетов

К примеру, пакет с дефолтными элементами управления можно подключить разными способами:

Через пакетный менеджерЧерез пакетный менеджер

Установить пакет в свой проект:

npm install @yandex/ymaps3-default-ui-theme

После этого импортировать в коде:

import {YMapDefaultMarker} from '@yandex/ymaps3-default-ui-theme';

map.addChild(
  new YMapDefaultMarker({
    coordinates: [34, 54],
    title: 'Hello World!',
    subtitle: 'kind and bright'
  })
);

При необходимости, вы можете импортировать стили css в ваш проект:

/* index.css */
@import '@yandex/ymaps3-default-ui-theme/dist/esm/index.css';

Через CDNЧерез CDN

Для примера будем использовать jsdelivr в качестве CDN.

В JS API есть готовый механизм для импорта пакетов из CDN.
Сперва CDN нужно зарегистрировать в JS API с помощью ymaps3.import.registerCdn.
Эта функция принимает 2 аргумента:

1. Первым аргументом указывается маска URL адреса CDN. Например, в маске https://cdn.jsdelivr.net/npm/{package} на место {package} будет подставлено имя пакета.
2. Вторым аргументом имя или список имен пакетов, которые необходимо загрузить из этого CDN.

После этого можно импортировать компоненты из пакета в проект с помощью ymaps3.import.

// добавляем loader для пакета, где указываем из какого CDN загружать
ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
  '@yandex/ymaps3-default-ui-theme@<PACKAGE_VERSION_HERE>'
]);

// после этого можем импортировать компоненты из пакета в проект
const {YMapDefaultMarker} = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
map.addChild(
  new YMapDefaultMarker({
    coordinates: [34, 54],
    title: 'Hello World!',
    subtitle: 'kind and bright'
  })
);

Доступные пакетыДоступные пакеты