Globe.GL

[![NPM package][npm-img]][npm-url] [![Build Size][build-size-img]][build-size-url] [![NPM Downloads][npm-downloads-img]][npm-downloads-url]

<p align="center"> <a href="//vasturiano.github.io/globe.gl/example/world-population/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/world-population/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/airline-routes/us-international-outbound.html"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/airline-routes/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/countries-population/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/countries-population/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/submarine-cables/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/submarine-cables/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/hexed-polygons/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/hexed-polygons/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/population-heatmap/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/population-heatmap/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/world-cities/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/world-cities/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/day-night-cycle/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/day-night-cycle/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/heatmap/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/heatmap/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/clouds/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/clouds/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/satellites/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/satellites/preview.png"></a> <a href="//vasturiano.github.io/globe.gl/example/moon-landing-sites/"><img width="48%" src="https://vasturiano.github.io/globe.gl/example/moon-landing-sites/preview.png"></a> </p>

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrapper around the three-globe plugin, and uses ThreeJS/WebGL for 3D rendering.

See also the AR version.

And check out the React bindings.

Examples

• Basic (source)
• Arc Links (source)
• Highlight links (source)
• Choropleth (source)
• Elevated Polygons (source)
• Hollow Globe (source)
• Day/Night Cycle (source)
• Path Lines (source)
• Heatmap (source)
• Map Labels (source)
• HTML Markers (source)
• Hexed Country Polygons (source)
• Tiles (source)
• Ripple Rings (source)
• Emit Arcs on Click (source)
• Clouds (source)
• Solar Terminator (source)
• Tiled Map Engine (source)
• Custom Globe Styling (source)
• Custom Layer (source)
• World Population (source)
• Population Heatmap (source)
• Recent Earthquakes (source)
• World Volcanoes (source)
• Volcanoes Heatmap (source)
• US outbound international airline routes (source)
• Earth Shield (source)
• Satellites (source)
• Submarine Cables (source)
• Moon Landing Sites (source)

❤️ Support This Project

If you find this module useful and would like to support its development, you can buy me a ☕. Your contributions help keep open-source sustainable!

Quick start

import Globe from 'globe.gl';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>

then

const myGlobe = new Globe(myDOMElement)
  .globeImageUrl(myImageUrl)
  .pointsData(myData);

API reference

• Initialisation
• Container Layout
• Globe Layer
• Points Layer
• Arcs Layer
• Polygons Layer
• Paths Layer
• Heatmaps Layer
• Hex Bin Layer
• Hexed Polygons Layer
• Tiles Layer
• Particles Layer
• Rings Layer
• Labels Layer
• HTML Elements Layer
• 3D Objects Layer
• Custom Layer
• Render Control
• Utility

Initialisation

new Globe(<domElement>, { configOptions })

| Config options | Description | Default | | --- | --- | :--: | | <b>rendererConfig</b>: <i>object</i> | Configuration parameters to pass to the [ThreeJS WebGLRenderer](https://threejs.org/docs