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?
