Skymap NPM | npm.io

🌌 SkyMap – Interactive & Customizable Star Map for JavaScript

SkyMap is a lightweight, highly customizable JavaScript/TypeScript library for rendering a realistic sky map on an HTML <canvas>. It supports modern frontend frameworks like React, Vue, Svelte, and Next.js, while remaining easy to use in plain JavaScript.

🚀 Designed for simplicity, customization, and performance.

✨ Features

Realistic Star Rendering – Uses scientifically accurate colors and positions.
Customizable – Adjust colors, sizes, labels and more.
Framework-Agnostic – Compatible with Vanilla JS, React, Vue, Svelte, Next.js, and others.
Optimized for Performance – Smooth rendering with efficient WebGL & Canvas APIs.
Supports Real-Time Updates – Change time, location, and visibility dynamically.
Well-Documented – Clear API with examples for easy integration.

🚀 Installation

Install via npm, pnpm, yarn or bun:

npm install skymap

yarn add skymap

pnpm add skymap

bun add skymap

📌 Quick Start

🔹 Vanilla JavaScript (Plain HTML)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Sky Map</title>
</head>

<body>
  <div id="sky-container" style="width: 500px; height: 500px;"></div>
  <script type="module">
    import SkyMap from "skymap";
    const container = document.getElementById("sky-container");
    const skymap = SkyMap(
      container,
      {
        date: new Date("2023-01-01T12:00:00Z"),
      },
      {
        bgColor: "#0a0d13",
        constellations: {
          lines: {
            labels: {
              enabled: false,
            },
          },
        },
      }
    );
  </script>
</body>
</html>

<!--

⚙️ Configuration Options

You can customize the sky map with various options:

new SkyMap(container, {
  latitude: 52.52,           // Observer's latitude
  longitude: 13.405,         // Observer's longitude
  datetime: new Date(),      // Time for the sky projection
  showConstellations: true,  // Show constellation lines
  starBrightness: 1.0,       // Adjust star brightness
  projection: "stereographic" // Projection type: "stereographic", "mercator", etc.
});

🛠️ API Methods

sky.setDate(new Date("2025-06-15T22:00:00Z")); // Change date/time
sky.setLocation(34.05, -118.25); // Update observer’s location
sky.toggleConstellations(); // Show/hide constellation lines
sky.destroy(); // Clean up the instance

-->