Svelte globe component

Install the official Svelte package:

npm install canvas-globe-svelte canvas-globe

The component manages browser-only creation, reactive updates, events, and cleanup in Svelte and SvelteKit.

<script>
  import CanvasGlobe from "canvas-globe-svelte";

  const markers = [
    { lat: 23.03, lon: 72.58, count: 12, live: true },
    { lat: 51.5, lon: -0.12, count: 8 },
  ];
</script>

<CanvasGlobe
  licenseKey="your-license-key"
  {markers}
  options={{ preset: "hologram", tooltip: true }}
  on:markerClick={({ detail }) => console.log(detail.marker)}
/>

Every CanvasGlobe option can be passed through options. Bind the component when you need its instance, flyTo, fitTo, or snapshot methods.