{"id":30325716,"url":"https://github.com/stacksjs/ts-maps","last_synced_at":"2025-08-17T23:07:16.518Z","repository":{"id":281233154,"uuid":"944639370","full_name":"stacksjs/ts-maps","owner":"stacksjs","description":"🗺️ Modern \u0026 lightweight TypeScript library for creating interactive vector maps.","archived":false,"fork":false,"pushed_at":"2025-08-13T14:30:56.000Z","size":1455,"stargazers_count":7,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-13T16:27:27.270Z","etag":null,"topics":["framework-agnostic","interactive","library","maps","react","typescript","vector","vue"],"latest_commit_sha":null,"homepage":"https://ts-maps.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stacksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["stacksjs","chrisbbreuer"],"open_collective":"stacksjs"}},"created_at":"2025-03-07T17:47:50.000Z","updated_at":"2025-08-13T14:26:39.000Z","dependencies_parsed_at":"2025-03-24T09:31:25.997Z","dependency_job_id":"5a86c3db-79ee-4de7-82ed-5e9992ef8435","html_url":"https://github.com/stacksjs/ts-maps","commit_stats":null,"previous_names":["stacksjs/ts-maps"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/stacksjs/ts-maps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fts-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fts-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fts-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fts-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stacksjs","download_url":"https://codeload.github.com/stacksjs/ts-maps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fts-maps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270335233,"owners_count":24566740,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework-agnostic","interactive","library","maps","react","typescript","vector","vue"],"created_at":"2025-08-17T23:07:15.631Z","updated_at":"2025-08-17T23:07:16.499Z","avatar_url":"https://github.com/stacksjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/stacksjs","https://github.com/sponsors/chrisbbreuer","https://opencollective.com/stacksjs"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/stacksjs/ts-maps/blob/main/.github/art/cover.jpg?raw=true\" alt=\"Social Card of ts-maps\"\u003e\u003c/p\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![GitHub Actions][github-actions-src]][github-actions-href]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n# ts-maps\n\n\u003e Modern TypeScript library for creating stunning vector maps\n\n## Features\n\n- 🗺️ **Vector Maps**\n  - High-quality SVG-based interactive maps\n  - Multiple projection types (Mercator, Equal Earth)\n  - Built-in world maps and custom regions\n\n- 📊 **Data Visualization**\n  - Choropleth maps with customizable scales\n  - Heat maps and bubble charts\n  - Interactive legends and tooltips\n\n- 🎯 **Framework Agnostic**\n  - Zero dependencies\n  - Works with any framework\n  - Official React and Vue bindings\n\n- 🔒 **Type Safety**\n  - Full TypeScript support\n  - Strict types for better DX\n  - Comprehensive type definitions\n\n## Installation\n\n```bash\n# Using npm\nnpm install ts-maps\n\n# Using pnpm\npnpm add ts-maps\n\n# Using yarn\nyarn add ts-maps\n\n# Using bun\nbun add ts-maps\n```\n\n### Framework Bindings\n\n```bash\n# React\nnpm install ts-maps ts-maps-react\n\n# Vue\nnpm install ts-maps ts-maps-vue\n```\n\n## Quick Start\n\n```typescript\nimport type { VectorMapOptions } from 'ts-maps'\nimport { VectorMap } from 'ts-maps'\n\n// Create a map instance\nconst map = new VectorMap({\n  container: 'map',\n  map: 'world',\n  theme: 'light',\n  style: {\n    regions: {\n      fill: '#e4e4e4',\n      stroke: '#ffffff',\n      strokeWidth: 1,\n    },\n    hover: {\n      fill: '#2ca25f',\n    },\n  },\n})\n\n// Add interactivity\nmap.on('regionClick', (event, region) =\u003e {\n  console.log(`Clicked: ${region.id}`)\n})\n```\n\n### Data Visualization\n\n```typescript\nimport type { DataVisualizationOptions } from 'ts-maps'\nimport { VectorMap } from 'ts-maps'\n\nconst map = new VectorMap({\n  container: 'map',\n  map: 'world',\n})\n\n// Add data visualization\nconst options: DataVisualizationOptions = {\n  scale: ['#e5f5f9', '#2ca25f'], // Color gradient from light blue to green\n  values: {\n    US: 100,\n    CA: 80,\n    GB: 65,\n  },\n}\n\nmap.visualizeData(options)\n```\n\n### React Component\n\n```tsx\nimport type { VectorMapProps } from 'ts-maps-react'\nimport { useVectorMap } from 'ts-maps-react'\n\nfunction WorldMap() {\n  const { map, isLoading } = useVectorMap({\n    map: 'world',\n    theme: 'light',\n  })\n\n  return (\n    \u003cdiv className=\"map-container\"\u003e\n      {isLoading\n        ? (\n            \u003cdiv\u003eLoading...\u003c/div\u003e\n          )\n        : (\n            \u003cdiv id=\"map\" /\u003e\n          )}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Vue Component\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport type { VectorMapOptions } from 'ts-maps'\nimport { useVectorMap } from 'ts-maps-vue'\n\nconst { map, isLoading } = useVectorMap({\n  map: 'world',\n  theme: 'light',\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"map-container\"\u003e\n    \u003cdiv v-if=\"isLoading\"\u003e\n      Loading...\n    \u003c/div\u003e\n    \u003cdiv v-else id=\"map\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Documentation\n\n- [Introduction](https://ts-maps.dev/intro)\n- [Installation](https://ts-maps.dev/install)\n- [Usage Guide](https://ts-maps.dev/usage)\n- [API Reference](https://ts-maps.dev/api)\n- [Examples](https://ts-maps.dev/examples)\n- [Playground](https://ts-maps.dev/playground)\n\n## Development\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/stacksjs/ts-maps.git\ncd ts-maps\n```\n\n2. Install dependencies:\n\n```bash\npnpm install\n```\n\n3. Start development:\n\n```bash\npnpm dev\n```\n\n## Changelog\n\nPlease see our [releases](https://github.com/stacksjs/ts-maps/releases) page for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/stacksjs/stacks/blob/main/.github/CONTRIBUTING.md) for details.\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/stacksjs/ts-maps/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Stacks Discord Server](https://discord.gg/stacksjs)\n\n## Postcardware\n\n“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.\n\nOur address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎\n\n## Sponsors\n\nWe 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.\n\n- [JetBrains](https://www.jetbrains.com/)\n- [The Solana Foundation](https://solana.com/)\n\n## Credits\n\n- [jsvectormap](https://github.com/themustafaomar/jsvectormap)\n- [Chris Breuer](https://github.com/chrisbbreuer)\n- [All Contributors](https://github.com/stacksjs/ts-maps/contributors)\n\n## License\n\nThe MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/clarity/blob/main/LICENSE.md) for more information.\n\nMade with 💙\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/clarity?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@stacksjs/clarity\n[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/clarity/ci.yml?style=flat-square\u0026branch=main\n[github-actions-href]: https://github.com/stacksjs/clarity/actions?query=workflow%3Aci\n\n\u003c!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/clarity/main?style=flat-square\n[codecov-href]: https://codecov.io/gh/stacksjs/clarity --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fts-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstacksjs%2Fts-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fts-maps/lists"}