An interactive globe map component for React applications, featuring smooth animations, custom markers, and bounce cards.
npm install @patternize/travel-map
# or
yarn add @patternize/travel-mapimport { 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}
/>
);
}| 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 |
interface MarkerData {
id: string | number;
longitude: number;
latitude: number;
size?: number;
color?: string;
name?: string;
description?: string;
images?: string[];
}This repository is set up with GitHub Actions workflows for automated publishing:
- 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- 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.
MIT