turkey-district-maps-3 1.1.2 → 1.2.1
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 +19 -5
- package/dist/components/Istanbul.d.ts +38 -0
- package/dist/components/handleFunctions.d.ts +8 -0
- package/dist/data.d.ts +326 -0
- package/dist/index.js +5918 -4107
- package/dist/index.umd.cjs +18 -0
- package/dist/main.d.ts +83 -0
- package/package.json +71 -70
- package/dist/index.js.map +0 -1
- package/dist/index.modern.js +0 -4025
- package/dist/index.modern.js.map +0 -1
package/README.md
CHANGED
|
@@ -4,13 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/turkey-district-maps-3) [](https://standardjs.com) [](https://www.npmjs.com/package/react)
|
|
6
6
|
|
|
7
|
+
## 🌏 Open in the Cloud
|
|
8
|
+
|
|
9
|
+
Click any of the buttons below to start a new development environment to demo or contribute to the codebase without having to install anything on your machine:
|
|
10
|
+
|
|
11
|
+
[](https://vscode.dev/github/ritzykey/turkey-district-map)
|
|
12
|
+
[](https://codesandbox.io/p/sandbox/example-turkey-district-maps-forked-7c65gc)
|
|
13
|
+
|
|
7
14
|
## Install
|
|
8
15
|
|
|
9
16
|
```bash
|
|
10
17
|
npm install turkey-district-maps-3
|
|
11
18
|
```
|
|
12
19
|
|
|
13
|
-
## Usage
|
|
20
|
+
## Usage
|
|
14
21
|
|
|
15
22
|
```jsx
|
|
16
23
|
import { Istanbul, Ankara } from 'turkey-district-maps-3'
|
|
@@ -69,8 +76,8 @@ This is generally used for [Antd](https://ant.design/components/tooltip/) style
|
|
|
69
76
|
| Property | Description | Type | Default |
|
|
70
77
|
| :---------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------- | :------------------------------------------------------------------- |
|
|
71
78
|
| distWrapper | District DOMs are wrapped by provided component. | ( **cityComponent**: _JSX.Element_, **distData** : _distDataType_ ) => _JSX.Element_ | _Unwrapped district_ |
|
|
72
|
-
| onClick | Event when a district clicked on the map. | ( **district** :
|
|
73
|
-
| onHover | Event when a district hovered on the map. | ( **district** :
|
|
79
|
+
| onClick | Event when a district clicked on the map. | ( **district** : _distDataType_ ) => _void_ | - |
|
|
80
|
+
| onHover | Event when a district hovered on the map. | ( **district** : _distDataType_ ) => _void_ | - |
|
|
74
81
|
| customStyle | Stylizing the component. | _customStyleType_ | { **idleColor**: _#444_, **hoverColor**: _#dc3522_ } |
|
|
75
82
|
| strokeStyle | Stylizing the component. | _strokeStyleType_ | { **strokeWidth**: _0.08_, **strokeColor**: _white_ } |
|
|
76
83
|
| viewBox | Position and dimension information of the map (svg) layout | _viewBoxType_ | { **top**: _30_, **left**: _75_, **width**: _74_, **height**: _45_ } |
|
|
@@ -80,9 +87,10 @@ This is generally used for [Antd](https://ant.design/components/tooltip/) style
|
|
|
80
87
|
|
|
81
88
|
Local development is broken into two parts (ideally using two tabs).
|
|
82
89
|
|
|
83
|
-
First, run rollup to watch your `
|
|
90
|
+
First, run rollup to watch your `lib/` module and automatically recompile it into `dist/` whenever you make changes.
|
|
84
91
|
|
|
85
92
|
```bash
|
|
93
|
+
npm install
|
|
86
94
|
npm start # runs rollup with watch flag
|
|
87
95
|
```
|
|
88
96
|
|
|
@@ -91,9 +99,15 @@ The second part will be running the `example/` create-react-app that's linked to
|
|
|
91
99
|
```bash
|
|
92
100
|
# (in another tab)
|
|
93
101
|
cd example
|
|
94
|
-
npm
|
|
102
|
+
npm install
|
|
103
|
+
npm run dev
|
|
95
104
|
```
|
|
96
105
|
|
|
106
|
+
## Example
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
97
111
|
## License
|
|
98
112
|
|
|
99
113
|
MIT © [ritzykey](https://github.com/ritzykey)
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { data } from '../data';
|
|
3
|
+
type District = {
|
|
4
|
+
d: string;
|
|
5
|
+
name: string;
|
|
6
|
+
};
|
|
7
|
+
type ViewBox = {
|
|
8
|
+
top: number;
|
|
9
|
+
left: number;
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
};
|
|
13
|
+
type CustomStyle = {
|
|
14
|
+
idleColor: string;
|
|
15
|
+
hoverColor: string;
|
|
16
|
+
};
|
|
17
|
+
type StrokeStyle = {
|
|
18
|
+
strokeWidth: string;
|
|
19
|
+
strokeColor: string;
|
|
20
|
+
};
|
|
21
|
+
export type TurkeyCityMapsProps = {
|
|
22
|
+
city?: keyof typeof data;
|
|
23
|
+
customStyle?: CustomStyle;
|
|
24
|
+
strokeStyle?: StrokeStyle;
|
|
25
|
+
hidden?: boolean;
|
|
26
|
+
viewBox?: ViewBox;
|
|
27
|
+
distWrapper?: (element: React.ReactNode, distData: District) => React.ReactNode;
|
|
28
|
+
onClick?: (event: {
|
|
29
|
+
distPath: string | null;
|
|
30
|
+
name: string;
|
|
31
|
+
}) => void;
|
|
32
|
+
onHover?: (event: {
|
|
33
|
+
distPath: string | null;
|
|
34
|
+
name: string;
|
|
35
|
+
}) => void;
|
|
36
|
+
};
|
|
37
|
+
declare const TurkeyCityMaps: ({ city, customStyle, strokeStyle, hidden, viewBox, distWrapper, onClick, onHover }: TurkeyCityMapsProps) => React.ReactElement;
|
|
38
|
+
export default TurkeyCityMaps;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { TurkeyCityMapsProps } from './Istanbul';
|
|
2
|
+
type MouseEventCallback = TurkeyCityMapsProps['onClick'];
|
|
3
|
+
export declare const onClick2: (e: React.MouseEvent<SVGPathElement>, onClick?: MouseEventCallback) => void;
|
|
4
|
+
export declare const onHover2: (e: React.MouseEvent<SVGPathElement>, onHover?: MouseEventCallback) => void;
|
|
5
|
+
export declare const handleMouseEvent: (e: React.MouseEvent<SVGPathElement>, callback: MouseEventCallback) => void;
|
|
6
|
+
export declare const onMouseEnter: (event: React.MouseEvent<SVGPathElement>, hoverColor: string) => void;
|
|
7
|
+
export declare const onMouseLeave: (event: React.MouseEvent<SVGPathElement>, idleColor: string) => void;
|
|
8
|
+
export {};
|
package/dist/data.d.ts
ADDED
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
export declare const data: {
|
|
2
|
+
istanbul: {
|
|
3
|
+
d: string;
|
|
4
|
+
name: string;
|
|
5
|
+
}[];
|
|
6
|
+
ankara: {
|
|
7
|
+
name: string;
|
|
8
|
+
d: string;
|
|
9
|
+
}[];
|
|
10
|
+
izmir: {
|
|
11
|
+
name: string;
|
|
12
|
+
d: string;
|
|
13
|
+
}[];
|
|
14
|
+
bursa: {
|
|
15
|
+
name: string;
|
|
16
|
+
d: string;
|
|
17
|
+
}[];
|
|
18
|
+
adana: {
|
|
19
|
+
name: string;
|
|
20
|
+
d: string;
|
|
21
|
+
}[];
|
|
22
|
+
adıyaman: {
|
|
23
|
+
name: string;
|
|
24
|
+
d: string;
|
|
25
|
+
}[];
|
|
26
|
+
afyonkarahisar: {
|
|
27
|
+
name: string;
|
|
28
|
+
d: string;
|
|
29
|
+
}[];
|
|
30
|
+
ağrı: {
|
|
31
|
+
name: string;
|
|
32
|
+
d: string;
|
|
33
|
+
}[];
|
|
34
|
+
aksaray: {
|
|
35
|
+
name: string;
|
|
36
|
+
d: string;
|
|
37
|
+
}[];
|
|
38
|
+
amasya: {
|
|
39
|
+
name: string;
|
|
40
|
+
d: string;
|
|
41
|
+
}[];
|
|
42
|
+
antalya: {
|
|
43
|
+
name: string;
|
|
44
|
+
d: string;
|
|
45
|
+
}[];
|
|
46
|
+
ardahan: {
|
|
47
|
+
name: string;
|
|
48
|
+
d: string;
|
|
49
|
+
}[];
|
|
50
|
+
artvin: {
|
|
51
|
+
name: string;
|
|
52
|
+
d: string;
|
|
53
|
+
}[];
|
|
54
|
+
aydın: {
|
|
55
|
+
name: string;
|
|
56
|
+
d: string;
|
|
57
|
+
}[];
|
|
58
|
+
bartın: {
|
|
59
|
+
name: string;
|
|
60
|
+
d: string;
|
|
61
|
+
}[];
|
|
62
|
+
balıkesir: {
|
|
63
|
+
name: string;
|
|
64
|
+
d: string;
|
|
65
|
+
}[];
|
|
66
|
+
batman: {
|
|
67
|
+
name: string;
|
|
68
|
+
d: string;
|
|
69
|
+
}[];
|
|
70
|
+
bayburt: {
|
|
71
|
+
name: string;
|
|
72
|
+
d: string;
|
|
73
|
+
}[];
|
|
74
|
+
bilecik: {
|
|
75
|
+
name: string;
|
|
76
|
+
d: string;
|
|
77
|
+
}[];
|
|
78
|
+
bingöl: {
|
|
79
|
+
name: string;
|
|
80
|
+
d: string;
|
|
81
|
+
}[];
|
|
82
|
+
bitlis: {
|
|
83
|
+
name: string;
|
|
84
|
+
d: string;
|
|
85
|
+
}[];
|
|
86
|
+
bolu: {
|
|
87
|
+
name: string;
|
|
88
|
+
d: string;
|
|
89
|
+
}[];
|
|
90
|
+
burdur: {
|
|
91
|
+
name: string;
|
|
92
|
+
d: string;
|
|
93
|
+
}[];
|
|
94
|
+
çanakkale: {
|
|
95
|
+
name: string;
|
|
96
|
+
d: string;
|
|
97
|
+
}[];
|
|
98
|
+
çankırı: {
|
|
99
|
+
name: string;
|
|
100
|
+
d: string;
|
|
101
|
+
}[];
|
|
102
|
+
çorum: {
|
|
103
|
+
name: string;
|
|
104
|
+
d: string;
|
|
105
|
+
}[];
|
|
106
|
+
denizli: {
|
|
107
|
+
name: string;
|
|
108
|
+
d: string;
|
|
109
|
+
}[];
|
|
110
|
+
diyarbakır: {
|
|
111
|
+
name: string;
|
|
112
|
+
d: string;
|
|
113
|
+
}[];
|
|
114
|
+
düzce: {
|
|
115
|
+
name: string;
|
|
116
|
+
d: string;
|
|
117
|
+
}[];
|
|
118
|
+
edirne: {
|
|
119
|
+
name: string;
|
|
120
|
+
d: string;
|
|
121
|
+
}[];
|
|
122
|
+
elazığ: {
|
|
123
|
+
name: string;
|
|
124
|
+
d: string;
|
|
125
|
+
}[];
|
|
126
|
+
erzincan: {
|
|
127
|
+
name: string;
|
|
128
|
+
d: string;
|
|
129
|
+
}[];
|
|
130
|
+
erzurum: {
|
|
131
|
+
name: string;
|
|
132
|
+
d: string;
|
|
133
|
+
}[];
|
|
134
|
+
eskişehir: {
|
|
135
|
+
name: string;
|
|
136
|
+
d: string;
|
|
137
|
+
}[];
|
|
138
|
+
gaziantep: {
|
|
139
|
+
name: string;
|
|
140
|
+
d: string;
|
|
141
|
+
}[];
|
|
142
|
+
giresun: {
|
|
143
|
+
name: string;
|
|
144
|
+
d: string;
|
|
145
|
+
}[];
|
|
146
|
+
gümüşhane: {
|
|
147
|
+
name: string;
|
|
148
|
+
d: string;
|
|
149
|
+
}[];
|
|
150
|
+
hakkari: {
|
|
151
|
+
name: string;
|
|
152
|
+
d: string;
|
|
153
|
+
}[];
|
|
154
|
+
hatay: {
|
|
155
|
+
name: string;
|
|
156
|
+
d: string;
|
|
157
|
+
}[];
|
|
158
|
+
iğdır: {
|
|
159
|
+
name: string;
|
|
160
|
+
d: string;
|
|
161
|
+
}[];
|
|
162
|
+
isparta: {
|
|
163
|
+
name: string;
|
|
164
|
+
d: string;
|
|
165
|
+
}[];
|
|
166
|
+
kahramanmaraş: {
|
|
167
|
+
name: string;
|
|
168
|
+
d: string;
|
|
169
|
+
}[];
|
|
170
|
+
karabük: {
|
|
171
|
+
name: string;
|
|
172
|
+
d: string;
|
|
173
|
+
}[];
|
|
174
|
+
karaman: {
|
|
175
|
+
name: string;
|
|
176
|
+
d: string;
|
|
177
|
+
}[];
|
|
178
|
+
kars: {
|
|
179
|
+
name: string;
|
|
180
|
+
d: string;
|
|
181
|
+
}[];
|
|
182
|
+
kastamonu: {
|
|
183
|
+
name: string;
|
|
184
|
+
d: string;
|
|
185
|
+
}[];
|
|
186
|
+
kayseri: {
|
|
187
|
+
name: string;
|
|
188
|
+
d: string;
|
|
189
|
+
}[];
|
|
190
|
+
kırıkkale: {
|
|
191
|
+
name: string;
|
|
192
|
+
d: string;
|
|
193
|
+
}[];
|
|
194
|
+
kırklareli: {
|
|
195
|
+
name: string;
|
|
196
|
+
d: string;
|
|
197
|
+
}[];
|
|
198
|
+
kırşehir: {
|
|
199
|
+
name: string;
|
|
200
|
+
d: string;
|
|
201
|
+
}[];
|
|
202
|
+
kilis: {
|
|
203
|
+
name: string;
|
|
204
|
+
d: string;
|
|
205
|
+
}[];
|
|
206
|
+
kocaeli: {
|
|
207
|
+
name: string;
|
|
208
|
+
d: string;
|
|
209
|
+
}[];
|
|
210
|
+
konya: {
|
|
211
|
+
name: string;
|
|
212
|
+
d: string;
|
|
213
|
+
}[];
|
|
214
|
+
kütahya: {
|
|
215
|
+
name: string;
|
|
216
|
+
d: string;
|
|
217
|
+
}[];
|
|
218
|
+
malatya: {
|
|
219
|
+
name: string;
|
|
220
|
+
d: string;
|
|
221
|
+
}[];
|
|
222
|
+
manisa: {
|
|
223
|
+
name: string;
|
|
224
|
+
d: string;
|
|
225
|
+
}[];
|
|
226
|
+
mardin: {
|
|
227
|
+
name: string;
|
|
228
|
+
d: string;
|
|
229
|
+
}[];
|
|
230
|
+
mersin: {
|
|
231
|
+
name: string;
|
|
232
|
+
d: string;
|
|
233
|
+
}[];
|
|
234
|
+
muğla: {
|
|
235
|
+
name: string;
|
|
236
|
+
d: string;
|
|
237
|
+
}[];
|
|
238
|
+
muş: {
|
|
239
|
+
name: string;
|
|
240
|
+
d: string;
|
|
241
|
+
}[];
|
|
242
|
+
nevşehir: {
|
|
243
|
+
name: string;
|
|
244
|
+
d: string;
|
|
245
|
+
}[];
|
|
246
|
+
niğde: {
|
|
247
|
+
name: string;
|
|
248
|
+
d: string;
|
|
249
|
+
}[];
|
|
250
|
+
ordu: {
|
|
251
|
+
name: string;
|
|
252
|
+
d: string;
|
|
253
|
+
}[];
|
|
254
|
+
osmaniye: {
|
|
255
|
+
name: string;
|
|
256
|
+
d: string;
|
|
257
|
+
}[];
|
|
258
|
+
rize: {
|
|
259
|
+
name: string;
|
|
260
|
+
d: string;
|
|
261
|
+
}[];
|
|
262
|
+
sakarya: {
|
|
263
|
+
name: string;
|
|
264
|
+
d: string;
|
|
265
|
+
}[];
|
|
266
|
+
samsun: {
|
|
267
|
+
name: string;
|
|
268
|
+
d: string;
|
|
269
|
+
}[];
|
|
270
|
+
siirt: {
|
|
271
|
+
name: string;
|
|
272
|
+
d: string;
|
|
273
|
+
}[];
|
|
274
|
+
sinop: {
|
|
275
|
+
name: string;
|
|
276
|
+
d: string;
|
|
277
|
+
}[];
|
|
278
|
+
sivas: {
|
|
279
|
+
name: string;
|
|
280
|
+
d: string;
|
|
281
|
+
}[];
|
|
282
|
+
şanlıurfa: {
|
|
283
|
+
name: string;
|
|
284
|
+
d: string;
|
|
285
|
+
}[];
|
|
286
|
+
şırnak: {
|
|
287
|
+
name: string;
|
|
288
|
+
d: string;
|
|
289
|
+
}[];
|
|
290
|
+
tekirdağ: {
|
|
291
|
+
name: string;
|
|
292
|
+
d: string;
|
|
293
|
+
}[];
|
|
294
|
+
tokat: {
|
|
295
|
+
name: string;
|
|
296
|
+
d: string;
|
|
297
|
+
}[];
|
|
298
|
+
trabzon: {
|
|
299
|
+
name: string;
|
|
300
|
+
d: string;
|
|
301
|
+
}[];
|
|
302
|
+
tunceli: {
|
|
303
|
+
name: string;
|
|
304
|
+
d: string;
|
|
305
|
+
}[];
|
|
306
|
+
uşak: {
|
|
307
|
+
name: string;
|
|
308
|
+
d: string;
|
|
309
|
+
}[];
|
|
310
|
+
van: {
|
|
311
|
+
name: string;
|
|
312
|
+
d: string;
|
|
313
|
+
}[];
|
|
314
|
+
yalova: {
|
|
315
|
+
name: string;
|
|
316
|
+
d: string;
|
|
317
|
+
}[];
|
|
318
|
+
yozgat: {
|
|
319
|
+
name: string;
|
|
320
|
+
d: string;
|
|
321
|
+
}[];
|
|
322
|
+
zonguldak: {
|
|
323
|
+
name: string;
|
|
324
|
+
d: string;
|
|
325
|
+
}[];
|
|
326
|
+
};
|