@dartcom/ui-kit 10.5.8 → 10.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -100
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## Начальная установка
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```ts
|
|
8
8
|
// Установка сторонних заивимостей из package.json
|
|
9
9
|
npm i
|
|
10
10
|
|
|
@@ -32,7 +32,7 @@ npm pack
|
|
|
32
32
|
|
|
33
33
|
Основные ссылки
|
|
34
34
|
|
|
35
|
-
```
|
|
35
|
+
```ts
|
|
36
36
|
https://unpkg.com/leaflet-textpath@1.3.0/leaflet.textpath.js
|
|
37
37
|
```
|
|
38
38
|
|
|
@@ -42,104 +42,9 @@ https://unpkg.com/leaflet-textpath@1.3.0/leaflet.textpath.js
|
|
|
42
42
|
|
|
43
43
|
- Для начала работы потребуется установить следующие библиотеки:
|
|
44
44
|
|
|
45
|
-
```
|
|
45
|
+
```ts
|
|
46
46
|
npm i -S react react-dom leaflet react-leaflet @dartcom/ui-kit
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
```javascript
|
|
52
|
-
import { DartcomProviders } from '@dartcom/ui-kit';
|
|
53
|
-
|
|
54
|
-
<DartcomProviders
|
|
55
|
-
configOptions={{
|
|
56
|
-
private_key: 'Ваш приватный ключ',
|
|
57
|
-
|
|
58
|
-
apiConfig: {
|
|
59
|
-
baseURL: 'Основной адрес backend',
|
|
60
|
-
},
|
|
61
|
-
}}>
|
|
62
|
-
{...Content}
|
|
63
|
-
</DartcomProviders>;
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
**private_key** - ключ доступа к библиотеки, он выдается администрацией и проверяется для доступа как к самой карте, так и к определенным компонентам внтури библиотеки
|
|
67
|
-
|
|
68
|
-
**baseURL** - адрес backend части вашего приложения, куда отсылаются основные запросы
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
- Далее в вашем приложении нужно инициализировать карту leafet внтури основного **DartcomProviders**:
|
|
72
|
-
|
|
73
|
-
```javascript
|
|
74
|
-
import { MapContainer } from 'react-leaflet';
|
|
75
|
-
|
|
76
|
-
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
|
77
|
-
{...Content}
|
|
78
|
-
</MapContainer>;
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
- Теперь нужно поместить внутрь MapContainer компонент с нашим слоем:
|
|
82
|
-
|
|
83
|
-
```javascript
|
|
84
|
-
import DartcomLayer from './your-path';
|
|
85
|
-
|
|
86
|
-
import { MapContainer } from 'react-leaflet';
|
|
87
|
-
|
|
88
|
-
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
|
89
|
-
<DartcomLayer />
|
|
90
|
-
|
|
91
|
-
{...Content}
|
|
92
|
-
</MapContainer>;
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
- В компоненте нужно инициализировать слой и добавить его на карту как основную подложку:
|
|
96
|
-
|
|
97
|
-
```javascript
|
|
98
|
-
// your-path.tsx
|
|
99
|
-
|
|
100
|
-
import * as React from 'react';
|
|
101
|
-
|
|
102
|
-
import { useMap } from 'react-leaflet';
|
|
103
|
-
|
|
104
|
-
import {
|
|
105
|
-
getAllLayers,
|
|
106
|
-
SourceLayers,
|
|
107
|
-
TangramLayer,
|
|
108
|
-
TangramSourceNames,
|
|
109
|
-
} from '@dartcom/ui-kit';
|
|
110
|
-
|
|
111
|
-
const DartcomLayer: React.FC = () => {
|
|
112
|
-
const map = useMap();
|
|
113
|
-
|
|
114
|
-
React.useEffect(() => {
|
|
115
|
-
const { current: layersControl } = controlRef;
|
|
116
|
-
|
|
117
|
-
const defaultLayers = getAllLayers(TangramSourceNames.TILE);
|
|
118
|
-
|
|
119
|
-
new TangramLayer({
|
|
120
|
-
defaultLayers,
|
|
121
|
-
|
|
122
|
-
eventHandlers: {
|
|
123
|
-
[SourceLayers[name]]: {
|
|
124
|
-
click: ({ properties }) => {},
|
|
125
|
-
hover: ({ properties }) => {},
|
|
126
|
-
},
|
|
127
|
-
},
|
|
128
|
-
|
|
129
|
-
onCreate: ({ layer }) => {
|
|
130
|
-
layer.addTo(map);
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
onDestroy: ({ layer }) => {
|
|
134
|
-
layer.removeFrom(map);
|
|
135
|
-
},
|
|
136
|
-
});
|
|
137
|
-
}, []);
|
|
138
|
-
|
|
139
|
-
return null;
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export default DartcomLayer;
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
- **defaultLayers** - это основной список слоев, которые можно получить из библиотеки и который будет показываться на карте. В примере мы грузим все слои из ресурса **TangramSourceNames.TILE** с помощью функции **getAllLayers**, но пожно подгружать разные слои из разных ресурсов
|
|
49
|
+
## Documentation
|
|
50
|
+
- [Providers](https://github.com/Dalganmap/tiles_library/tree/develop/docs/providers/README.md)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dartcom/ui-kit",
|
|
3
|
-
"version": "10.5.
|
|
4
|
-
"description": "Кастомная библиотека
|
|
3
|
+
"version": "10.5.9",
|
|
4
|
+
"description": "Кастомная библиотека компонентов Dartcom",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.esm.js",
|