Class SkyMap

SkyMap renders an interactive sky map on a canvas element.

It calculates positions of stars, planets, the Moon, the Sun, and constellation features using astronomical formulas and renders them based on a configurable visual style.

Param: container

The target div element where the canvas will be appended.

Param: observerParams

Observer parameters for location and time.

latitude: The new latitude in degrees.
longitude: The new longitude in degrees.
date: The new date/time for astronomical calculations.
fov: The new field of view in degrees.

Param: config

Configuration to customize colors, sizes, language, etc. Uses defaults for missing fields.

Index

Constructors

constructor

new SkyMap(
    container: HTMLDivElement,
    observerParams?: Partial<ObserverParams>,
    config?: {
        bgColor?: string;
        constellations?: {
            boundaries?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                width?: number;
            };
            lines?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                labels?: {
                    color?: string;
                    data?: string;
                    enabled?: boolean;
                    fontSize?: number;
                };
                width?: number;
            };
        };
        fontFamily?: string;
        glow?: boolean;
        grid?: { color?: string; enabled?: boolean; width?: number };
        language?: string;
        moon?: {
            color?: string;
            enabled?: boolean;
            label?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                fontSize?: number;
            };
            scale?: number;
        };
        planets?: {
            color?: string;
            enabled?: boolean;
            labels?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                fontSize?: number;
            };
            scale?: number;
        };
        stars?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            scale?: number;
        };
        sun?: {
            color?: string;
            enabled?: boolean;
            label?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                fontSize?: number;
            };
            scale?: number;
        };
    },
): SkyMap
Parameters
- container: HTMLDivElement
- observerParams: Partial<ObserverParams> = defaultObserverParams
- config: {
      bgColor?: string;
      constellations?: {
          boundaries?: {
              color?: string;
              data?: string;
              enabled?: boolean;
              width?: number;
          };
          lines?: {
              color?: string;
              data?: string;
              enabled?: boolean;
              labels?: {
                  color?: string;
                  data?: string;
                  enabled?: boolean;
                  fontSize?: number;
              };
              width?: number;
          };
      };
      fontFamily?: string;
      glow?: boolean;
      grid?: { color?: string; enabled?: boolean; width?: number };
      language?: string;
      moon?: {
          color?: string;
          enabled?: boolean;
          label?: {
              color?: string;
              data?: string;
              enabled?: boolean;
              fontSize?: number;
          };
          scale?: number;
      };
      planets?: {
          color?: string;
          enabled?: boolean;
          labels?: {
              color?: string;
              data?: string;
              enabled?: boolean;
              fontSize?: number;
          };
          scale?: number;
      };
      stars?: {
          color?: string;
          data?: string;
          enabled?: boolean;
          scale?: number;
      };
      sun?: {
          color?: string;
          enabled?: boolean;
          label?: {
              color?: string;
              data?: string;
              enabled?: boolean;
              fontSize?: number;
          };
          scale?: number;
      };
  } = ...
  - OptionalbgColor?: string
    The background color of the skymap.
    
    Default
    "#000000"
  - Optionalconstellations?: {
        boundaries?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            width?: number;
        };
        lines?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            labels?: {
                color?: string;
                data?: string;
                enabled?: boolean;
                fontSize?: number;
            };
            width?: number;
        };
    }
    Optionalboundaries?: { color?: string; data?: string; enabled?: boolean; width?: number }
    Optionalcolor?: string
    The color of the boundaries.
    
    Default
    "#aaa"
    
    Optionaldata?: string
    URI to the JSON file containing constellations boundaries data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/constellations.boundaries.json"
    
    Optionalenabled?: boolean
    Whether constellation boundaries are displayed.
    
    Default
    false
    
    Optionalwidth?: number
    The width of the boundaries.
    
    Default
    1
    
    Optionallines?: {
        color?: string;
        data?: string;
        enabled?: boolean;
        labels?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            fontSize?: number;
        };
        width?: number;
    }
    Optionalcolor?: string
    The color of the constellation lines.
    
    Default
    "#eaeaea"
    
    Optionaldata?: string
    URI to the JSON file containing constellations lines data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/constellations.lines.json"
    
    Optionalenabled?: boolean
    Whether constellation lines are displayed.
    
    Default
    true
    
    Optionallabels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }
    Optionalcolor?: string
    The color of the labels.
    
    Default
    "#fefefe"
    
    Optionaldata?: string
    URI to the JSON file containing constellations labels data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/constellations.labels.json"
    
    Optionalenabled?: boolean
    Whether labels are displayed on the constellation lines.
    
    Default
    true
    
    OptionalfontSize?: number
    The font size of the labels.
    
    Default
    10
    
    Optionalwidth?: number
    The width of the constellation lines.
    
    Default
    2
  - OptionalfontFamily?: string
    The font family used in the skymap. This should be a valid font name that is installed on the page and available in the CSS. For example, "Arial", "Helvetica", or any custom font loaded via @font-face. Ensure the specified font is accessible in the browser to avoid fallback to a default font.
    
    Default
    "Arial"
  - Optionalglow?: boolean
    Toggle glow effect for stars and constellations. Can cause performance issues.
    
    Default
    false
  - Optionalgrid?: { color?: string; enabled?: boolean; width?: number }
    Optionalcolor?: string
    The color of the grid lines.
    
    Default
    "#555"
    
    Optionalenabled?: boolean
    Whether the grid is enabled.
    
    Default
    true
    
    Optionalwidth?: number
    The width of the grid lines.
    
    Default
    1
  - Optionallanguage?: string
    The language used for labels. Available languages by default:
    
    "en": English
    
    "la": Latin
    
    "ar": Arabic
    
    "zh": Chinese
    
    "fr": French
    
    "de": German
    
    "el": Greek
    
    "he": Hebrew
    
    "hi": Hindi
    
    "it": Italian
    
    "ja": Japanese
    
    "ru": Russian
    
    "es": Spanish
    
    "ko": Korean
    
    "fa": Persian
    
    "sym": Symbol (☾)
    
    Default
    "en"
  - Optionalmoon?: {
        color?: string;
        enabled?: boolean;
        label?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            fontSize?: number;
        };
        scale?: number;
    }
    Optionalcolor?: string
    The color of the moon.
    
    Default
    "#eaeaea"
    
    Optionalenabled?: boolean
    Whether the moon is displayed.
    
    Default
    true
    
    Optionallabel?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }
    Moon label configuration.
    
    Optionalcolor?: string
    The color of the moon label.
    
    Default
    "#fefefe"
    
    Optionaldata?: string
    URI to the JSON file containing moon labels data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/moon.labels.json"
    
    Optionalenabled?: boolean
    Whether the moon label is displayed.
    
    Default
    true
    
    OptionalfontSize?: number
    The font size in px of the moon label.
    
    Default
    10
    
    Optionalscale?: number
    A multiplier to scale default moon size.
    
    Default
    1
  - Optionalplanets?: {
        color?: string;
        enabled?: boolean;
        labels?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            fontSize?: number;
        };
        scale?: number;
    }
    Optionalcolor?: string
    The color of the planets. If undefined, a planet's color will be used.
    
    Default
    undefined
    
    Optionalenabled?: boolean
    Whether planets are displayed.
    
    Default
    true
    
    Optionallabels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }
    Labels for planets.
    
    Optionalcolor?: string
    The color of the labels.
    
    Default
    "#fefefe"
    
    Optionaldata?: string
    URI to the JSON file containing planets labels data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/planets.labels.json"
    
    Optionalenabled?: boolean
    Whether planet labels are displayed.
    
    Default
    true
    
    OptionalfontSize?: number
    The font size in px of the planet's labels.
    
    Default
    12
    
    Optionalscale?: number
    A multiplier to scale default planet's size.
    
    Default
    1
  - Optionalstars?: { color?: string; data?: string; enabled?: boolean; scale?: number }
    Optionalcolor?: string
    The color of the stars. If undefined, a default will be used.
    
    Default
    undefined
    
    Optionaldata?: string
    URI to the JSON file containing star data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/stars.6.json"
    
    Optionalenabled?: boolean
    Whether stars are displayed.
    
    Default
    true
    
    Optionalscale?: number
    A multiplier to scale default star's size.
    
    Default
    1
  - Optionalsun?: {
        color?: string;
        enabled?: boolean;
        label?: {
            color?: string;
            data?: string;
            enabled?: boolean;
            fontSize?: number;
        };
        scale?: number;
    }
    Optionalcolor?: string
    The color of the sun.
    
    Default
    "#ffe484"
    
    Optionalenabled?: boolean
    Whether the sun is displayed.
    
    Default
    true
    
    Optionallabel?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }
    Sun label configuration.
    
    Optionalcolor?: string
    The color of the sun label.
    
    Default
    "#fefefe"
    
    Optionaldata?: string
    URI to the JSON file containing sun labels data.
    
    Default
    "https://raw.githubusercontent.com/skewb1k/skymap/refs/heads/main/data/sun.labels.json"
    
    Optionalenabled?: boolean
    Whether the sun label is displayed.
    
    Default
    true
    
    OptionalfontSize?: number
    The font size in px of the sun label.
    
    Default
    16
    
    Optionalscale?: number
    A multiplier to scale default sun size.
    
    Default
    1
