@patternize/travel-map

An interactive globe map component for React applications, featuring smooth animations, custom markers, and bounce cards.

Installation

npm install @patternize/travel-map
# or
yarn add @patternize/travel-map

Usage

import { GlobeMap } from '@patternize/travel-map';

function App() {
  const markers = [
    {
      id: 1,
      longitude: -74.006,
      latitude: 40.7128,
      name: 'New York',
      description: 'The Big Apple',
      images: [
        'https://example.com/ny1.jpg',
        'https://example.com/ny2.jpg',
        'https://example.com/ny3.jpg'
      ]
    },
    // ... more markers
  ];

  return (
    <GlobeMap
      width="100%"
      height={500}
      mapboxToken="YOUR_MAPBOX_TOKEN"
      markers={markers}
      enableAnimation={true}
      interactiveMarkers={true}
      showBounceCards={true}
    />
  );
}

Props

Prop	Type	Default	Description
width	string | number	'100%'	Width of the map container
height	string | number	500	Height of the map container
mapboxToken	string	-	Your Mapbox access token
initialViewState	object	{ longitude: 0, latitude: 0, zoom: 1 }	Initial view state of the map
markers	MarkerData[]	[]	Array of markers to display
onMarkerClick	(marker: MarkerData) => void	-	Callback when a marker is clicked
enableAnimation	boolean	false	Enable auto-rotation animation
interactiveMarkers	boolean	true	Enable marker interaction
showBounceCards	boolean	true	Show bounce cards on marker click

MarkerData Interface

interface MarkerData {
  id: string | number;
  longitude: number;
  latitude: number;
  size?: number;
  color?: string;
  name?: string;
  description?: string;
  images?: string[];
}

Publishing

This repository is set up with GitHub Actions workflows for automated publishing:

1. Tag-based publishing: When you push a tag with the format v*.*.* (e.g., v0.1.2), GitHub Actions will automatically build and publish the package to npm.

npm version patch
git push --follow-tags

2. Manual workflow: You can also trigger a manual publish from the GitHub Actions tab:
   • Go to the "Actions" tab in your GitHub repository
   • Select "Manual Publish to npm" workflow
   • Click "Run workflow"
   • Choose the version increment type (patch, minor, major) or enter a custom version
   • The workflow will update the version, build, and publish to npm

Note: Both workflows require an NPM_TOKEN secret to be set in your GitHub repository settings.

License

MIT