https://github.com/stacksjs/ts-maps
🗺️ Modern & lightweight TypeScript library for creating interactive vector maps.
https://github.com/stacksjs/ts-maps
framework-agnostic interactive library maps react typescript vector vue
Last synced: 11 months ago
JSON representation
🗺️ Modern & lightweight TypeScript library for creating interactive vector maps.
- Host: GitHub
- URL: https://github.com/stacksjs/ts-maps
- Owner: stacksjs
- License: mit
- Created: 2025-03-07T17:47:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-13T14:30:56.000Z (11 months ago)
- Last Synced: 2025-08-13T16:27:27.270Z (11 months ago)
- Topics: framework-agnostic, interactive, library, maps, react, typescript, vector, vue
- Language: TypeScript
- Homepage: https://ts-maps.netlify.app
- Size: 1.39 MB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[![npm version][npm-version-src]][npm-version-href]
[![GitHub Actions][github-actions-src]][github-actions-href]
[](http://commitizen.github.io/cz-cli/)
# ts-maps
> Modern TypeScript library for creating stunning vector maps
## Features
- 🗺️ **Vector Maps**
- High-quality SVG-based interactive maps
- Multiple projection types (Mercator, Equal Earth)
- Built-in world maps and custom regions
- 📊 **Data Visualization**
- Choropleth maps with customizable scales
- Heat maps and bubble charts
- Interactive legends and tooltips
- 🎯 **Framework Agnostic**
- Zero dependencies
- Works with any framework
- Official React and Vue bindings
- 🔒 **Type Safety**
- Full TypeScript support
- Strict types for better DX
- Comprehensive type definitions
## Installation
```bash
# Using npm
npm install ts-maps
# Using pnpm
pnpm add ts-maps
# Using yarn
yarn add ts-maps
# Using bun
bun add ts-maps
```
### Framework Bindings
```bash
# React
npm install ts-maps ts-maps-react
# Vue
npm install ts-maps ts-maps-vue
```
## Quick Start
```typescript
import type { VectorMapOptions } from 'ts-maps'
import { VectorMap } from 'ts-maps'
// Create a map instance
const map = new VectorMap({
container: 'map',
map: 'world',
theme: 'light',
style: {
regions: {
fill: '#e4e4e4',
stroke: '#ffffff',
strokeWidth: 1,
},
hover: {
fill: '#2ca25f',
},
},
})
// Add interactivity
map.on('regionClick', (event, region) => {
console.log(`Clicked: ${region.id}`)
})
```
### Data Visualization
```typescript
import type { DataVisualizationOptions } from 'ts-maps'
import { VectorMap } from 'ts-maps'
const map = new VectorMap({
container: 'map',
map: 'world',
})
// Add data visualization
const options: DataVisualizationOptions = {
scale: ['#e5f5f9', '#2ca25f'], // Color gradient from light blue to green
values: {
US: 100,
CA: 80,
GB: 65,
},
}
map.visualizeData(options)
```
### React Component
```tsx
import type { VectorMapProps } from 'ts-maps-react'
import { useVectorMap } from 'ts-maps-react'
function WorldMap() {
const { map, isLoading } = useVectorMap({
map: 'world',
theme: 'light',
})
return (
{isLoading
? (
Loading...
)
: (
)}
)
}
```
### Vue Component
```vue
import type { VectorMapOptions } from 'ts-maps'
import { useVectorMap } from 'ts-maps-vue'
const { map, isLoading } = useVectorMap({
map: 'world',
theme: 'light',
})
Loading...
```
## Documentation
- [Introduction](https://ts-maps.dev/intro)
- [Installation](https://ts-maps.dev/install)
- [Usage Guide](https://ts-maps.dev/usage)
- [API Reference](https://ts-maps.dev/api)
- [Examples](https://ts-maps.dev/examples)
- [Playground](https://ts-maps.dev/playground)
## Development
1. Clone the repository:
```bash
git clone https://github.com/stacksjs/ts-maps.git
cd ts-maps
```
2. Install dependencies:
```bash
pnpm install
```
3. Start development:
```bash
pnpm dev
```
## Changelog
Please see our [releases](https://github.com/stacksjs/ts-maps/releases) page for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](https://github.com/stacksjs/stacks/blob/main/.github/CONTRIBUTING.md) for details.
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discussions on GitHub](https://github.com/stacksjs/ts-maps/discussions)
For casual chit-chat with others using this package:
[Join the Stacks Discord Server](https://discord.gg/stacksjs)
## Postcardware
“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where `ts-maps` is being used! We showcase them on our website too.
Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
## Sponsors
We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.
- [JetBrains](https://www.jetbrains.com/)
- [The Solana Foundation](https://solana.com/)
## Credits
- [jsvectormap](https://github.com/themustafaomar/jsvectormap)
- [Chris Breuer](https://github.com/chrisbbreuer)
- [All Contributors](https://github.com/stacksjs/ts-maps/contributors)
## License
The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/clarity/blob/main/LICENSE.md) for more information.
Made with 💙
[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/clarity?style=flat-square
[npm-version-href]: https://npmjs.com/package/@stacksjs/clarity
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/clarity/ci.yml?style=flat-square&branch=main
[github-actions-href]: https://github.com/stacksjs/clarity/actions?query=workflow%3Aci