Returns SkyMap
- Defined in src/SkyMap/SkyMap.ts:105

Properties

cfg

cfg: Config

Reactive configuration object for styling and display options.

Methods

clone

clone(container: HTMLDivElement): SkyMap
Clones this SkyMap instance, creating a new instance with the same configuration for another container.
Parameters
- container: HTMLDivElement
  The target div element where the skymap will be appended.
Returns SkyMap
The SkyMap instance.
- Defined in src/SkyMap/SkyMap.ts:198

disconnect

disconnect(): void
Disconnects SkyMap from container.

Returns void
- Defined in src/SkyMap/SkyMap.ts:187

render

render(): void
Renders the whole map.

Returns void
- Defined in src/SkyMap/SkyMap.ts:426

resize

resize(size: number): this
Resizes the canvas while maintaining proper device pixel ratio (DPR) scaling.
Parameters
- size: number
  The size in pixels for both width and height to create a square canvas.
Returns this
The SkyMap instance.
- Defined in src/SkyMap/SkyMap.ts:213

setDate

setDate(date: Date): this
Updates the sky map's date/time.
Parameters
- date: Date
  The new date/time for astronomical calculations.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:287

setDateWithAnimation

setDateWithAnimation(date: Date, duration: number): this
Animates the change of date/time over a specified duration.
Parameters
- date: Date
  The new date/time for astronomical calculations.
