← LeaderboardThe Skill Leaderboard

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.

Published by MengTo ↗MengTo/Skills

Try your first task

globe-gl

Start a fresh conversation. Replace the highlighted placeholders.

Use globe-gl to implement a minimal 3D globe in [plain HTML or React] using [required data layers], including layer fields, container sizing, and performance considerations.

Required inputs

  • [plain HTML or React]
  • [required data layers]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: globe-gldescription: 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.

Globe.GL Skill

Workflow

  1. Confirm environment (plain HTML, framework, React bindings) and the data layers needed.
  2. Provide a minimal quick-start snippet plus the layer-specific fields.
  3. Add interactions or extra layers only if requested.
  4. 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?