SKILL

Globe Gl

Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.

● INSTALL

This skill ships inside the skills package. Install the package to get this skill plus everything else in the bundle.

sv install mengto/skills

● SKILL.MD

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)

html

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

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

Quick start (script tag)

html

<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?