- duration: number
  Duration of the animation in milliseconds.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:405

setFov

setFov(fov: number): this
Updates the field of view (FOV).
Parameters
- fov: number
  The new field of view in degrees.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:300

setLatitude

setLatitude(latitude: number): this
Updates the observer's latitude.
Parameters
- latitude: number
  The new latitude in degrees.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:251

setLocation

setLocation(latitude: number, longitude: number): this
Updates both the observer's latitude and longitude.
Parameters
- latitude: number
  The new latitude in degrees.
- longitude: number
  The new longitude in degrees.
Returns this
The SkyMap instance.
- Defined in src/SkyMap/SkyMap.ts:232

setLocationWithAnimation

setLocationWithAnimation(
    latitude: number,
    longitude: number,
    duration: number,
): this
Animates the change of location (latitude and longitude) over a specified duration.
Parameters
- latitude: number
  The new latitude in degrees.
- longitude: number
  The new longitude in degrees.
- duration: number
  Duration of the animation in milliseconds.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:373

setLongitude

setLongitude(longitude: number): this
Updates the observer's longitude.
Parameters
- longitude: number
  The new longitude in degrees.
Returns this
The SkyMap instance for chaining.
- Defined in src/SkyMap/SkyMap.ts:269

setObserverParams

setObserverParams(observerParams: ObserverParams): Promise<void>
Replaces the current observer parameters with the given ones.
Parameters
- observerParams: ObserverParams
  An object containing the new observer parameters:
  
  latitude: The new latitude in degrees.
  
  longitude: The new longitude in degrees.
  
  date: The new date/time for astronomical calculations.
  
  fov: The new field of view in degrees.
Returns Promise<void>
- Defined in src/SkyMap/SkyMap.ts:319

