Remix

Use the React entry point in a route or component. Canvas construction occurs after the component mounts in the browser.

import { useMemo } from "react";
import { Globe } from "canvas-globe/react";

export default function CustomerMap() {
  const markers = useMemo(() => [
    { lat: 23.03, lon: 72.58, label: "Ahmedabad", count: 12 },
    { lat: 51.5, lon: -0.12, label: "London", count: 8 },
  ], []);

  return (
    <Globe
      licenseKey="your_license_key"
      markers={markers}
      preset="hologram"
      tooltip
      style={{ width: "100%", maxWidth: 560, aspectRatio: 1 }}
    />
  );
}

Keep marker and arc arrays stable when possible. The component cleans up its CanvasGlobe instance automatically when the route unmounts.