51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T3ead,"use client"; import * as React from "react"; import dynamic from "next/dynamic"; import type { GlobeMethods, GlobeProps } from "react-globe.gl"; import { Check, Copy } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; const Globe = dynamic(() => import("react-globe.gl"), { ssr: false, loading: () => (

), }) as React.ComponentType< GlobeProps & { ref?: React.MutableRefObject } >; export type GlobeLocation = { id: string; name: string; lat: number; lng: number; address: string; email: string; }; const DEFAULT_LOCATIONS: GlobeLocation[] = [ { id: "1", name: "Milan", lat: 45.4642, lng: 9.19, address: "123 Via Milano, Milan 20121, IT", email: "hello@nexus-ui.com", }, { id: "2", name: "Cape Town", lat: -33.9249, lng: 18.4241, address: "456 Table Mountain Rd, Cape Town 8001, ZA", email: "hello@nexus-ui.com", }, { id: "3", name: "New York", lat: 40.7128, lng: -74.006, address: "789 Broadway, New York NY 10003, US", email: "hello@nexus-ui.com", }, { id: "4", name: "London", lat: 51.5074, lng: -0.1278, address: "2 Bedford Gardens, London W8 7EH, UK", email: "hello@nexus-ui.com", }, { id: "5", name: "Johannesburg", lat: -26.2041, lng: 28.0473, address: "321 Nelson Mandela Square, Johannesburg 2196, ZA", email: "hello@nexus-ui.com", }, { id: "6", name: "Tokyo", lat: 35.6762, lng: 139.6503, address: "1-1-1 Shibuya, Tokyo 150-0002, JP", email: "hello@nexus-ui.com", }, { id: "7", name: "Paris", lat: 48.8566, lng: 2.3522, address: "5 Avenue des Champs-Elysees, Paris 75008, FR", email: "hello@nexus-ui.com", }, { id: "8", name: "Sydney", lat: -33.8688, lng: 151.2093, address: "100 George Street, Sydney NSW 2000, AU", email: "hello@nexus-ui.com", }, { id: "9", name: "Dubai", lat: 25.2048, lng: 55.2708, address: "Sheikh Zayed Road, Dubai, AE", email: "hello@nexus-ui.com", }, { id: "10", name: "Singapore", lat: 1.3521, lng: 103.8198, address: "1 Marina Boulevard, Singapore 018989, SG", email: "hello@nexus-ui.com", }, { id: "11", name: "Mumbai", lat: 19.076, lng: 72.8777, address: "Nariman Point, Mumbai 400021, IN", email: "hello@nexus-ui.com", }, { id: "12", name: "Sao Paulo", lat: -23.5505, lng: -46.6333, address: "Avenida Paulista, Sao Paulo 01310-100, BR", email: "hello@nexus-ui.com", }, { id: "13", name: "Toronto", lat: 43.6532, lng: -79.3832, address: "100 Queen Street, Toronto ON M5H 2N2, CA", email: "hello@nexus-ui.com", }, { id: "14", name: "Berlin", lat: 52.52, lng: 13.405, address: "Unter den Linden 77, Berlin 10117, DE", email: "hello@nexus-ui.com", }, { id: "15", name: "Hong Kong", lat: 22.3193, lng: 114.1694, address: "1 Harbour Road, Hong Kong, HK", email: "hello@nexus-ui.com", }, { id: "16", name: "Los Angeles", lat: 34.0522, lng: -118.2437, address: "100 Wilshire Blvd, Los Angeles CA 90012, US", email: "hello@nexus-ui.com", }, { id: "17", name: "Barcelona", lat: 41.3851, lng: 2.1734, address: "Passeig de Gracia, Barcelona 08007, ES", email: "hello@nexus-ui.com", }, { id: "18", name: "Amsterdam", lat: 52.3676, lng: 4.9041, address: "Dam Square 1, Amsterdam 1012 JS, NL", email: "hello@nexus-ui.com", }, { id: "19", name: "Seoul", lat: 37.5665, lng: 126.978, address: "Gangnam-gu, Seoul 06236, KR", email: "hello@nexus-ui.com", }, { id: "20", name: "Istanbul", lat: 41.0082, lng: 28.9784, address: "Taksim Square, Istanbul 34437, TR", email: "hello@nexus-ui.com", }, ]; export type InteractiveGlobeExplorerProps = { locations?: GlobeLocation[]; initialLocationId?: string; globeTextureUrl?: string; className?: string; }; type TooltipPosition = { x: number; y: number; mobile: boolean; }; function useElementSize(ref: React.RefObject) { const [size, setSize] = React.useState(420); React.useEffect(() => { const el = ref.current; if (!el) return; const update = () => { const next = Math.min(el.clientWidth, el.clientHeight, 560); setSize(Math.max(280, next || 420)); }; const observer = new ResizeObserver(update); observer.observe(el); update(); return () => observer.disconnect(); }, [ref]); return size; } export function InteractiveGlobeExplorer({ locations = DEFAULT_LOCATIONS, initialLocationId, globeTextureUrl = "https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg", className, }: InteractiveGlobeExplorerProps) { const initialLocation = locations.find((location) => location.id === initialLocationId) ?? locations[3] ?? locations[0]; const globeRef = React.useRef(undefined); const containerRef = React.useRef(null); const scrollContainerRef = React.useRef(null); const locationRefs = React.useRef>( {}, ); const isScrollingProgrammatically = React.useRef(false); const globeSize = useElementSize(containerRef); const [selectedLocation, setSelectedLocation] = React.useState(null); const [activeLocationId, setActiveLocationId] = React.useState( initialLocation.id, ); const [tooltipPosition, setTooltipPosition] = React.useState( { x: 0, y: 0, mobile: false }, ); const [copiedField, setCopiedField] = React.useState(null); const focusGlobe = React.useCallback((location: GlobeLocation, ms = 800) => { globeRef.current?.pointOfView( { lat: location.lat, lng: location.lng, altitude: 2.5 }, ms, ); }, []); const handleGlobeReady = React.useCallback(() => { focusGlobe(initialLocation, 1000); const controls = globeRef.current?.controls(); if (controls) { controls.enableZoom = false; controls.autoRotate = true; controls.autoRotateSpeed = 0.4; } }, [focusGlobe, initialLocation]); const handleLocationClick = React.useCallback( (location: GlobeLocation, event: React.MouseEvent) => { setActiveLocationId(location.id); setSelectedLocation(location); setCopiedField(null); const rect = event.currentTarget.getBoundingClientRect(); const viewportWidth = window.innerWidth; const tooltipWidth = 320; const mobile = viewportWidth < 768; let x = rect.right + 16; if (x + tooltipWidth > viewportWidth - 20) { x = rect.left - tooltipWidth - 16; } setTooltipPosition({ x: Math.max(20, x), y: rect.top + rect.height / 2, mobile, }); focusGlobe(location, 1000); }, [focusGlobe], ); const handlePointClick = React.useCallback( (point: object) => { const location = locations.find( (item) => item.id === (point as GlobeLocation).id, ); if (!location) return; setActiveLocationId(location.id); setSelectedLocation(null); focusGlobe(location, 800); isScrollingProgrammatically.current = true; locationRefs.current[location.id]?.scrollIntoView({ behavior: "smooth", block: "center", }); window.setTimeout(() => { isScrollingProgrammatically.current = false; }, 1000); }, [focusGlobe, locations], ); const handleScroll = React.useCallback(() => { const container = scrollContainerRef.current; if (isScrollingProgrammatically.current || !container) return; const containerRect = container.getBoundingClientRect(); const containerCenter = container.clientHeight / 2; let closestLocation: GlobeLocation | null = null; let minDistance = Number.POSITIVE_INFINITY; for (const location of locations) { const element = locationRefs.current[location.id]; if (!element) continue; const rect = element.getBoundingClientRect(); const elementCenter = rect.top - containerRect.top + rect.height / 2; const distance = Math.abs(elementCenter - containerCenter); if (distance < minDistance) { minDistance = distance; closestLocation = location; } } if (closestLocation && closestLocation.id !== activeLocationId) { setActiveLocationId(closestLocation.id); setSelectedLocation(null); focusGlobe(closestLocation, 500); } }, [activeLocationId, focusGlobe, locations]); const copyToClipboard = React.useCallback((text: string, field: string) => { void navigator.clipboard.writeText(text).then(() => { setCopiedField(field); window.setTimeout(() => setCopiedField(null), 1800); }); }, []); return (

{locations.map((location) => { const isActive = activeLocationId === location.id; const isSelected = selectedLocation?.id === location.id; return ( ); })}

"#0ea5e9"} pointAltitude={0.01} pointRadius={0.5} pointLabel={() => ""} onGlobeReady={handleGlobeReady} onPointClick={handlePointClick} enablePointerInteraction animateIn />

{selectedLocation && ( <>

); } export default InteractiveGlobeExplorer; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","react-globe.gl",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-globe.gl","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-globe.gl"}]]}]}],["$","li","three",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"three"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react"}]]}]}],["$","li","next",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/next","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"next"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils","button"]}]]}],["$","$L52",null,{"sourceUrl":"https://nexus-ui.com/r/interactive-globe-explorer.json","proxyUrl":"https://shadcnregistry.com/r/nexus-labs/interactive-globe-explorer","itemId":"@nexus-labs/interactive-globe-explorer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"next-ui/interactive-globe-explorer/index.ts","content":"export {\n InteractiveGlobeExplorer,\n default,\n type GlobeLocation,\n type InteractiveGlobeExplorerProps,\n} from \"./interactive-globe-explorer\";\n","type":"registry:lib","target":"components/interactive-globe-explorer/index.ts"},{"path":"next-ui/interactive-globe-explorer/interactive-globe-explorer.tsx","content":"$54","type":"registry:component","target":"components/interactive-globe-explorer/interactive-globe-explorer.tsx"}]}]]}],"$L55"]}]

Interactive Globe Explorer

Installation

Files

components

Styles