@outoforbitdev/galaxy-map

A React component for displaying a galactic map.

Features

- Display planets and spacelanes on a galactic map
- Map is both draggable and zoomable on desktop and mobile
- Single finger drag and pinch to zoom on mobile
- Click and drag and scroll to zoom on desktop
- Customize the colors
- Automatically adjusts colors based on themes
- Add custom options for the user to modify the map

Installation

``
npm install --save @outoforbitdev/galaxy-map
`

Usage

Import:

import GalaxyMap, {MapColor} from "@outoforbitdev/galaxy-map";

Create:

`typescript
const planets =[
{
name: "Earth",
x: 100,
y: 0,
color: MapColor.Blue,
focusLevel: 1,
},
{
name: "Kepler-37",
x: 200,
y: 300,
color: MapColor.Red,
focusLevel: 2,
}
]

const spaceLanes = [
{
name: "Earth-Kepler Route",
xOne: 100,
yOne: 0,
xTwo: 200,
yTwo: 300,
color: MapColor.Gray,
focusLevel: 2,
}
]

const dimensions = {
minX: -100,
minY: -100,
maxX: 400,
maxY: 400,
}

const zoom = {
initial: 80,
min: 0,
}

return (
planets={planets}
spacelanes={spacelanes}
dimensions={dimensions}
zoom={zoom}
/>
);
`

API

$3

| Prop | Type | Default | Description |
| ----------------- | -------------- | ----------- | --------------------------------------------- |
| planets | IPlanet[] | Required | List of planets to display on the map |
| spacelanes | ISpacelane[] | Required | List of spacelanes to display on the map |
| dimensions.minX | number | Required | Minimum x coordinate that should be displayed |
| dimensions.minY | number | Required | Minimum y coordinate that should be displayed |
| dimensions.maxX | number | Required | Maximum x coordinate that should be displayed |
| dimensions.maxY | number | Required | Maximum y coordinate that should be displayed |
| mapOptions | IMapOptions | undefined | Options for the options window in the map |
| zoom.initial | number | 1 | Initial zoom level for the map |
| zoom.min | number | | Minimum zoom level |
| zoom.max | number | | Maximum zoom level |

$3

| Prop | Type | Default | Description |
| ------------ | ------------ | -------- | ----------------------------------------------- |
| name | string | Required | Name of the planet |
| x | number | Required | X coordinate of the planet |
| y | number | Required | Y coordinate of the planet |
| color | MapColor | Required | Color of the planet |
| focusLevel | FocusLevel | Required | Zoom level at which the planet comes into focus |

$3

| Prop | Type | Default | Description |
| ------------ | ------------ | -------- | -------------------------------------------------- |
| name | string | Required | Name of the spacelane |
| xOne | number | Required | X coordinate of the first end of the spacelane |
| yOne | number | Required | Y coordinate of the first end of the spacelane |
| xTwo | number | Required | X coordinate of the second end of the spacelane |
| yTwo | number | Required | Y coordinate of the second end of the spacelane |
| color | MapColor | Required | Color of the spacelane |
| focusLevel | FocusLevel | Required | Zoom level at which the spacelane comes into focus |

$3

| Prop | Type | Default | Description |
| ----------------------- | --------------------------- | ----------- | ----------------------------------------------------- |
| planetLabelVisibility | "dynamic"\|"show"\|"hide" | dynamic | Whether to hide planet text labels at all zoom levels |
| planetVisibility | "dynamic"\|"show"\|"hide" | dynamic | Whether to show all planets at all zoom levels |
| spacelaneVisibility | "dynamic"\|"show"\|"hide" | dynamic | Whether to show all spacelanes at all zoom levels |
| customOptions | ReactNode | undefined` | Additional options to show in the options window |