Dartcom. Библиотека компонентов

Это основная библиотека компонентов для Dartcom.

Начальная установка

// Установка сторонних заивимостей из package.json
npm i

// Запуск визуального тестирования через storybook
npm run storybook

Публикация

Перед публикацией убедитесь, что:

• Версия в package.json корректна

• Все тесты проходят

• Сама сбока библиотеки проходит без ошибок

• У вас есть аккаунт npm и токен доступа

// Проверьте сборку npm run build

// Проверьте содержимое пакета npm pack

git push origin v3.8.16

Основные ссылки

https://unpkg.com/[email protected]/leaflet.textpath.js

Ссылка на бибилотеку, которая отвечает за отрисовку текста. Ее нужно подключать отдельно, если в проекте используются подписи по линейной геометрии

Работа с картой

• Для начала работы потребуется установить следующие библиотеки:

npm i -S react react-dom leaflet react-leaflet @dartcom/ui-kit

• Основную часть приложения, где будет использоваться карта, нужно обернуть в DartcomProviders:

import { DartcomProviders } from '@dartcom/ui-kit';

<DartcomProviders
  configOptions={{
    private_key: 'Ваш приватный ключ',

    apiConfig: {
      baseURL: 'Основной адрес backend',
    },
  }}>
  {...Content}
</DartcomProviders>;

private_key - ключ доступа к библиотеки, он выдается администрацией и проверяется для доступа как к самой карте, так и к определенным компонентам внтури библиотеки

baseURL - адрес backend части вашего приложения, куда отсылаются основные запросы

• Далее в вашем приложении нужно инициализировать карту leafet внтури основного DartcomProviders:

import { MapContainer } from 'react-leaflet';

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  {...Content}
</MapContainer>;

• Теперь нужно поместить внутрь MapContainer компонент с нашим слоем:

import DartcomLayer from './your-path';

import { MapContainer } from 'react-leaflet';

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <DartcomLayer />

  {...Content}
</MapContainer>;

• В компоненте нужно инициализировать слой и добавить его на карту как основную подложку:

// your-path.tsx

import * as React from 'react';

import { useMap } from 'react-leaflet';

import {
  getAllLayers,
  SourceLayers,
  TangramLayer,
  TangramSourceNames,
} from '@dartcom/ui-kit';

const DartcomLayer: React.FC = () => {
  const map = useMap();

   React.useEffect(() => {
    const { current: layersControl } = controlRef;

    const defaultLayers = getAllLayers(TangramSourceNames.TILE);

    new TangramLayer({
      defaultLayers,

      eventHandlers: {
        [SourceLayers[name]]: {
          click: ({ properties }) => {},
          hover: ({ properties }) => {},
        },
      },

      onCreate: ({ layer }) => {
        layer.addTo(map);
      },

      onDestroy: ({ layer }) => {
        layer.removeFrom(map);
      },
    });
  }, []);

  return null;
};

export default DartcomLayer;

• defaultLayers - это основной список слоев, которые можно получить из библиотеки и который будет показываться на карте. В примере мы грузим все слои из ресурса TangramSourceNames.TILE с помощью функции getAllLayers, но пожно подгружать разные слои из разных ресурсов