3d-maps

3D Maps for JavaScript

Important: a commercial license is required for production use

CanvasGlobe is proprietary commercial software. Public production use without a valid license key is restricted and displays a licensing notice. Purchase a license and review the license agreement. For help with purchasing or licensing, email globe@swiftools.com.

3d-maps is an official package entry for CanvasGlobe, an interactive JavaScript 3D maps, globe, and world-map library rendered with Canvas 2D. It provides the same API, renderer, features, documentation, commercial license, and production behavior as canvas-globe without duplicating the implementation.

Use it for animated globe maps, flat map projections, location markers, routes, country data, live dashboards, landing pages, logistics visualizations, travel products, and geographic storytelling.

Why use 3D Maps for JavaScript?

• Interactive 3D globe and flat world-map projections
• Canvas 2D rendering with no WebGL requirement
• Zero runtime dependencies in the core renderer
• Markers, labels, routes, arcs, clusters, tooltips, and choropleths
• 54 optional visual, transition, camera, data, and interaction effects
• Nine animated geographic chart layers and six composed recipes
• Built-in themes including atlas, midnight, hologram, neon, and aurora
• Pointer, touch, keyboard, zoom, rotation, and reduced-motion behavior
• PNG image export and animation-friendly rendering
• JavaScript, React, Vue, Angular, Svelte, and Web Component support
• No map tiles or runtime network requests required for the bundled world map

Install

npm install 3d-maps

The package installs canvas-globe as its rendering engine. You only need one CanvasGlobe license for the same permitted product, regardless of which official package name you install.

Quick start

<canvas id="map" style="width: 100%; max-width: 720px; aspect-ratio: 1"></canvas>

import { createGlobe } from "3d-maps";

const map = createGlobe(document.querySelector("#map"), {
  licenseKey: "your-license-key",
  preset: "hologram",
  mode: "globe",
  autoRotate: true,
  markers: [
    { lat: 19.076, lon: 72.878, label: "Mumbai" },
    { lat: 51.507, lon: -0.128, label: "London" },
    { lat: 40.713, lon: -74.006, label: "New York" },
  ],
  arcs: [
    { from: { lat: 19.076, lon: 72.878 }, to: { lat: 51.507, lon: -0.128 } },
    { from: { lat: 51.507, lon: -0.128 }, to: { lat: 40.713, lon: -74.006 } },
  ],
});

Globe and flat-map projections

Switch between an interactive globe and flat projections using the same data:

map.setMode("globe");

map.setOptions({
  mode: "map",
  projection: "naturalEarth",
});

Available map projections include equirectangular, Mercator, and Natural Earth.

Effects and chart layers

Optional entry points keep advanced features separate from the core import:

import { aurora, routeDashes } from "3d-maps/fx";
import { tilegram } from "3d-maps/charts";
import { applyRecipe, keynoteGlobe } from "3d-maps/recipes";

map.use(aurora());
map.use(routeDashes({
  routes: [
    { from: { lat: 19.076, lon: 72.878 }, to: { lat: 51.507, lon: -0.128 } },
  ],
}));
map.use(tilegram({ values: { IN: 214, GB: 164, US: 196 } }));
const removeRecipe = applyRecipe(map, keynoteGlobe());

Explore and configure the effects visually in the Effect Studio.

React

import { Globe } from "3d-maps/react";

export default function WorldMap() {
  return (
    <Globe
      licenseKey="your-license-key"
      preset="midnight"
      autoRotate
      markers={[{ lat: 28.614, lon: 77.209, label: "New Delhi" }]}
    />
  );
}

Dedicated framework packages are also available:

Package entry points

Learn and experiment

• Interactive playground
• Effects and interactions
• Examples and templates
• Documentation
• API reference
• Pricing
• License agreement
• GitHub repository
• Report an issue

Support and licensing: globe@swiftools.com