world-map-svg 0.1.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/README.md +80 -0
- package/dist/WorldMap.d.ts +11 -0
- package/dist/index.d.ts +2 -0
- package/dist/style.css +2 -0
- package/dist/world-map-svg.cjs.js +1038 -0
- package/dist/world-map-svg.es.js +214 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# world-map-svg
|
|
2
|
+
|
|
3
|
+
Interactive SVG world map React component with zoom, pan, and country selection.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install world-map-svg
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { WorldMap } from 'world-map-svg'
|
|
15
|
+
import 'world-map-svg/style.css'
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<div style={{ width: '100%', height: '500px' }}>
|
|
20
|
+
<WorldMap
|
|
21
|
+
countryColor="#2563eb"
|
|
22
|
+
defaultRegionName="India"
|
|
23
|
+
defaultCountryCode="BD"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Props
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Default | Description |
|
|
33
|
+
|------|------|---------|-------------|
|
|
34
|
+
| `backgroundColor` | `string` | `transparent` | Map background color |
|
|
35
|
+
| `countryColor` | `string` | `#2563eb` | Base fill color for countries |
|
|
36
|
+
| `defaultRegionName` | `string` | - | Region name to focus on load |
|
|
37
|
+
| `defaultCountryCode` | `string` | - | ISO country code to highlight on load |
|
|
38
|
+
| `svgUrl` | `string` | bundled SVG | Custom SVG URL to override the default world map |
|
|
39
|
+
| `className` | `string` | - | Additional CSS class for the container |
|
|
40
|
+
|
|
41
|
+
## Development
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm install
|
|
45
|
+
npm run dev # Start playground dev server
|
|
46
|
+
npm run build # Build library for publishing
|
|
47
|
+
npm run lint
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The default SVG map data is bundled with the package. You can override it via the `svgUrl` prop.
|
|
51
|
+
|
|
52
|
+
## Publish Checklist
|
|
53
|
+
|
|
54
|
+
1. Confirm package name availability:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm view world-map-svg
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
If taken, rename to a scoped package in `package.json` (for example `@yourname/world-map-svg`).
|
|
61
|
+
|
|
62
|
+
2. Update package metadata in `package.json`:
|
|
63
|
+
- `repository.url`
|
|
64
|
+
- `bugs.url`
|
|
65
|
+
- `homepage`
|
|
66
|
+
|
|
67
|
+
3. Run release checks:
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npm run build
|
|
71
|
+
npm run lint
|
|
72
|
+
npm pack --dry-run
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
4. Login and publish:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npm login
|
|
79
|
+
npm publish --access public
|
|
80
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './WorldMap.css';
|
|
2
|
+
export type WorldMapProps = {
|
|
3
|
+
backgroundColor?: string;
|
|
4
|
+
countryColor?: string;
|
|
5
|
+
defaultRegionName?: string;
|
|
6
|
+
defaultCountryCode?: string;
|
|
7
|
+
svgUrl?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
export declare function WorldMap({ backgroundColor, countryColor, defaultRegionName, defaultCountryCode, svgUrl, className, }: WorldMapProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default WorldMap;
|
package/dist/index.d.ts
ADDED
package/dist/style.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.map-container{cursor:grab;background:var(--map-background,transparent);width:100%;height:100%;position:relative;overflow:hidden}.map-container.is-panning{cursor:grabbing}.map-viewport{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s;display:flex}.map-svg-wrap{width:100%}.map-svg{width:100%;height:auto;display:block}.map-svg .country{fill:var(--country-fill,#2563eb);stroke:var(--country-stroke,#1e40af);stroke-width:.6px;cursor:pointer;transform-origin:50%;transition:fill .2s,transform .2s}.map-svg .country:hover{fill:var(--country-hover,#3b82f6)}.map-svg .country.is-selected{fill:var(--country-selected,#1d4ed8);stroke:var(--country-selected,#1d4ed8)}.map-svg .country.is-default{fill:#16a34a;stroke:#16a34a}.map-tooltip{color:#fff;pointer-events:none;white-space:nowrap;background:#111;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;transform:translate(-50%,-120%)}.map-tooltip.is-pinned{background:#333}.map-loading{color:#666;font-size:14px}
|
|
2
|
+
/*$vite$:1*/
|