Class SkyMap

Param: container

Param: observerParams

Param: config

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

OptionalbgColor?: string

Default

Optionalconstellations?: { boundaries?: { color?: string; data?: string; enabled?: boolean; width?: number; }; lines?: { color?: string; data?: string; enabled?: boolean; labels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number; }; width?: number; };}

Optionalboundaries?: { color?: string; data?: string; enabled?: boolean; width?: number }

Optionalcolor?: string

Default

Optionaldata?: string

Default

Optionalenabled?: boolean

Default

Optionalwidth?: number

Default

Optionallines?: { color?: string; data?: string; enabled?: boolean; labels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number; }; width?: number;}

Optionalcolor?: string

Default

Optionaldata?: string

Default

Optionalenabled?: boolean

Default

Optionallabels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

Optionalcolor?: string

Default

Optionaldata?: string

Default

Optionalenabled?: boolean

Default

OptionalfontSize?: number

Default

Optionalwidth?: number

Default

OptionalfontFamily?: string

Default

Optionalglow?: boolean

Default

Optionalgrid?: { color?: string; enabled?: boolean; width?: number }

Optionalcolor?: string

Default

Optionalenabled?: boolean

Default

Optionalwidth?: number

Default

Optionallanguage?: string

Default

Optionalmoon?: { color?: string; enabled?: boolean; label?: { color?: string; data?: string; enabled?: boolean; fontSize?: number; }; scale?: number;}

Optionalcolor?: string

Default

Optionalenabled?: boolean

Default

Optionallabel?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

Optionalcolor?: string

Default

Optionaldata?: string

Default

Optionalenabled?: boolean

Default

OptionalfontSize?: number

Default

Optionalscale?: number

Default

Optionalplanets?: { color?: string; enabled?: boolean; labels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number; }; scale?: number;}

Optionalcolor?: string

Default

Optionalenabled?: boolean

Default

Optionallabels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

Optionalcolor?: string

Default

Optionaldata?: string

Default

`Optional`bgColor?: string

`Optional`constellations?: {
boundaries?: {
color?: string;
data?: string;
enabled?: boolean;
width?: number;
};
lines?: {
color?: string;
data?: string;
enabled?: boolean;
labels?: {
color?: string;
data?: string;
enabled?: boolean;
fontSize?: number;
};
width?: number;
};
}

`Optional`boundaries?: { color?: string; data?: string; enabled?: boolean; width?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`width?: number

`Optional`lines?: {
color?: string;
data?: string;
enabled?: boolean;
labels?: {
color?: string;
data?: string;
enabled?: boolean;
fontSize?: number;
};
width?: number;
}

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`labels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`fontSize?: number

`Optional`width?: number

`Optional`fontFamily?: string

`Optional`glow?: boolean

`Optional`grid?: { color?: string; enabled?: boolean; width?: number }

`Optional`color?: string

`Optional`enabled?: boolean

`Optional`width?: number

`Optional`language?: string

`Optional`moon?: {
color?: string;
enabled?: boolean;
label?: {
color?: string;
data?: string;
enabled?: boolean;
fontSize?: number;
};
scale?: number;
}

`Optional`color?: string

`Optional`enabled?: boolean

`Optional`label?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`fontSize?: number

`Optional`scale?: number

`Optional`planets?: {
color?: string;
enabled?: boolean;
labels?: {
color?: string;
data?: string;
enabled?: boolean;
fontSize?: number;
};
scale?: number;
}

`Optional`color?: string

`Optional`enabled?: boolean

`Optional`labels?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`fontSize?: number

`Optional`scale?: number

`Optional`stars?: { color?: string; data?: string; enabled?: boolean; scale?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`scale?: number

`Optional`sun?: {
color?: string;
enabled?: boolean;
label?: {
color?: string;
data?: string;
enabled?: boolean;
fontSize?: number;
};
scale?: number;
}

`Optional`color?: string

`Optional`enabled?: boolean

`Optional`label?: { color?: string; data?: string; enabled?: boolean; fontSize?: number }

`Optional`color?: string

`Optional`data?: string

`Optional`enabled?: boolean

`Optional`fontSize?: number

`Optional`scale?: number