Globe.GL Skill

Workflow

• Confirm environment (plain HTML, framework, React bindings) and the data layers needed.

• Provide a minimal quick-start snippet plus the layer-specific fields.

• Add interactions or extra layers only if requested.

• Call out container sizing and performance considerations.

Quick start (ESM)

<script type="module"> import Globe from 'globe.gl';

const myGlobe = new Globe(document.getElementById('globe')) .globeImageUrl(myImageUrl) .pointsData(myData); </script>

Quick start (script tag)

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script> <script> const myGlobe = new Globe(document.getElementById('globe')) .globeImageUrl(myImageUrl) .pointsData(myData); </script>

Common layers to mention

• Points

• Arcs

• Polygons

• Paths

• Heatmaps and hex bins

• Labels or HTML elements

• 3D objects and custom layers

Practical tips

• Size the container with CSS; the globe fills its parent element.

• Reduce point count or size for performance on mobile.

• Use a darker globe texture for neon-style data overlays.

Questions to ask when specs are missing

• Which layers do you need (points, arcs, polygons, labels)?

• What should the globe size be on desktop vs mobile?

• Do you want drag/rotate interactions or a static globe?

• Is this plain HTML, React (react-globe.gl ), or another framework?