@dartcom/ui-kit 10.3.5 → 10.3.6

package/README.md

@@ -24,7 +24,6 @@ npm run storybook
 
 - У вас есть аккаунт npm и токен доступа
 
-```javascript
 // Проверьте сборку
 npm run build
 
@@ -33,9 +32,116 @@ npm pack
 
 git push origin v3.8.16
 
-Основные ссылки:
+Основные ссылки
 
 ```javascript
 https://unpkg.com/leaflet-textpath@1.3.0/leaflet.textpath.js
 ```
-Ссылка на бибилотеку, которая отвечает за отрисовку текста. Ее нужно подключать отдельно, если в проекте используются подписи по линейной геометрии
+
+Ссылка на бибилотеку, которая отвечает за отрисовку текста. Ее нужно подключать отдельно, если в проекте используются подписи по линейной геометрии
+
+## Работа с картой
+
+- Для начала работы потребуется установить следующие библиотеки:
+
+```javascript
+npm i -S react react-dom leaflet react-leaflet @dartcom/ui-kit
+```
+
+- Основную часть приложения, где будет использоваться карта, нужно обернуть в **DartcomProviders**:
+
+```javascript
+import { DartcomProviders } from '@dartcom/ui-kit';
+
+<DartcomProviders
+  configOptions={{
+    private_key: 'Ваш приватный ключ',
+
+    apiConfig: {
+      baseURL: 'Основной адрес backend',
+    },
+  }}>
+  {...Content}
+</DartcomProviders>;
+```
+
+**private_key** - ключ доступа к библиотеки, он выдается администрацией и проверяется для доступа как к самой карте, так и к определенным компонентам внтури библиотеки
+
+**baseURL** - адрес backend части вашего приложения, куда отсылаются основные запросы
+
+
+- Далее в вашем приложении нужно инициализировать карту leafet внтури основного **DartcomProviders**:
+
+```javascript
+import { MapContainer } from 'react-leaflet';
+
+<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  {...Content}
+</MapContainer>;
+```
+
+- Теперь нужно поместить внутрь MapContainer компонент с нашим слоем:
+
+```javascript
+import DartcomLayer from './your-path';
+
+import { MapContainer } from 'react-leaflet';
+
+<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  <DartcomLayer />
+
+  {...Content}
+</MapContainer>;
+```
+
+- В компоненте нужно инициализировать слой и добавить его на карту как основную подложку:
+
+```javascript
+// 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**, но пожно подгружать разные слои из разных ресурсов

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartcom/ui-kit",
-  "version": "10.3.5",
+  "version": "10.3.6",
   "description": "Кастомная библиотека комопнентов Dartcom",
   "type": "module",
   "main": "./dist/index.cjs",