GitHub - stacksjs/ts-maps: 🗺️ Modern & lightweight TypeScript library for creating interactive vector 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

# 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

# React
npm install ts-maps ts-maps-react

# Vue
npm install ts-maps ts-maps-vue

# Nuxt
npm install ts-maps-nuxt

Quick Start

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

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

import type { VectorMapProps } from 'ts-maps-react'
import { useVectorMap } from 'ts-maps-react'

function WorldMap() {
  const { map, isLoading } = useVectorMap({
    map: 'world',
    theme: 'light',
  })

  return (
    <div className="map-container">
      {isLoading
        ? (
            <div>Loading...</div>
          )
        : (
            <div id="map" />
          )}
    </div>
  )
}

Vue Component

<script setup lang="ts">
import type { VectorMapOptions } from 'ts-maps'
import { useVectorMap } from 'ts-maps-vue'

const { map, isLoading } = useVectorMap({
  map: 'world',
  theme: 'light',
})
</script>

<template>
  <div class="map-container">
    <div v-if="isLoading">
      Loading...
    </div>
    <div v-else id="map" />
  </div>
</template>

Nuxt Component

For Nuxt applications, first add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'ts-maps-nuxt'
  ]
})

Then use the components directly in your Vue templates:

<script setup lang="ts">
import type { MapOptions } from 'ts-maps'

const mapOptions: Omit<MapOptions, 'selector'> = {
  backgroundColor: '#f0f0f0',
  zoomOnScroll: true,
  style: {
    regions: {
      fill: '#e4e4e4',
      stroke: '#ffffff',
      strokeWidth: 1,
    },
  },
}
</script>

<template>
  <VectorMap
    :options="mapOptions"
    map-name="world"
    height="500px"
  />
</template>

Available components include:

VectorMap - Generic map component
WorldMap - World map
UnitedStates - United States map
Canada - Canada map
Brasil - Brazil map
Spain - Spain map
Italy - Italy map
Russia - Russia map
Iraq - Iraq map

See Nuxt Components Documentation for detailed usage.

Documentation

Development

Clone the repository:

git clone https://github.com/stacksjs/ts-maps.git
cd ts-maps

Install dependencies:

Start development:

Changelog

Please see our releases page for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

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 🌎

Credits

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