@dartcom/ui-kit 10.3.4 → 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/dist/components/layers/leaflet/layers/condition/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layers/leaflet/layers/condition/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,WAAW,CAAC;AAInB,eAAO,MAAM,kBAAkB,GAAI,QAAQ,kBAAkB,yBAyC5D,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layers/leaflet/layers/condition/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,WAAW,CAAC;AAInB,eAAO,MAAM,kBAAkB,GAAI,QAAQ,kBAAkB,yBA2C5D,CAAC"}

package/dist/index.cjs

@@ -39650,24 +39650,29 @@ var ConditionTypes;
 
 const getConditionLayers = (source) => {
     const layers = [];
-    const sublayers = {};
     const data = {
         source,
         layer: exports.SourceLayers.CONDITIONS,
     };
-    const layer = {
-        id: getUniqueKey(),
-        data,
-    };
     Object.values(ConditionTypes).forEach((conditionType) => {
-        sublayers[`_${conditionType}`] = {
+        const layer = {
+            id: getUniqueKey(),
             filter: `function() {
         const { type } = feature;
 
-        const isShow = type === '${conditionType}';
+        const isType = type === '${conditionType}';
 
-        return isShow;
+        switch(type) {
+          case '${ConditionTypes.gate}': {
+            return $zoom >= 18 && isType;
+          }
+
+          default: {
+            return isType;
+          }
+        }
       }`,
+            data,
             draw: {
                 points: {
                     texture: conditionType,
@@ -39676,9 +39681,8 @@ const getConditionLayers = (source) => {
                 },
             },
         };
+        layers.push(layer);
     });
-    layer.sublayers = sublayers;
-    layers.push(layer);
     return layers;
 };