svg-world-maps 0.0.1 → 0.2.0
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/LICENSE +21 -0
- package/README.md +217 -6
- package/dist/config.d.ts +150 -0
- package/dist/config.d.ts.map +1 -0
- package/dist/config.js +135 -0
- package/dist/config.js.map +1 -0
- package/dist/index.d.ts +26 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +135 -10
- package/dist/index.js.map +1 -1
- package/dist/maps/AF.d.ts +5 -1
- package/dist/maps/AF.d.ts.map +1 -1
- package/dist/maps/AF.js +175 -4
- package/dist/maps/AF.js.map +1 -1
- package/dist/maps/World.d.ts +27 -0
- package/dist/maps/World.d.ts.map +1 -0
- package/dist/maps/World.js +1334 -0
- package/dist/maps/World.js.map +1 -0
- package/dist/types.d.ts +139 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +40 -30
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Homayoun
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,16 +2,227 @@
|
|
|
2
2
|
|
|
3
3
|
Simple, lightweight SVG maps for JavaScript projects.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
🎉 **Now with World Map and Flexible Sizing!**
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
|
-
- 🌍
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
9
|
+
- 🌍 **Multiple Maps**: Afghanistan (v0.1.0) and World map with all 195 countries
|
|
10
|
+
- 📏 **Flexible Sizing**: 8 preset sizes + custom scale factors
|
|
11
|
+
- 🎨 **Customizable**: Background colors, border colors, and more
|
|
12
|
+
- ⚡ **Zero dependencies**: Pure SVG output
|
|
13
|
+
- 🛠 **Framework agnostic**: Works with React, Vue, Svelte, Vanilla JS, etc.
|
|
14
|
+
- 📦 **TypeScript support**: Full type definitions included
|
|
15
|
+
- 🔧 **Simple API**: One function to rule them all
|
|
13
16
|
|
|
14
17
|
## Installation
|
|
15
18
|
|
|
16
19
|
```bash
|
|
17
|
-
npm install svg-world-maps
|
|
20
|
+
npm install svg-world-maps
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### React + Vite
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import { createMap } from "svg-world-maps";
|
|
29
|
+
|
|
30
|
+
const App = () => {
|
|
31
|
+
// Create a world map with custom options
|
|
32
|
+
const worldMap = createMap("world", {
|
|
33
|
+
background: "#e6f3ff", // Background color
|
|
34
|
+
borders: "#2c3e50", // Border color
|
|
35
|
+
size: "lg" // Size preset: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Create an Afghanistan map with custom size
|
|
39
|
+
const afghanistanMap = createMap("afghanistan", {
|
|
40
|
+
background: "#ff0000",
|
|
41
|
+
borders: "#ffffff",
|
|
42
|
+
size: 1.5 // Custom scale factor (150% of original)
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<div dangerouslySetInnerHTML={{ __html: worldMap }} />
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default App;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Vanilla JavaScript
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
import { createMap } from "svg-world-maps";
|
|
57
|
+
|
|
58
|
+
// Create the map
|
|
59
|
+
const mapSVG = createMap("world", {
|
|
60
|
+
background: "#e6f3ff",
|
|
61
|
+
borders: "#2c3e50",
|
|
62
|
+
size: "md"
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Insert into DOM
|
|
66
|
+
document.getElementById("map-container").innerHTML = mapSVG;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## API Reference
|
|
70
|
+
|
|
71
|
+
### `createMap(mapType, options)`
|
|
72
|
+
|
|
73
|
+
Creates an SVG map string.
|
|
74
|
+
|
|
75
|
+
#### Parameters
|
|
76
|
+
|
|
77
|
+
| Parameter | Type | Description | Options |
|
|
78
|
+
|-----------|------|-------------|---------|
|
|
79
|
+
| `mapType` | `string` | Type of map to generate | `"world"`, `"afghanistan"` |
|
|
80
|
+
| `options` | `object` | Configuration options | See below |
|
|
81
|
+
|
|
82
|
+
#### Options
|
|
83
|
+
|
|
84
|
+
| Option | Type | Description | Default |
|
|
85
|
+
|--------|------|-------------|---------|
|
|
86
|
+
| `background` | `string` | Map background color (any valid CSS color) | `"#currentColor"` |
|
|
87
|
+
| `borders` | `string` | Country/state border color | `"#000000"` |
|
|
88
|
+
| `size` | `string \| number` | Map size (preset or custom scale) | `"lg"` |
|
|
89
|
+
|
|
90
|
+
### Size Options
|
|
91
|
+
|
|
92
|
+
#### Preset Sizes
|
|
93
|
+
| Preset | Scale | Description |
|
|
94
|
+
|--------|-------|-------------|
|
|
95
|
+
| `"xs"` | 0.25x | Extra small - 25% of original |
|
|
96
|
+
| `"sm"` | 0.5x | Small - 50% of original |
|
|
97
|
+
| `"md"` | 0.75x | Medium - 75% of original |
|
|
98
|
+
| `"lg"` | 1x | Large - 100% of original **(default)** |
|
|
99
|
+
| `"xl"` | 1.5x | Extra large - 150% of original |
|
|
100
|
+
| `"2xl"` | 2x | 2X Large - 200% of original |
|
|
101
|
+
| `"3xl"` | 2.5x | 3X Large - 250% of original |
|
|
102
|
+
| `"4xl"` | 3x | 4X Large - 300% of original |
|
|
103
|
+
|
|
104
|
+
#### Custom Scale Factors
|
|
105
|
+
Use any number for precise control:
|
|
106
|
+
```javascript
|
|
107
|
+
{ size: 0.33 } // Exactly one-third size
|
|
108
|
+
{ size: 1.25 } // 25% larger
|
|
109
|
+
{ size: 1.75 } // 75% larger
|
|
110
|
+
{ size: 2.5 } // Two and a half times larger
|
|
111
|
+
{ size: 0.8 } // 20% smaller
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Examples
|
|
115
|
+
|
|
116
|
+
### Basic Examples
|
|
117
|
+
|
|
118
|
+
```javascript
|
|
119
|
+
// World map with default settings
|
|
120
|
+
createMap("world");
|
|
121
|
+
|
|
122
|
+
// Afghanistan map with custom colors
|
|
123
|
+
createMap("afghanistan", {
|
|
124
|
+
background: "#27ae60",
|
|
125
|
+
borders: "#ecf0f1"
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// World map - extra small
|
|
129
|
+
createMap("world", { size: "xs" });
|
|
130
|
+
|
|
131
|
+
// World map - extra large with custom colors
|
|
132
|
+
createMap("world", {
|
|
133
|
+
background: "#2c3e50",
|
|
134
|
+
borders: "#3498db",
|
|
135
|
+
size: "xl"
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
// World map - custom scale
|
|
139
|
+
createMap("world", { size: 1.25 });
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### React Examples
|
|
143
|
+
|
|
144
|
+
```jsx
|
|
145
|
+
import { createMap } from "svg-world-maps";
|
|
146
|
+
|
|
147
|
+
// Multiple maps with different sizes
|
|
148
|
+
const Maps = () => {
|
|
149
|
+
const smallMap = createMap("world", { size: "sm" });
|
|
150
|
+
const mediumMap = createMap("world", { size: "md" });
|
|
151
|
+
const largeMap = createMap("world", { size: "lg" });
|
|
152
|
+
|
|
153
|
+
return (
|
|
154
|
+
<div>
|
|
155
|
+
<h3>Small (50%)</h3>
|
|
156
|
+
<div dangerouslySetInnerHTML={{ __html: smallMap }} />
|
|
157
|
+
|
|
158
|
+
<h3>Medium (75%)</h3>
|
|
159
|
+
<div dangerouslySetInnerHTML={{ __html: mediumMap }} />
|
|
160
|
+
|
|
161
|
+
<h3>Large (100%)</h3>
|
|
162
|
+
<div dangerouslySetInnerHTML={{ __html: largeMap }} />
|
|
163
|
+
</div>
|
|
164
|
+
);
|
|
165
|
+
};
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Available Maps
|
|
169
|
+
|
|
170
|
+
| Map | Type | Description | Since |
|
|
171
|
+
|-----|------|-------------|-------|
|
|
172
|
+
| `"world"` | 🌍 | Complete world map with all 195 countries | v0.2.0 |
|
|
173
|
+
| `"afghanistan"` | 🗺️ | Afghanistan map with 34 provinces | v0.1.0 |
|
|
174
|
+
|
|
175
|
+
## Roadmap
|
|
176
|
+
|
|
177
|
+
- [x] Afghanistan map (v0.1.0)
|
|
178
|
+
- [x] World map (v0.2.0)
|
|
179
|
+
- [ ] Individual country maps
|
|
180
|
+
- [ ] Hover effects and tooltips
|
|
181
|
+
- [ ] Click handlers and callbacks
|
|
182
|
+
- [ ] More customization options
|
|
183
|
+
- [ ] Interactive features
|
|
184
|
+
|
|
185
|
+
## Migration Guide
|
|
186
|
+
|
|
187
|
+
### From v0.1.0 to v0.2.0
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
// v0.1.0 (old)
|
|
191
|
+
import { createAfghanistanMap } from "svg-world-maps";
|
|
192
|
+
const map = createAfghanistanMap({
|
|
193
|
+
fill: "#ff0000",
|
|
194
|
+
stroke: "#ffffff"
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
// v0.2.0 (new)
|
|
198
|
+
import { createMap } from "svg-world-maps";
|
|
199
|
+
const map = createMap("afghanistan", {
|
|
200
|
+
background: "#ff0000",
|
|
201
|
+
borders: "#ffffff",
|
|
202
|
+
size: "lg"
|
|
203
|
+
});
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## Contributing
|
|
207
|
+
|
|
208
|
+
Contributions are welcome! Feel free to:
|
|
209
|
+
|
|
210
|
+
- 🐛 Report bugs
|
|
211
|
+
- 💡 Suggest new features
|
|
212
|
+
- 🌍 Add new maps
|
|
213
|
+
- 📝 Improve documentation
|
|
214
|
+
|
|
215
|
+
## License
|
|
216
|
+
|
|
217
|
+
MIT © homayounmmdy
|
|
218
|
+
|
|
219
|
+
## Support
|
|
220
|
+
|
|
221
|
+
If you find this package helpful, please consider:
|
|
222
|
+
- ⭐ Starring on [GitHub](https://github.com/homayounmmdy/svg-world-maps)
|
|
223
|
+
- 🐦 Sharing on Twitter
|
|
224
|
+
- 📢 Telling your friends
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
**Made with ❤️ for the open-source community**
|
package/dist/config.d.ts
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import type { MapOptions, MapSize } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Map data registry containing all available map configurations
|
|
4
|
+
*/
|
|
5
|
+
export declare const MAP_DATA_REGISTRY: {
|
|
6
|
+
readonly afghanistan: {
|
|
7
|
+
name: string;
|
|
8
|
+
code: string;
|
|
9
|
+
viewBox: string;
|
|
10
|
+
states: {
|
|
11
|
+
code: string;
|
|
12
|
+
path: string;
|
|
13
|
+
name: string;
|
|
14
|
+
}[];
|
|
15
|
+
};
|
|
16
|
+
readonly world: {
|
|
17
|
+
name: string;
|
|
18
|
+
code: string;
|
|
19
|
+
viewBox: string;
|
|
20
|
+
countries: ({
|
|
21
|
+
code: string;
|
|
22
|
+
name: string;
|
|
23
|
+
path: string;
|
|
24
|
+
paths?: never;
|
|
25
|
+
} | {
|
|
26
|
+
code: string;
|
|
27
|
+
name: string;
|
|
28
|
+
paths: {
|
|
29
|
+
d: string;
|
|
30
|
+
}[];
|
|
31
|
+
path?: never;
|
|
32
|
+
} | {
|
|
33
|
+
code: string;
|
|
34
|
+
name: string;
|
|
35
|
+
path: {
|
|
36
|
+
d: string;
|
|
37
|
+
}[];
|
|
38
|
+
paths?: never;
|
|
39
|
+
})[];
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Base viewport configuration for each map type
|
|
44
|
+
* These are the original/optimal dimensions for each map
|
|
45
|
+
*/
|
|
46
|
+
export declare const BASE_VIEWPORT_CONFIGS: {
|
|
47
|
+
readonly afghanistan: {
|
|
48
|
+
readonly height: 457.2;
|
|
49
|
+
readonly width: 600;
|
|
50
|
+
readonly viewBox: "0 0 600 457.2";
|
|
51
|
+
readonly aspectRatio: number;
|
|
52
|
+
};
|
|
53
|
+
readonly world: {
|
|
54
|
+
readonly height: 857;
|
|
55
|
+
readonly width: 2000;
|
|
56
|
+
readonly viewBox: "0 0 2000 857";
|
|
57
|
+
readonly aspectRatio: number;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Size preset configurations
|
|
62
|
+
* Defines the dimensions for each size variant
|
|
63
|
+
*/
|
|
64
|
+
export declare const SIZE_PRESETS: {
|
|
65
|
+
readonly xs: {
|
|
66
|
+
readonly scale: 0.25;
|
|
67
|
+
readonly description: "Extra small - 25% of original size";
|
|
68
|
+
};
|
|
69
|
+
readonly sm: {
|
|
70
|
+
readonly scale: 0.5;
|
|
71
|
+
readonly description: "Small - 50% of original size";
|
|
72
|
+
};
|
|
73
|
+
readonly md: {
|
|
74
|
+
readonly scale: 0.75;
|
|
75
|
+
readonly description: "Medium - 75% of original size";
|
|
76
|
+
};
|
|
77
|
+
readonly lg: {
|
|
78
|
+
readonly scale: 1;
|
|
79
|
+
readonly description: "Large - 100% of original size (default)";
|
|
80
|
+
};
|
|
81
|
+
readonly xl: {
|
|
82
|
+
readonly scale: 1.5;
|
|
83
|
+
readonly description: "Extra large - 150% of original size";
|
|
84
|
+
};
|
|
85
|
+
readonly "2xl": {
|
|
86
|
+
readonly scale: 2;
|
|
87
|
+
readonly description: "2X Large - 200% of original size";
|
|
88
|
+
};
|
|
89
|
+
readonly "3xl": {
|
|
90
|
+
readonly scale: 2.5;
|
|
91
|
+
readonly description: "3X Large - 250% of original size";
|
|
92
|
+
};
|
|
93
|
+
readonly "4xl": {
|
|
94
|
+
readonly scale: 3;
|
|
95
|
+
readonly description: "4X Large - 300% of original size";
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Calculate viewport dimensions based on size variant
|
|
100
|
+
* @param baseConfig - Base viewport configuration
|
|
101
|
+
* @param size - Size variant or custom size
|
|
102
|
+
* @returns Calculated width and height
|
|
103
|
+
*/
|
|
104
|
+
export declare const calculateViewportDimensions: (baseConfig: typeof BASE_VIEWPORT_CONFIGS.afghanistan | typeof BASE_VIEWPORT_CONFIGS.world, size?: MapSize) => {
|
|
105
|
+
width: number;
|
|
106
|
+
height: number;
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* Generate viewport style string
|
|
110
|
+
*/
|
|
111
|
+
export declare const generateViewportStyle: (dimensions: {
|
|
112
|
+
width: number;
|
|
113
|
+
height: number;
|
|
114
|
+
}, baseStyle?: string) => string;
|
|
115
|
+
/**
|
|
116
|
+
* SVG viewport configurations for each map type with size variants
|
|
117
|
+
*/
|
|
118
|
+
export declare const SVG_VIEWPORT_CONFIGS: {
|
|
119
|
+
readonly afghanistan: {
|
|
120
|
+
readonly base: {
|
|
121
|
+
readonly height: 457.2;
|
|
122
|
+
readonly width: 600;
|
|
123
|
+
readonly viewBox: "0 0 600 457.2";
|
|
124
|
+
readonly aspectRatio: number;
|
|
125
|
+
};
|
|
126
|
+
readonly getConfig: (size?: MapSize) => {
|
|
127
|
+
height: string;
|
|
128
|
+
width: string;
|
|
129
|
+
style: string;
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
readonly world: {
|
|
133
|
+
readonly base: {
|
|
134
|
+
readonly height: 857;
|
|
135
|
+
readonly width: 2000;
|
|
136
|
+
readonly viewBox: "0 0 2000 857";
|
|
137
|
+
readonly aspectRatio: number;
|
|
138
|
+
};
|
|
139
|
+
readonly getConfig: (size?: MapSize) => {
|
|
140
|
+
height: string;
|
|
141
|
+
width: string;
|
|
142
|
+
style: string;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
/**
|
|
147
|
+
* Default styling options for map regions
|
|
148
|
+
*/
|
|
149
|
+
export declare const DEFAULT_MAP_OPTIONS: Required<MapOptions>;
|
|
150
|
+
//# sourceMappingURL=config.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAIjD;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCf,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,GACpC,YAAY,OAAO,qBAAqB,CAAC,WAAW,GAAG,OAAO,qBAAqB,CAAC,KAAK,EACzF,OAAM,OAAc,KACrB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAuBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAC9B,YAAY;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC7C,YAAW,MAAW,KACvB,MAEF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;oCAGP,OAAO;;;;;;;;;;;;;oCAWP,OAAO;;;;;;CASvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,UAAU,CAIpD,CAAC"}
|
package/dist/config.js
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import AF from "./maps/AF";
|
|
2
|
+
import World from "./maps/World";
|
|
3
|
+
/**
|
|
4
|
+
* Map data registry containing all available map configurations
|
|
5
|
+
*/
|
|
6
|
+
export const MAP_DATA_REGISTRY = {
|
|
7
|
+
afghanistan: AF,
|
|
8
|
+
world: World
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Base viewport configuration for each map type
|
|
12
|
+
* These are the original/optimal dimensions for each map
|
|
13
|
+
*/
|
|
14
|
+
export const BASE_VIEWPORT_CONFIGS = {
|
|
15
|
+
afghanistan: {
|
|
16
|
+
height: 457.2,
|
|
17
|
+
width: 600,
|
|
18
|
+
viewBox: "0 0 600 457.2",
|
|
19
|
+
aspectRatio: 600 / 457.2
|
|
20
|
+
},
|
|
21
|
+
world: {
|
|
22
|
+
height: 857,
|
|
23
|
+
width: 2000,
|
|
24
|
+
viewBox: "0 0 2000 857",
|
|
25
|
+
aspectRatio: 2000 / 857
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Size preset configurations
|
|
30
|
+
* Defines the dimensions for each size variant
|
|
31
|
+
*/
|
|
32
|
+
export const SIZE_PRESETS = {
|
|
33
|
+
xs: {
|
|
34
|
+
scale: 0.25,
|
|
35
|
+
description: "Extra small - 25% of original size"
|
|
36
|
+
},
|
|
37
|
+
sm: {
|
|
38
|
+
scale: 0.5,
|
|
39
|
+
description: "Small - 50% of original size"
|
|
40
|
+
},
|
|
41
|
+
md: {
|
|
42
|
+
scale: 0.75,
|
|
43
|
+
description: "Medium - 75% of original size"
|
|
44
|
+
},
|
|
45
|
+
lg: {
|
|
46
|
+
scale: 1,
|
|
47
|
+
description: "Large - 100% of original size (default)"
|
|
48
|
+
},
|
|
49
|
+
xl: {
|
|
50
|
+
scale: 1.5,
|
|
51
|
+
description: "Extra large - 150% of original size"
|
|
52
|
+
},
|
|
53
|
+
"2xl": {
|
|
54
|
+
scale: 2,
|
|
55
|
+
description: "2X Large - 200% of original size"
|
|
56
|
+
},
|
|
57
|
+
"3xl": {
|
|
58
|
+
scale: 2.5,
|
|
59
|
+
description: "3X Large - 250% of original size"
|
|
60
|
+
},
|
|
61
|
+
"4xl": {
|
|
62
|
+
scale: 3,
|
|
63
|
+
description: "4X Large - 300% of original size"
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Calculate viewport dimensions based on size variant
|
|
68
|
+
* @param baseConfig - Base viewport configuration
|
|
69
|
+
* @param size - Size variant or custom size
|
|
70
|
+
* @returns Calculated width and height
|
|
71
|
+
*/
|
|
72
|
+
export const calculateViewportDimensions = (baseConfig, size = 'lg') => {
|
|
73
|
+
// If size is a number, use it as a scale factor
|
|
74
|
+
if (typeof size === 'number') {
|
|
75
|
+
return {
|
|
76
|
+
width: baseConfig.width * size,
|
|
77
|
+
height: baseConfig.height * size
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
// If size is a string preset, get the scale factor
|
|
81
|
+
const preset = SIZE_PRESETS[size];
|
|
82
|
+
if (preset) {
|
|
83
|
+
return {
|
|
84
|
+
width: baseConfig.width * preset.scale,
|
|
85
|
+
height: baseConfig.height * preset.scale
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
// Default to large (scale 1)
|
|
89
|
+
return {
|
|
90
|
+
width: baseConfig.width,
|
|
91
|
+
height: baseConfig.height
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
/**
|
|
95
|
+
* Generate viewport style string
|
|
96
|
+
*/
|
|
97
|
+
export const generateViewportStyle = (dimensions, baseStyle = "") => {
|
|
98
|
+
return `width: ${dimensions.width}px; height: ${dimensions.height}px; ${baseStyle}`.trim();
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* SVG viewport configurations for each map type with size variants
|
|
102
|
+
*/
|
|
103
|
+
export const SVG_VIEWPORT_CONFIGS = {
|
|
104
|
+
afghanistan: {
|
|
105
|
+
base: BASE_VIEWPORT_CONFIGS.afghanistan,
|
|
106
|
+
getConfig: (size = 'lg') => {
|
|
107
|
+
const dimensions = calculateViewportDimensions(BASE_VIEWPORT_CONFIGS.afghanistan, size);
|
|
108
|
+
return {
|
|
109
|
+
height: dimensions.height.toString(),
|
|
110
|
+
width: dimensions.width.toString(),
|
|
111
|
+
style: `overflow: hidden; position: relative; width: ${dimensions.width}px; height: ${dimensions.height}px;`
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
world: {
|
|
116
|
+
base: BASE_VIEWPORT_CONFIGS.world,
|
|
117
|
+
getConfig: (size = 'lg') => {
|
|
118
|
+
const dimensions = calculateViewportDimensions(BASE_VIEWPORT_CONFIGS.world, size);
|
|
119
|
+
return {
|
|
120
|
+
height: dimensions.height.toString(),
|
|
121
|
+
width: dimensions.width.toString(),
|
|
122
|
+
style: `width: ${dimensions.width}px; height: ${dimensions.height}px;`
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
/**
|
|
128
|
+
* Default styling options for map regions
|
|
129
|
+
*/
|
|
130
|
+
export const DEFAULT_MAP_OPTIONS = {
|
|
131
|
+
background: '#f0f0f0',
|
|
132
|
+
borders: '#333333',
|
|
133
|
+
size: 'lg'
|
|
134
|
+
};
|
|
135
|
+
//# sourceMappingURL=config.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3B,OAAO,KAAK,MAAM,cAAc,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,WAAW,EAAE,EAAE;IACf,KAAK,EAAE,KAAK;CACN,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,WAAW,EAAE;QACT,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,eAAe;QACxB,WAAW,EAAE,GAAG,GAAG,KAAK;KAC3B;IACD,KAAK,EAAE;QACH,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,IAAI,GAAG,GAAG;KAC1B;CACK,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,EAAE,EAAE;QACA,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,oCAAoC;KACpD;IACD,EAAE,EAAE;QACA,KAAK,EAAE,GAAG;QACV,WAAW,EAAE,8BAA8B;KAC9C;IACD,EAAE,EAAE;QACA,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,+BAA+B;KAC/C;IACD,EAAE,EAAE;QACA,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,yCAAyC;KACzD;IACD,EAAE,EAAE;QACA,KAAK,EAAE,GAAG;QACV,WAAW,EAAE,qCAAqC;KACrD;IACD,KAAK,EAAE;QACH,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,kCAAkC;KAClD;IACD,KAAK,EAAE;QACH,KAAK,EAAE,GAAG;QACV,WAAW,EAAE,kCAAkC;KAClD;IACD,KAAK,EAAE;QACH,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,kCAAkC;KAClD;CACK,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACvC,UAAyF,EACzF,OAAgB,IAAI,EACa,EAAE;IACnC,gDAAgD;IAChD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO;YACH,KAAK,EAAE,UAAU,CAAC,KAAK,GAAG,IAAI;YAC9B,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI;SACnC,CAAC;IACN,CAAC;IAED,mDAAmD;IACnD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAiC,CAAC,CAAC;IAC/D,IAAI,MAAM,EAAE,CAAC;QACT,OAAO;YACH,KAAK,EAAE,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACtC,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK;SAC3C,CAAC;IACN,CAAC;IAED,6BAA6B;IAC7B,OAAO;QACH,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,MAAM,EAAE,UAAU,CAAC,MAAM;KAC5B,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACjC,UAA6C,EAC7C,YAAoB,EAAE,EAChB,EAAE;IACR,OAAO,UAAU,UAAU,CAAC,KAAK,eAAe,UAAU,CAAC,MAAM,OAAO,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC;AAC/F,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,WAAW,EAAE;QACT,IAAI,EAAE,qBAAqB,CAAC,WAAW;QACvC,SAAS,EAAE,CAAC,OAAgB,IAAI,EAAE,EAAE;YAChC,MAAM,UAAU,GAAG,2BAA2B,CAAC,qBAAqB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACxF,OAAO;gBACH,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACpC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAClC,KAAK,EAAE,gDAAgD,UAAU,CAAC,KAAK,eAAe,UAAU,CAAC,MAAM,KAAK;aAC/G,CAAC;QACN,CAAC;KACJ;IACD,KAAK,EAAE;QACH,IAAI,EAAE,qBAAqB,CAAC,KAAK;QACjC,SAAS,EAAE,CAAC,OAAgB,IAAI,EAAE,EAAE;YAChC,MAAM,UAAU,GAAG,2BAA2B,CAAC,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAClF,OAAO;gBACH,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACpC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAClC,KAAK,EAAE,UAAU,UAAU,CAAC,KAAK,eAAe,UAAU,CAAC,MAAM,KAAK;aACzE,CAAC;QACN,CAAC;KACJ;CACK,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAyB;IACrD,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAG,IAAI;CACd,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import type { MapOptions, MapType } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Creates an SVG map string for the specified map type
|
|
4
|
+
*
|
|
5
|
+
* @param mapType - Type of map to generate ('afghanistan' | 'world')
|
|
6
|
+
* @param options - Optional styling configuration for the map
|
|
7
|
+
* @returns Complete SVG string representing the map
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* // Create a world map with custom colors and size
|
|
11
|
+
* const worldMap = createMap('world', {
|
|
12
|
+
* background: '#e6f3ff',
|
|
13
|
+
* borders: '#2c3e50',
|
|
14
|
+
* size: 'xl'
|
|
15
|
+
* });
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Create Afghanistan map at 50% scale
|
|
19
|
+
* const afghanMap = createMap('afghanistan', {
|
|
20
|
+
* size: 0.5
|
|
21
|
+
* });
|
|
22
|
+
*
|
|
23
|
+
* @throws {Error} If the map type is not found in the registry
|
|
24
|
+
*/
|
|
25
|
+
export declare const createMap: (mapType: MapType, options?: MapOptions) => string;
|
|
26
|
+
export default createMap;
|
|
3
27
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,UAAU,EAAa,OAAO,EAAW,MAAM,SAAS,CAAC;AA0G/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,OAAO,EAAE,UAAS,UAAe,KAAG,MAkBtE,CAAC;AAEF,eAAe,SAAS,CAAC"}
|