vasturiano/globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL

Globe.GL

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)
• 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)
• 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)

Quick start

import Globe from 'globe.gl';

or using a script tag

<script src="//unpkg.com/globe.gl"></script>

then

const myGlobe = Globe();
myGlobe(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
• Rings Layer
• Labels Layer
• HTML Elements Layer
• 3D Objects Layer
• Custom Layer
• Render Control
• Utility

Initialisation

Globe({ configOptions })(<domElement>)

Config options	Description	Default
rendererConfig: object	Configuration parameters to pass to the ThreeJS WebGLRenderer constructor.	{ antialias: true, alpha: true }
waitForGlobeReady: boolean	Whether to wait until the globe wrapping or background image has been fully loaded before rendering the globe or any of the data layers.	true
animateIn: boolean	Whether to animate the globe initialization, by scaling and rotating the globe into its inital position.	true

Container Layout

Method	Description	Default
width([px])	Getter/setter for the canvas width.	<window width>
height([px])	Getter/setter for the canvas height.	<window height>
backgroundColor([str])	Getter/setter for the background color.	#000011
backgroundImageUrl([url])	Getter/setter for the URL of the image to be used as background to the globe. If no image is provided, the background color is shown instead.	null

Globe Layer

Method	Description	Default
globeImageUrl([url])	Getter/setter for the URL of the image used in the material that wraps the globe. If no image is provided, the globe is represented as a black sphere.	null
bumpImageUrl([url])	Getter/setter for the URL of the image used to create a bump map in the material, to represent the globe's terrain.	null
showGlobe([boolean])	Getter/setter for whether to show the globe surface itself.	true
showGraticules([boolean])	Getter/setter for whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees.	false
showAtmosphere([boolean])	Getter/setter for whether to show a bright halo surrounding the globe, representing the atmosphere.	true
atmosphereColor([str])	Getter/setter for the color of the atmosphere.	lightskyblue
atmosphereAltitude([str])	Getter/setter for the max altitude of the atmosphere, in terms of globe radius units.	0.15
globeMaterial([material])	Getter/setter of the ThreeJS material used to wrap the globe. Can be used for more advanced styling of the globe, like in this example.	MeshPhongMaterial
onGlobeReady(fn)	Callback function to invoke immediately after the globe has been initialized and visible on the scene.	-
onGlobeClick(fn)	Callback function for (left-button) clicks on the globe. The clicked globe coordinates and the event object are included as arguments: onGlobeClick({ lat, lng }, event).	-
onGlobeRightClick(fn)	Callback function for right-clicks on the globe. The clicked globe coordinates and the event object are included as arguments: onGlobeRightClick({ lat, lng }, event).	-

Points Layer

Method	Description	Default
pointsData([array])	Getter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicularly from the surface of the globe.	[]
pointLabel([str or fn])	Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
pointLat([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate.	lat
pointLng([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate.	lng
pointColor([str or fn])	Point object accessor function or attribute for the cylinder color.	() => '#ffffaa'
pointAltitude([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's altitude in terms of globe radius units (0 = 0 altitude (flat circle), 1 = globe radius).	0.1
pointRadius([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees.	0.25
pointResolution([num])	Getter/setter for the radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders.	12
pointsMerge([boolean])	Getter/setter for whether to merge all the point meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects.	false
pointsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate point changes involving geometry modifications. A value of 0 will move the objects immediately to their final position. New objects are animated by scaling them from the ground up. Only works if pointsMerge is disabled.	1000
onPointClick(fn)	Callback function for point (left-button) clicks. The point object, the event object and the clicked coordinates are included as arguments: onPointClick(point, event, { lat, lng, altitude }). Only works if pointsMerge is disabled.	-
onPointRightClick(fn)	Callback function for point right-clicks. The point object, the event object and the clicked coordinates are included as arguments: onPointRightClick(point, event, { lat, lng, altitude }). Only works if pointsMerge is disabled.	-
onPointHover(fn)	Callback function for point mouse over events. The point object (or null if there's no point under the mouse line of sight) is included as the first argument, and the previous point object (or null) as second argument: onPointHover(point, prevPoint). Only works if pointsMerge is disabled.	-

Arcs Layer

Method	Description	Default
arcsData([array])	Getter/setter for the list of links to represent in the arcs map layer. Each link is displayed as an arc line that rises from the surface of the globe, connecting the start and end coordinates.	[]
arcLabel([str or fn])	Arc object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
arcStartLat([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the line's start latitude coordinate.	startLat
arcStartLng([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the line's start longitude coordinate.	startLng
arcEndLat([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the line's end latitude coordinate.	endLat
arcEndLng([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the line's end longitude coordinate.	endLng
arcColor([str, [str, ...] or fn])	Arc object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors, or a color interpolator function.	() => '#ffffaa'
arcAltitude([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the arc's maximum altitude (ocurring at the half-way distance between the two points) in terms of globe radius units (0 = 0 altitude (ground line), 1 = globe radius). If a value of null or undefined is used, the altitude is automatically set proportionally to the distance between the two points, according to the scale set in arcAltitudeAutoScale.	null
arcAltitudeAutoScale([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the scale of the arc's automatic altitude, in terms of units of the great-arc distance between the two points. A value of 1 indicates the arc should be as high as its length on the ground. Only applicable if arcAltitude is not set.	0.5
arcStroke([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a TubeGeometry is used.	null
arcCurveResolution([num])	Getter/setter for the arc's curve resolution, expressed in how many straight line segments to divide the curve by. Higher values yield smoother curves.	64
arcCircularResolution([num])	Getter/setter for the radial geometric resolution of each line, expressed in how many slice segments to divide the tube's circumference. Only applicable when using Tube geometries (defined arcStroke).	6
arcDashLength([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the length of the dashed segments in the arc, in terms of relative length of the whole line (1 = full line length).	1
arcDashGap([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.	0
arcDashInitialGap([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.	0
arcDashAnimateTime([num, str or fn])	Arc object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.	0
arcsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate arc changes involving geometry modifications. A value of 0 will move the arcs immediately to their final position. New arcs are animated by rising them from the ground up.	1000
onArcClick(fn)	Callback function for arc (left-button) clicks. The arc object, the event object and the clicked coordinates are included as arguments: onArcClick(arc, event, { lat, lng, altitude }).	-
onArcRightClick(fn)	Callback function for arc right-clicks. The arc object, the event object and the clicked coordinates are included as arguments: onArcRightClick(arc, event, { lat, lng, altitude }).	-
onArcHover(fn)	Callback function for arc mouse over events. The arc object (or null if there's no arc under the mouse line of sight) is included as the first argument, and the previous arc object (or null) as second argument: onArcHover(arc, prevArc).	-

Polygons Layer

Method	Description	Default
polygonsData([array])	Getter/setter for the list of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe.	[]
polygonLabel([str or fn])	Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
polygonGeoJsonGeometry([str or fn])	Polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.	geometry
polygonCapColor([str or fn])	Polygon object accessor function or attribute for the color of the top surface.	() => '#ffffaa'
polygonCapMaterial([material, str or fn])	Polygon object accessor function, attribute or material object for the ThreeJS material to use in the top surface. This property takes precedence over polygonCapColor, which will be ignored if both are defined.	-
polygonSideColor([str or fn])	Polygon object accessor function or attribute for the color of the cone sides.	() => '#ffffaa'
polygonSideMaterial([material, str or fn])	Polygon object accessor function, attribute or material object for the ThreeJS material to use in the cone sides. This property takes precedence over polygonSideColor, which will be ignored if both are defined.	-
polygonStrokeColor([str or fn])	Polygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking.	-
polygonAltitude([num, str or fn])	Polygon object accessor function, attribute or a numeric constant for the polygon cone's altitude in terms of globe radius units (0 = 0 altitude (flat polygon), 1 = globe radius).	0.01
polygonCapCurvatureResolution([num, str or fn])	Polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the cap surface curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.	5
polygonsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate polygon altitude changes. A value of 0 will size the cone immediately to their final altitude. New polygons are animated by rising them from the ground up.	1000
onPolygonClick(fn)	Callback function for polygon (left-button) clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onPolygonClick(polygon, event, { lat, lng, altitude }).	-
onPolygonRightClick(fn)	Callback function for polygon right-clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onPolygonRightClick(polygon, event, { lat, lng, altitude }).	-
onPolygonHover(fn)	Callback function for polygon mouse over events. The polygon object (or null if there's no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or null) as second argument: onPolygonHover(polygon, prevPolygon).	-

Paths Layer

Method	Description	Default
pathsData([array])	Getter/setter for the list of lines to represent in the paths map layer. Each path is displayed as a line that connects all the coordinate pairs in the path array.	[]
pathLabel([str or fn])	Path object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
pathPoints([array, str or fn])	Path object accessor function, attribute or an array for the set of points that define the path line. By default, each path point is assumed to be a 2-position array ([<lat>, <lon>]). This default behavior can be modified using the pathPointLat and pathPointLng methods.	pnts => pnts
pathPointLat([num, str or fn])	Path point object accessor function, attribute or a numeric constant for the latitude coordinate.	arr => arr[0]
pathPointLng([num, str or fn])	Path point object accessor function, attribute or a numeric constant for the longitude coordinate.	arr => arr[1]
pathPointAlt([num, str or fn])	Path point object accessor function, attribute or a numeric constant for the point altitude, in terms of globe radius units (0 = 0 altitude (ground), 1 = globe radius).	0.001
pathResolution([num])	Getter/setter for the path's angular resolution, in lat/lng degrees. If the ground distance (excluding altitude) between two adjacent path points is larger than this value, the line segment will be interpolated in order to approximate the curvature of the sphere surface. Lower values yield more perfectly curved lines, at the cost of performance.	2
pathColor([str, [str, ...] or fn])	Path object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors, or a color interpolator function. Transparent colors are not supported in Fat Lines with set width.	() => '#ffffaa'
pathStroke([num, str or fn])	Path object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a FatLine is used.	null
pathDashLength([num, str or fn])	Path object accessor function, attribute or a numeric constant for the length of the dashed segments in the path line, in terms of relative length of the whole line (1 = full line length).	1
pathDashGap([num, str or fn])	Path object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.	0
pathDashInitialGap([num, str or fn])	Path object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.	0
pathDashAnimateTime([num, str or fn])	Path object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.	0
pathTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate path changes. A value of 0 will move the paths immediately to their final position. New paths are animated from start to end.	1000
onPathClick(fn)	Callback function for path (left-button) clicks. The path object, the event object and the clicked coordinates are included as arguments: onPathClick(path, event, { lat, lng, altitude }).	-
onPathRightClick(fn)	Callback function for path right-clicks. The path object, the event object and the clicked coordinates are included as arguments: onPathRightClick(path, event, { lat, lng, altitude }).	-
onPathHover(fn)	Callback function for path mouse over events. The path object (or null if there's no path under the mouse line of sight) is included as the first argument, and the previous path object (or null) as second argument: onPathHover(path, prevPath).	-

Heatmaps Layer

Method	Description	Default
heatmapsData([array])	Getter/setter for the list of heatmap datasets to represent in the heatmaps map layer. Each set of points is represented as an individual global heatmap with varying color and/or altitude, according to the point density. It uses a Gaussian KDE to perform the density estimation, based on the great-arc distance between points.	[]
heatmapPoints([array, str or fn])	Heatmap object accessor function, attribute or an array for the set of points that define the heatmap. By default, each point is assumed to be a 2-position array ([<lat>, <lon>]). This default behavior can be modified using the heatmapPointLat and heatmapPointLng methods.	pnts => pnts
heatmapPointLat([num, str or fn])	Heatmap point object accessor function, attribute or a numeric constant for the latitude coordinate.	arr => arr[0]
heatmapPointLng([num, str or fn])	Heatmap point object accessor function, attribute or a numeric constant for the longitude coordinate.	arr => arr[1]
heatmapPointWeight([num, str or fn])	Heatmap point object accessor function, attribute or a numeric constant for the weight of the point. The weight of a point determines its influence on the density of the surrounding area.	1
heatmapBandwidth([num, str or fn])	Heatmap object accessor function, attribute or a numeric constant for the heatmap bandwidth, in angular degrees. The bandwidth is an internal parameter of the Gaussian kernel function and defines how localized is the influence of a point on distant locations. A narrow bandwidth leads to a more spiky representation, while a broad one has smoother curves.	4
heatmapColorFn([str or fn])	Heatmap object accessor function or attribute for the color interpolator function to represent density in the heatmap. This function should receive a number between 0 and 1 (or potentially higher if saturation > 1), and return a color string.	Turbo colormap interpolator with fading opacity
heatmapColorSaturation([num, str or fn])	Heatmap object accessor function, attribute or a numeric constant for the color scale saturation. The saturation is a multiplier of the normalized density value ([0,1]) before passing it to the color interpolation function. It can be used to dampen outlier peaks in density and bring the data floor into view.	1.5
heatmapBaseAltitude([num, str or fn])	Heatmap object accessor function, attribute or a numeric constant for the heatmap base floor altitude in terms of globe radius units (0 = 0 altitude, 1 = globe radius).	0.01
heatmapTopAltitude([num, str or fn])	Heatmap object accessor function, attribute or a numeric constant for the heatmap top peak altitude in terms of globe radius units (0 = 0 altitude, 1 = globe radius). An equal value to the base altitude will yield a surface flat heatmap. If a top altitude is set, the variations in density will be used to define the altitude curves between base and top.	-
heatmapsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate heatmap changes. A value of 0 will set the heatmap colors/altitudes immediately in their final position. New heatmaps are animated by rising them from the ground up and gently fading in through the color scale.	0
onHeatmapClick(fn)	Callback function for heatmap (left-button) clicks. The heatmap object, the event object and the clicked coordinates are included as arguments: onHeatmapClick(heatmap, event, { lat, lng, altitude }).	-
onHeatmapRightClick(fn)	Callback function for heatmap right-clicks. The heatmap object, the event object and the clicked coordinates are included as arguments: onHeatmapRightClick(heatmap, event, { lat, lng, altitude }).	-
onHeatmapHover(fn)	Callback function for heatmap mouse over events. The heatmap object (or null if there's no heatmap under the mouse line of sight) is included as the first argument, and the previous heatmap object (or null) as second argument: onHeatmapHover(heatmap, prevHeatmap).	-

Hex Bin Layer

Method	Description	Default
hexBinPointsData([array])	Getter/setter for the list of points to aggregate using the hex bin map layer. Each point is added to an hexagonal prism 3D object that represents all the points within a tesselated portion of the space.	[]
hexLabel([str or fn])	Hex object accessor function or attribute for label (shown as tooltip). An hex object includes all points binned, and has the syntax: { points, sumWeight, center: { lat, lng } }. Supports plain text or HTML content.	-
hexBinPointLat([num, str or fn])	Point object accessor function, attribute or a numeric constant for the latitude coordinate.	lat
hexBinPointLng([num, str or fn])	Point object accessor function, attribute or a numeric constant for the longitude coordinate.	lng
hexBinPointWeight([num, str or fn])	Point object accessor function, attribute or a numeric constant for the weight of the point. Weights for points in the same bin are summed and determine the hexagon default altitude.	1
hexBinResolution([num])	The geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe's surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.	4
hexMargin([num or fn])	The radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons and serve only a visual purpose, as the data points within the margin still contribute to the hexagon's data. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below 0 or above 1 are disadvised. This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: hexMargin(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.	0.2
hexAltitude([num or fn])	The altitude of each hexagon, in terms of globe radius units (0 = 0 altitude (flat hexagon), 1 = globe radius). This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: hexAltitude(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.	({ sumWeight }) => sumWeight * 0.01
hexTopCurvatureResolution([num])	The resolution (in angular degrees) of the top surface curvature. The finer the resolution, the more the top area is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.	5
hexTopColor([fn])	Accessor method for each hexagon's top color. The method should follow the signature: hexTopColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.	() => '#ffffaa'
hexSideColor([fn])	Accessor method for each hexagon's side color. The method should follow the signature: hexSideColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.	() => '#ffffaa'
hexBinMerge([boolean])	Getter/setter for whether to merge all the hexagon meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects.	false
hexTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate hexagon changes related to geometry modifications (altitude, radius). A value of 0 will move the hexagons immediately to their final position. New hexagons are animated by scaling them from the ground up. Only works if hexBinMerge is disabled.	1000
onHexClick(fn)	Callback function for hexagon (left-button) clicks. The hex object including all points binned, the event object and the clicked coordinates are included as arguments: onHexClick({ points, sumWeight, center: { lat, lng } }, event, { lat, lng, altitude }). Only works if hexBinMerge is disabled.	-
onHexRightClick(fn)	Callback function for hexagon right-clicks. The hex object including all points binned, the event object and the clicked coordinates are included as arguments: onHexRightClick({ points, sumWeight, center: { lat, lng } }, event, { lat, lng, altitude }). Only works if hexBinMerge is disabled.	-
onHexHover(fn)	Callback function for hexagon mouse over events. The hex object (or null if there's no hex under the mouse line of sight) is included as the first argument, and the previous hex object (or null) as second argument: onHexHover(hex, prevHex). Each hex object includes all points binned, and has the syntax: { points, sumWeight, center: { lat, lng } }. Only works if hexBinMerge is disabled.	-

Hexed Polygons Layer

Method	Description	Default
hexPolygonsData([array])	Getter/setter for the list of polygon shapes to represent in the hexed polygons map layer. Each polygon is displayed as a tesselated group of hexagons that approximate the polygons shape according to the resolution specified in hexPolygonResolution.	[]
hexPolygonLabel([str or fn])	Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
hexPolygonGeoJsonGeometry([str or fn])	Hexed polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.	geometry
hexPolygonColor([str or fn])	Hexed polygon object accessor function or attribute for the color of each hexagon in the polygon.	() => '#ffffaa'
hexPolygonAltitude([num, str or fn])	Hexed polygon object accessor function, attribute or a numeric constant for the polygon's hexagons altitude in terms of globe radius units (0 = 0 altitude, 1 = globe radius).	0.001
hexPolygonResolution([num, str or fn])	Hexed polygon object accessor function, attribute or a numeric constant for the geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe's surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.	3
hexPolygonMargin([num, str or fn])	Hexed polygon object accessor function, attribute or a numeric constant for the radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons within a polygon. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below 0 or above 1 are disadvised.	0.2
hexPolygonUseDots([boolean, str or fn])	Hexed polygon object accessor function, attribute or a boolean constant for whether to represent each polygon point as a circular dot instead of an hexagon.	false
hexPolygonCurvatureResolution([num, str or fn])	Hexed polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of each hexed polygon surface curvature. The finer the resolution, the more the polygon hexes are fragmented into smaller faces to approximate the spheric surface, at the cost of performance.	5
hexPolygonDotResolution([num, str or fn])	Hexed polygon object accessor function, attribute or a numeric constant for the resolution of each circular dot, expressed in how many slice segments to divide the circumference. Higher values yield smoother circles, at the cost of performance. This is only applicable in dot representation mode.	12
hexPolygonsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate hexed polygons altitude and margin changes. A value of 0 will move the hexagons immediately to their final state. New hexed polygons are animated by sizing each hexagon from 0 radius.	0
onHexPolygonClick(fn)	Callback function for hexed polygon (left-button) clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onHexPolygonClick(polygon, event, { lat, lng, altitude }).	-
onHexPolygonRightClick(fn)	Callback function for hexed polygon right-clicks. The polygon object, the event object and the clicked coordinates are included as arguments: onHexPolygonRightClick(polygon, event, { lat, lng, altitude }).	-
onHexPolygonHover(fn)	Callback function for hexed polygon mouse over events. The polygon object (or null if there's no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or null) as second argument: onHexPolygonHover(polygon, prevPolygon).	-

Tiles Layer

Method	Description	Default
tilesData([array])	Getter/setter for the list of tiles to represent in the tiles map layer. Each tile is displayed as a spherical surface segment. The segments can be placed side-by-side for a tiled surface and each can be styled separately.	[]
tileLabel([str or fn])	Tile object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
tileLat([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the segment's centroid latitude coordinate.	lat
tileLng([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the segment's centroid longitude coordinate.	lng
tileAltitude([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the segment's altitude in terms of globe radius units.	0.01
tileWidth([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the segment's longitudinal width, in angular degrees.	1
tileHeight([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the segment's latitudinal height, in angular degrees.	1
tileUseGlobeProjection([boolean, str or fn])	Tile object accessor function, attribute or a boolean constant for whether to use the globe's projection to shape the segment to its relative tiled position (true), or break free from this projection and shape the segment as if it would be laying directly on the equatorial perimeter (false).	true
tileMaterial([material, str or fn])	Tile object accessor function, attribute or material object for the ThreeJS material used to style the segment's surface.	() => new MeshLambertMaterial({ color: '#ffbb88' })
tileCurvatureResolution([num, str or fn])	Tile object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the surface curvature. The finer the resolution, the more the tile geometry is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.	5
tilesTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate tile changes involving geometry modifications. A value of 0 will move the tiles immediately to their final position. New tiles are animated by scaling them from the centroid outwards.	1000
onTileClick(fn)	Callback function for tile (left-button) clicks. The tile object, the event object and the clicked coordinates are included as arguments: onTileClick(tile, event, { lat, lng, altitude }).	-
onTileRightClick(fn)	Callback function for tile right-clicks. The tile object, the event object and the clicked coordinates are included as arguments: onTileRightClick(tile, event, { lat, lng, altitude }).	-
onTileHover(fn)	Callback function for tile mouse over events. The tile object (or null if there's no tile under the mouse line of sight) is included as the first argument, and the previous tile object (or null) as second argument: onTileHover(tile, prevTile).	-

Rings Layer

Method	Description	Default
ringsData([array])	Getter/setter for the list of self-propagating ripple rings to represent in the rings map layer. Each data point is displayed as an animated set of concentric circles that propagate outwards from (or inwards to) a central point through the spherical surface.	[]
ringLat([num, str or fn])	Ring object accessor function, attribute or a numeric constant for each circle's center latitude coordinate.	lat
ringLng([num, str or fn])	Ring object accessor function, attribute or a numeric constant for each circle's center longitude coordinate.	lng
ringAltitude([num, str or fn])	Ring object accessor function, attribute or a numeric constant for the circle's altitude in terms of globe radius units.	0.0015
ringColor([str, [str, ...] or fn])	Ring object accessor function or attribute for the stroke color of each ring. Also supports radial color gradients by passing an array of colors, or a color interpolator function.	() => '#ffffaa'
ringResolution([num])	Getter/setter for the geometric resolution of each circle, expressed in how many slice segments to divide the circumference. Higher values yield smoother circles.	64
ringMaxRadius([num, str or fn])	Ring object accessor function, attribute or a numeric constant for the maximum outer radius of the circles, at which the rings stop propagating and are removed. Defined in angular degrees.	2
ringPropagationSpeed([num, str or fn])	Ring object accessor function, attribute or a numeric constant for the propagation velocity of the rings, defined in degrees/second. Setting a negative value will invert the direction and cause the rings to propagate inwards from the maxRadius.	1
ringRepeatPeriod([num, str or fn])	Ring object accessor function, attribute or a numeric constant for the interval of time (in ms) to wait between consecutive auto-generated concentric circles. A value less or equal than 0 will disable the repetition and emit a single ring.	700

Labels Layer

Method	Description	Default
labelsData([array])	Getter/setter for the list of label objects to represent in the labels map layer.	[]
labelLabel([str or fn])	Label object accessor function or attribute for its own tooltip label. Supports plain text or HTML content.	-
labelLat([num, str or fn])	Label object accessor function, attribute or a numeric constant for the latitude coordinate.	lat
labelLng([num, str or fn])	Label object accessor function, attribute or a numeric constant for the longitude coordinate.	lng
labelText([str or fn])	Label object accessor function or attribute for the label text.	text
labelColor([str or fn])	Label object accessor function or attribute for the label color.	() => 'lightgrey'
labelAltitude([num, str or fn])	Label object accessor function, attribute or a numeric constant for the label altitude in terms of globe radius units.	0
labelSize([num, str or fn])	Label object accessor function, attribute or a numeric constant for the label text height, in angular degrees.	0.5
labelTypeFace([typeface ])	Getter/setter for the text font typeface JSON object. Supports any typeface font generated by Facetype.js.	helvetiker regular
labelRotation([num, str or fn])	Label object accessor function, attribute or a numeric constant for the label rotation in degrees. The rotation is performed clockwise along the axis of its latitude parallel plane.	0
labelResolution([num])	Getter/setter for the text geometric resolution of each label, expressed in how many segments to use in the text curves. Higher values yield smoother labels.	3
labelIncludeDot([bool, str or fn])	Label object accessor function, attribute or a boolean constant for whether to include a dot marker next to the text indicating the exact lat, lng coordinates of the label. If enabled the text will be rendered offset from the dot.	true
labelDotRadius([num, str or fn])	Label object accessor function, attribute or a numeric constant for the radius of the dot marker, in angular degrees.	0.1
labelDotOrientation([str or fn])	Label object accessor function or attribute for the orientation of the label if the dot marker is present. Possible values are right, top and bottom.	() => 'bottom'
labelsTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate label changes involving position modifications (lat, lng, altitude, rotation). A value of 0 will move the labels immediately to their final position. New labels are animated by scaling their size.	1000
onLabelClick(fn)	Callback function for label (left-button) clicks. The label object, the event object and the clicked coordinates are included as arguments: onLabelClick(label, event, { lat, lng, altitude }).	-
onLabelRightClick(fn)	Callback function for label right-clicks. The label object, the event object and the clicked coordinates are included as arguments: onLabelRightClick(label, event, { lat, lng, altitude }).	-
onLabelHover(fn)	Callback function for label mouse over events. The label object (or null if there's no label under the mouse line of sight) is included as the first argument, and the previous label object (or null) as second argument: onLabelHover(label, prevlabel).	-

HTML Elements Layer

Method	Description	Default
htmlElementsData([array])	Getter/setter for the list of objects to represent in the HTML elements map layer. Each HTML element is rendered using ThreeJS CSS2DRenderer.	[]
htmlLat([num, str or fn])	HTML element accessor function, attribute or a numeric constant for the latitude coordinate of the element's central position.	lat
htmlLng([num, str or fn])	HTML element accessor function, attribute or a numeric constant for the longitude coordinate of the element's central position.	lng
htmlAltitude([num, str or fn])	HTML element accessor function, attribute or a numeric constant for the altitude coordinate of the element's position, in terms of globe radius units.	0
htmlElement([str or fn])	Accessor function or attribute to retrieve the DOM element to use. Should return an instance of HTMLElement.	null
htmlTransitionDuration([num])	Getter/setter for duration (ms) of the transition to animate HTML elements position changes. A value of 0 will move the elements immediately to their final position.	1000

3D Objects Layer

Method	Description	Default
objectsData([array])	Getter/setter for the list of custom 3D objects to represent in the objects layer. Each object is rendered according to the objectThreeObject method.	[]
objectLabel([str or fn])	Object accessor function or attribute for its own tooltip label. Supports plain text or HTML content.	name
objectLat([num, str or fn])	Object accessor function, attribute or a numeric constant for the latitude coordinate of the object's position.	lat
objectLng([num, str or fn])	Object accessor function, attribute or a numeric constant for the longitude coordinate of the object's position.	lng
objectAltitude([num, str or fn])	Object accessor function, attribute or a numeric constant for the altitude coordinate of the object's position, in terms of globe radius units.	0.01
objectRotation([{[x], [y], [z]}, str or fn])	Object accessor function, attribute or a {x, y, z} object for the object's rotation (in degrees). Each dimension is optional, allowing for rotation only in some axes. Rotation is applied in the order X->Y->Z.	-
objectFacesSurface([boolean, str or fn])	Object accessor function, attribute or a boolean constant for whether the object should be rotated to face (away from) the globe surface (true), or be left in its original universe orientation (false).	true
objectThreeObject([Object3d, str or fn])	Object accessor function or attribute for defining a custom 3d object to render as part of the objects map layer. Should return an instance of ThreeJS Object3d.	A yellow sphere
onObjectClick(fn)	Callback function for object (left-button) clicks. The object itself, the event and the clicked coordinates are included as arguments: onObjectClick(obj, event, { lat, lng, altitude }).	-
onObjectRightClick(fn)	Callback function for object right-clicks. The object itself, the event and the clicked coordinates are included as arguments: onObjectRightClick(obj, event, { lat, lng, altitude }).	-
onObjectHover(fn)	Callback function for object mouse over events. The object itself (or null if there's no object under the mouse line of sight) is included as the first argument, and the previous object (or null) as second argument: onObjectHover(obj, prevObj).	-

Custom Layer

Method	Description	Default
customLayerData([array])	Getter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the customThreeObject method.	[]
customLayerLabel([str or fn])	Object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.	name
customThreeObject([Object3d, str or fn])	Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of ThreeJS Object3d.	null
customThreeObjectUpdate([str or fn])	Object accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don't need to be removed and recreated at each update. The callback method's signature includes the object to be update and its new data: customThreeObjectUpdate((obj, objData) => { ... }).	null
onCustomLayerClick(fn)	Callback function for custom object (left-button) clicks. The custom object, the event object and the clicked coordinates are included as arguments: onCustomLayerClick(obj, event, { lat, lng, altitude }).	-
onCustomLayerRightClick(fn)	Callback function for custom object right-clicks. The custom object, the event object and the clicked coordinates are included as arguments: onCustomLayerRightClick(obj, event, { lat, lng, altitude }).	-
onCustomLayerHover(fn)	Callback function for custom object mouse over events. The custom object (or null if there's no object under the mouse line of sight) is included as the first argument, and the previous custom object (or null) as second argument: onCustomLayerHover(obj, prevObj).	-

Render Control

Method	Description	Default
pointOfView({ lat, lng, altitude }, [ms])	Getter/setter for the camera position, in terms of geographical lat, lng, altitude coordinates. Each of the coordinates is optional, allowing for motion in just some direction. The 2nd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position.	By default the camera will aim at the cross between the equator and the prime meridian (0,0 coordinates), at an altitude of 2.5 globe radii.
pauseAnimation()	Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient.
resumeAnimation()	Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with pauseAnimation for performance optimization purposes.
enablePointerInteraction([boolean])	Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your globe performance it's recommended to switch off this property.	true
pointerEventsFilter([fn])	Getter/setter for the filter function which defines whether a particular object can be the target of pointer interactions. In general, objects that are closer to the camera get precedence in capturing pointer events. This function allows having ignored object layers so that pointer events can be passed through to deeper objects in the various globe layers. The ThreeJS object and its associated data (if any) are passed as arguments: pointerEventsFilter(obj, data). The function should return a boolean value.	() => true
lineHoverPrecision([num])	Getter/setter for the precision to use when detecting hover events over Line objects, such as arcs and paths.	0.2
onZoom(fn)	Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax { lat, lng, altitude }) is included as sole argument.
lights([array])	Getter/setter for the list of lights to use in the scene. Each item should be an instance of Light.	AmbientLight + DirectionalLight (from above)
scene()	Access the internal ThreeJS Scene. Can be used to extend the current scene with additional objects not related to globe.gl.
camera()	Access the internal ThreeJS Camera.
renderer()	Access the internal ThreeJS WebGL renderer.
postProcessingComposer()	Access the post-processing composer. Use this to add post-processing rendering effects to the scene. By default the composer has a single pass (RenderPass) that directly renders the scene without any effects.
controls()	Access the internal ThreeJS orbit controls object.

Utility

Method	Description
getGlobeRadius()	Returns the cartesian distance of a globe radius in absolute spatial units.
getCoords(lat, lng [,altitude])	Utility method to translate spherical coordinates to cartesian. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the equivalent {x, y, z} cartesian spatial coordinates.
getScreenCoords(lat, lng [,altitude])	Utility method to translate spherical coordinates to the viewport domain. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the current equivalent {x, y} in viewport coordinates.
toGeoCoords({ x, y, z })	Utility method to translate cartesian coordinates to the geographic domain. Given a set of 3D cartesian coordinates {x, y, z}, returns the equivalent {lat, lng, altitude} spherical coordinates. Altitude is defined in terms of globe radius units.
toGlobeCoords(x, y)	Utility method to translate viewport coordinates to the globe surface coordinates directly under the specified viewport pixel. Returns the globe coordinates in the format { lat, lng }, or null if the globe does not currently intersect with that viewport location.

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!

globe.gl's Issues

How to add real-time data?

There's any way of how to add arcsData in real-time, my plan is to get a socket connection receiving lat and long with source and destination and go adding this data to the current globe as they arrive but I'm not sure if that possible with the current implementation.

I'm also trying also to set a world map in png with transparency for the ocean using the globeImageUrl but it set white for the whole ocean, any idea about this?

PS: Thanks a lot to create this library!

Polygons on click not triggered with higher altitude

Hi Vasco,

Thanks for the amazing library!

I seem to have encountered a bug. onPolygonClick does not fire when polygonAltitude is set to a higher value: at first things appear to work correctly but stop working if the globe has been rotated.

Below is a reproducible example based on yours.

<head>
  <style> body { margin: 0; } </style>

  <script src="https://cdn.jsdelivr.net/npm/d3"></script>

  <script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
  <!--<script src="../../dist/globe.gl.js"></script>-->
</head>

<body>
  <div id="globeViz"></div>

  <script>
    var world;
    const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
    // GDP per capita (avoiding countries with small pop)
    const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
    fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
    {
      const maxVal = Math.max(...countries.features.map(getVal));
      colorScale.domain([0, maxVal]);
      console.log(countries);
      world = Globe()
        .globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
        .polygonsData(countries.features)
        .polygonAltitude(0.5) // set higher
        .polygonCapColor(feat => colorScale(getVal(feat)))
        .polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
        .polygonStrokeColor(() => '#111')
        .polygonLabel(({ properties: d }) => `
          <b>${d.ADMIN} (${d.ISO_A2}):</b> <br />
          GDP: <i>${d.GDP_MD_EST}</i> M$<br/>
          Population: <i>${d.POP_EST}</i>
        `)
        .onPolygonClick(hoverD => world // change to on click
          .polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d)))
        )
        .polygonsTransitionDuration(300)
      (document.getElementById('globeViz'))
    });
  </script>
</body>

Significantly lesser frame rate when compared to three-globe

Describe the bug
Performance of this web component seems to be inferior to that of the vanilla three-globe component.

To Reproduce
Steps to reproduce the behavior:

1. Compare frame rate of https://vasturiano.github.io/three-globe/example/solar-terminator/ vs. https://globe.gl/example/solar-terminator/

Expected behavior
Performance of this component and the plugin it wraps to be exactly the same.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Ubuntu 20.04 AMD64
• Browser: Firefox
• Version: 89.0.1 (64-bit)

Smartphone (please complete the following information):

• Device:N/A
• OS: N/A
• Browser: N/A
• Version: N/A

Additional context
nouveau and i915 modules used, not using full acceleration of my GPU (GeForce RTX 2080 Mobile). Willing to debug it more and provide a patch to fix the performance issue.

Performance issue for cursor events on 3d polygon geometry.

Describe the bug
Cursor movements triggering polygon expansion via .onPolygonHover causes significant delay when animating multiple polygons at the same time.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://globe.gl/example/choropleth-countries/'
2. Quickly pan cursor over multiple countries in Europe
3. See 100% CPU spikes in Chrome DevTools; Noticable lag in WebGL renderer.

Expected behavior
Smooth transitions and animations when animating polygon geometry.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows x64
• Browser Chrome
• Version 90

Additional context
Likely an issue with re-generating the mesh for the animation.

Default font does not support label special characters

Special characters in labels are showing as question marks i.e.

N?man instead of Nüman

I think this is because the default font helvetiker regular doesn't support special characters. How do I use labelTypeFace([typeface ]) to specify a different/custom label font created with facetype.js or is there another built in font I can use, or am I doing something wrong with special characters?

Arc lines become hard to see and at times invisible when on light backgrounds.

On light backgrounds or light globe color, the arcs lines become hard to see or even invisible at times

Steps to reproduce the behavior:

1. Create a globe and set the globe to .backgroundColor('white')
2. Turning on any arcs, you can see what I'm seeing below

Is there any way to change arc opacity or even blending mode so that these arcs are visible? Is this an issue with the light backgrounds and if so is there a workaround for this to work on light backgrounds.

• OS: Mac and PC
• Browser Tested in Safari, Chrome and Firefox

[question]How do I write code to stop/resume autoRotate when mouse click?

I just find a example here:
vasturiano/react-globe.gl#55 (comment)
But it doesn't work in this version.

1.How do I write code to stop/resume autoRotate when mouse click?
2.Which version should I use? Ract ver or this ver? for performance wise?

Thanks for the great work!

How i can work with scene

Hi!

Hope you are doing well! I want create a globe with some objects near, but i need help. I don't know how to get scene and other properties of myWorld like radius and etc. to work with them.

Points as customLayerData

Hi there,

Fantastic library! Thank you for this detailed work and documentation.

I'm trying to use Points instead of Spheres in your Custom Layer API (found here: https://github.com/vasturiano/globe.gl/blob/master/example/custom-layer/index.html).

I am replacing the original code (pasted here for convenience):

  .customLayerData(gData)
  .customThreeObject(d => new THREE.Mesh(
    new THREE.SphereBufferGeometry(d.radius),
    new THREE.MeshLambertMaterial({ color: d.color })
  ))
  .customThreeObjectUpdate((obj, d) => {
    Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
  });

(function moveSpheres() {
  gData.forEach(d => d.lat += 0.2);
  world.customLayerData(world.customLayerData());
  requestAnimationFrame(moveSpheres);
})();

by my modified code:

  .customLayerData(gData)
  .customThreeObject(d => new THREE.Points(
    new THREE.BufferGeometry(),
    new THREE.PointsMaterial({ color: d.color, size: 100 })
  ))
  .customThreeObjectUpdate((obj, d) => {
    Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
  });

(function moveSpheres() {
  gData.forEach(d => d.lat += 0.2);
  world.customLayerData(world.customLayerData());
  requestAnimationFrame(moveSpheres);
})();

The original code works perfect: the spheres are visible where expected. My modified code doesn't yield points. Nothing appears. I tried to change the size of the point. I checked as reference:

• https://threejs.org/docs/#api/en/objects/Points
• https://threejs.org/docs/#api/en/materials/PointsMaterial

So far, no success. I am wondering if you know why this is.

Thank you!

.2 precision in globe.js

Have had to patch this static value to .05 to get accurate behavior. Is there a consequence? Would you consider .05 as the default?

Thank you.

Stop rendering

Hi ! Thanks for your function !

Question : I can't stop rendering the animation. I have several pages in app where I can run some webgl animations with globeJS, but switching from page to another the processes are running slower and slower as I think animations are not paused or stopped.
Is there a way to programmatically stop (kill or pause) a rendering ?
Thanks for your help...

Hexed Polygons and Custom Layer with lag

Describe the bug
I created my own custom layer based on the example that you have and I tried to combine it with the new Hexed Polygons Layer but it is not working properly, take a look to the videos for a better explanation:

For the videos, I used the Custom and the Hexed examples, but happens the same with my own layer:

To Reproduce

Expected behavior
The animation of the custom layer should be as fluid as this:

But when I add the Hexed the custom layer animation reproduce with a lot of lag:

I tried to debug but didn't find a solution.

Doesn't support Safari on iOS...

When opened in Safari browser, either on desktop or mobile, it doesn't work. Just loads up to black screen.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Arcs example ( https://globe.gl/example/airline-routes/us-international-outbound.html ) in Safari

Expected behavior
Expecting to see the globe and to interact with it.

Desktop (please complete the following information):

• iOS
• Safari
• Version in iOS 14

Smartphone (please complete the following information):

• iPhone 7, iMac 27" 2019
• iOS 14, macOS Catalina
• Safari

Additional context
It happens only on Safari, and only with the Arcs example. The other browsers are okay.

Zoom to certain point or resoluatin level

Is it possible to zoom to a certain point by its coordinate or set the zoom-in or zoom-out level of the camera? When I try to add a globe to a storytelling website, I really hope the camera can move along some trajectories to help me tell the story.

Day and night textures at the same time

Is your feature request related to a problem? Please describe.
Based on your solar-terminator example, I'm trying to make the globe feature two textures: one of the day Earth, and one of the night.

Describe the solution you'd like
Some way to pass earth-blue-marble.jpg as a texture for

            .tileMaterial(() => new THREE.MeshLambertMaterial({
                color: '#ffff00',
                opacity: 0.2,
                transparent: true,
            }))

while keeping earth-night.jpg as the primary texture of the globe.

Describe alternatives you've considered
Somehow making a second set of tiles rotate on the opposite side of the planet simultaneously with the solar one.

Additional context

Set auto animation and disable zoom

Is there a way to disable zooming? I see something about three.js controls, and I've tried that but it does nothing and the mousewheel still zooms. Also, is there a way to set an animation where the globe spins slowly on it's own? Thanks!

How can I make it orbit?

I've been trying to set the orbit controls to auto rotation. How can I achieve an orbit effect?

onHexClick does not seem to fire.

Hi Vasco,

It seems that onHexClick does not fire, unless I am using it wrong: example below.

<head>
  <style> body { margin: 0; } </style>

  <script src="https://cdn.jsdelivr.net/npm/d3"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3-dsv"></script>

  <script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
  <!--<script src="../../dist/globe.gl.js"></script>-->
</head>

<body>
  <div id="globeViz"></div>

  <script>
    const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
      .domain([0, 1e7]);
    const world = Globe()
      (document.getElementById('globeViz'))
      .globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
      .bumpImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
      .hexBinPointWeight('pop')
      .hexAltitude(d => d.sumWeight * 6e-8)
      .hexBinResolution(4)
      .hexTopColor(d => weightColor(d.sumWeight))
      .hexSideColor(d => weightColor(d.sumWeight))
      .hexBinMerge(true)
      .onHexClick(function(x){console.log(x)})
      .enablePointerInteraction(false); // performance improvement
    fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/world_population.csv').then(res => res.text())
      .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
      .then(data => world.hexBinPointsData(data));
    // Add auto-rotation
    world.controls().autoRotate = true;
    world.controls().autoRotateSpeed = 0.1;
  </script>
</body>

[Feature suggestion] add filter in xxxData() to improve performance

As issue #17 , when we do .customLayerData(data) , it will loop all objs and trigger customThreeObjectUpdate for every objs. There will be performance issue with big data, but we can set a custom property/state to filter the process.

The customlayer works well with custom filter, but for all other layers, we still need a filter to improve performance with big data. e.g. airline demo

if we want to change something of a arc on click, e.g. color, after recall .arcsData(data), it will take 1-2s to process all arcs, meanwhile everything freezing. For all other .xxxData() apis, they all share the same problem with big data.

So we need an easy way or second param in xxxData() to add custom filter, like customLayerData() as #17, only update objs on demand, not loop all of them.

[Feature request] enhance click callbacks

Is your feature request related to a problem? Please describe.

1. There is no callback for clicks on the globe in current version, but we need to know the coords when user click on the globe in many cases. e.g add points/label/.. on user clicks.
2. The callbacks should also give back the coords for a click
3. There is only one globe switch for pointer event currently, but sometimes we need to ignore pointer for 1/2 layers. e.g a custom layer( such as particles to simulate clouds) with high altitude value will block every other layers. It should not catch pointer event, and pass through to next layer.

Describe the solution you'd like

1. Enable click callbacks for globe layer itself.
2. For all click callbacks in all layers, should also give back the coords of the click
3. Add config in each layer to ignore/pass-through pointer event, and for custom layer, there should be a config for each obj.

[Feature suggestion] add filter in customLayerData() to improve performance

Is your feature request related to a problem? Please describe.
The customLayerData() will loop all objs and trigger customThreeObjectUpdate for every objs. But with more and more objects in custom layer, the loop for all customThreeObjectUpdate will be slower and slower. But in most of the time, we only want to update one obj. All other loops will be waste of time.

Describe the solution you'd like
the customLayer cloud have a second vals to filter objs updating process, such as

    let customData = [.....] // already got many objs
    
    // if we just updated some of them
    customData[3] = .... 
    customData[5] = .... 
    myGlobe.customLayerData(customData, [3, 5]) // indicate the indexes to update or some other way

or, if you can use observers to watch customLayerData objs, and only update the changed ones with new data

Currently, I have to manually maintain a __update for every custom object, and manually by-pass the update process in customThreeObjectUpdate. Hope it can be done in a better way

method to convert word-coordinates to normalized device coordinates (screen coordinates)

Dear Vasco,

Hope you are doing well in these challenging times. Thanks again for all your amazing work, really cool stuff!

I was wondering, is there a way to convert lat/long/altitude or x,y,z coordinates used by threejs to convert them to normalized device coordinates or x,y screen coordinates in relation to say a container element?

This would be very helpful to create annotations (say via an overlay div), showing additional information on globe positions, in which the annotation is connected via a line to the globe.

This is sort of what I'm aiming for: (the globe etc is already based on your work :-)

For a cool effect it would be nice that when the camera view changes, the annotation connection line updates as well. I'm aware of the getCoords and toGeoCoords functions, but I guess they serve a different purpose.

There are some references on the web that solve the coordinate conversion in relation to the current camera view, in particular see this three-js-annotations example and this stackoverflow question.

In the spirit of one of your own examples, let's say I set some labels on a globe (myGlobe) via labelsData and let's say I want to create an annotation for the first label.

In what is suggested in the references above, I hoped something like this would work to get the x,y position information I was looking for:

  let pos = new THREE.Vector3();
  let obj = myGlobe.labelsData()[1]
  pos = pos.setFromMatrixPosition(obj.__threeObj.matrixWorld);
  pos.project(myGlobe.camera);
  console.log("position", pos);

Unfortunately it doesn't. Somehow at the end it seems to go wrong in this threejs function:

applyMatrix3: function ( m ) {
     		
    var x = this.x, y = this.y, z = this.z;
    var e = m.elements;
    this.x = e[ 0 ] * x + e[ 3 ] * y + e[ 6 ] * z;
    this.y = e[ 1 ] * x + e[ 4 ] * y + e[ 7 ] * z;
    this.z = e[ 2 ] * x + e[ 5 ] * y + e[ 8 ] * z;

    return this;
 }

In both references the applyMatrix3 function errors out saying that elements does not exist.

Do you have any clue what I can do?

I think the ability to add annotations, be it only by providing a method to get appropriate x,y coordinates in relation to the camera view, could be helpful to others as well, hence this feature request.

Personally I would already be super grateful if I can manually do the conversion, but I seem to lack the knowledge on what to do here. Any help is greatly appreciated.

best wishes and have a great day! Herman

Responsive view

Is there an easy way to make the container responsive? Currently when you resize the window, the globe stays in its place.

Any help would be much appreciated.

Add a morph from 3D globe to 2D map

Is your feature request related to a problem? Please describe.
I've seen the Kasperky cybermap and it can switch from 3D to 2D, I think it's a really cool effect but might be hard to implement with extruded polygons maybe ?

Describe the solution you'd like
A function to switch between 3D and 2D.

Additional context
I've found this solution but I don't know how to integrate it to your library :

• switch between 2D and 3D

Touch support for Mobile devices

Hi @vasturiano,
The touch support for mobile devices issue you resolved still has problems, varying support for different devices. I have tried using different devices. It works well on most but for Samsung and Apple devices, there are still problems. The onPointClick function still do not trigger on touch.

I hope that the issue will be fixed.!
Cheers

react compatibility?

Is your feature request related to a problem? Please describe.
is this library easily integratable into a react project?

Describe the solution you'd like
might be nice for the readme to be updated to have a react quickstart guide

Describe alternatives you've considered
you could just explain it to me in this issue thread

Additional context

[Bug?] Path obj can't click with stroke

Describe the bug
with .pathStroke(), the path line will not able to interact with mouse event, looks like raycaster will not catch the obj.

To Reproduce
Steps to reproduce the behavior:

1. A live demo on codepan
2. Click on any line, they can be clicked, alert shows
3. uncomment line 30 .pathStroke(2)
4. then they can't be clicked or any mouse event

Expected behavior
with skroke value, path lines should able be clicked

Additional context
hope someone could dig animation with stroke

Clicking point on Mobile Devices doesn't have any effect.

I am using points on globe gl. On clicking the point a card is shown .It works fine on the browser and I get my desired thing. But When I switch to mobile devices it doesn't seem to work. It doesn;t call hover or click function . I have used android as well as Ios devices to check this and it is the same . When I tried to test it on the PC browser. It work fine on different screen of mozilla firefox but it doesn't work on the google chrome small screen .I have also enabled the webgl extension on chrome and it's still the same .I also tried to test the example given in library and the behavior was same Please tell me about what can be done regarding this issue?

[Feature request] Globe() manually release

Is your feature request related to a problem? Please describe.
In many cases, we need to free all memory / three.js objects without refresh browser. e.g. one-page app or dev with hot-reload in webpack,...
But I can't find any way to release them in current version. Recall Globe() would create new scene but the old one seems remain in the memory, and the scene would be slow rendering.

Describe the solution you'd like
There could be an API, e.g myGlobe.destroy()/.free()/..., to release all canvas/dom/threejs objects in old scene.

Globe.gl, single polygon turns entire scene the cap color

I'm trying to produce a single polygon on a map that is slightly raised up with a transparent globe image. I'm getting a large pillar of orange with the entire canvas with the cap color.
This is my code:

const world = Globe()
        (document.getElementById('globe'))
        .backgroundImageUrl('<?php echo get_template_directory_uri(); ?>/images/background-globe.png')
        .globeImageUrl('<?php echo get_template_directory_uri(); ?>/images/globeskin.png')
        .showAtmosphere(false)
        .polygonCapColor(feat => '#C3330C')
        .polygonSideColor(() => '#EF4E23')
        .hexTopColor('#C3330C')
        .hexSideColor('#EF4E23')
        .polygonAltitude(3)
        world.controls().enableZoom = false;
        world.controls().autoRotate = true;
        world.controls().autoRotateSpeed = 2;
        world.width([$(window).width()])
        world.height([$(window).width() * 1.25]);

        fetch('<?php echo get_template_directory_uri(); ?>/js/location.geojson').then(res => res.json()).then(countries => {
          world.polygonsData(countries.features.filter(d => d.properties.ISO_A2 !== 'AQ'));
        });

And here is my geojson

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "shape": "Rectangle",
            "name": "Unnamed Layer",
            "category": "default"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-98.557021, 31.675237],
                    [-96.127868, 31.675237],
                    [-96.127868, 33.737238],
                    [-98.557021, 33.737238],
                    [-98.557021, 31.675237]
                ]
            ]
        },
        "id": "35f8ebbf-47ab-427b-8479-f674048b62be"
    }]
}

using MeshMatcapMaterial

Hi Vasco!

Hope you are doing well! I'm wondering, for a more artistic effect, is it also possible to apply a MeshMatcapMaterial to the globe? I was just goofing around and was looking at a codrops article in which they use this material, which looked kind of cool. Obviously pretty useless, but cool :-).

kind regards, Herman

How to have transparent background?

Hi,

Thanks for this great and easy-to-use component.

I am reasonably comfortable with Three.js and know how to work with that, so while I could use three-globe, I am using globe.gl for a project for its convenience for things like the mouseover functionality.

I know I can access some of the lower level Three.js stuff with world.renderer(), world.camera() etc. but I have tried poking around and can't find out exactly where or how globe.gl is setting the background colour on the three renderer.

Is there an easy way to just make globe.gl have a transparent background? (If not, I suggest there should be, eg. .setBackgroundColor(false) or whatever). I see the default passed to the Three renderer is alpha: true but that doesn't seem like it has any effect.

If there is not an easy way, where in the three.js code can I do it myself? (Things like world.renderer().setClearColor(0xffffff, 0) have proved fruitless.)

Lessen shade on white globe

On a white globe, there is heavy shading on the lower quadrant. Is there any way to lessen it? Thanks!

Continuous use of pointsData() wipes labels set via labelsData()

Describe the bug
Calling .pointsData() on an already rendered globe causes it to lose its labels previously set via .labelsData().

To Reproduce
Steps to reproduce the behavior:
1.

<head>
  <script src="//unpkg.com/globe.gl"></script>
</head>
<body style="margin:0">
  <div id="viewport"></div>
</body>

// Gen random data
const N = 300;
const gData = [...Array(N).keys()].map(() => ({
  lat: (Math.random() - 0.5) * 180,
  lng: (Math.random() - 0.5) * 360,
  size: Math.random() / 3,
  color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
}));

const globe = Globe()
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
  .pointsData(gData)
  .labelsData(gData)
  .labelText(() => "Text")
  .labelSize(2)
  .pointAltitude('size')
  .pointColor('color')
  (document.getElementById('viewport'));

setTimeout(() => {
  globe.pointsData(gData);
  // globe.labelsData(gData);
}, 5000);

Expected behavior
Labels should not disappear.

Screenshots
N/A

Desktop (please complete the following information):

• OS: N/A
• Browser: N/A
• Version: N/A

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser: N/A
• Version: N/A

Additional context
Calling .labelsData() right after .pointsData() seems to be bringing back labels and render them again after a second or two, but it's definitely a bug that points data interferes with labels data.

All materials render black on some mobile devices

Testing on various mobile devices (phones and pads) indicates that depending on the drivers, GPU:s and browser versions three.js may render all or some objects pitch-black. In this case with globe.gl most of the coloured objects rendered correctly but the textured dark night globe didn't.

Mobile device having the same GPU/processor may behave differently depending on the phone model and year; older may work while newer doesn't. The same device may operate correctly with Chrome but not with Firefox etc.    

The solution to this would be using material precision: 'mediump' on all mobile devices as a default value. Solving this has first been suggested in 2018 by @Mugen87 mrdoob/three.js#14570. These examples are from another thread, and I can confirm that this is an issue. Testing various devices using these two tests below confirmed it. 
 
This will show a white cube on all devices: 
 var material = newTHREE.MeshPhongMaterial( { precision: 'mediump' } ); 
https://jsfiddle.net/f2Lommf5/6721/embedded/result
 
This will not show a white cube on some devices, rendering it pitch-black 
 var material = new THREE.MeshPhongMaterial( { precision: 'highp' } ); 
https://jsfiddle.net/f2Lommf5/6722/embedded/result
 
IHMO is very important that 3D graphics operate flawlessly by default on all devices capable of running them, despite the bad drivers, operating systems, or browser versions.
 
Is anyone interested to investigate a solution to this? I am willing to test and confirm how possible solution works with various devices. 

Polygon strokes

Do you think it would be possible to add the ability to use strokes in the polygons? It would be very nice to have this because when you have a lot of adjacent polygons is very difficult to differentiate them.

Link three.js as peer dependency

I am importing react-globe.gl as an ES6 modules on Meteor as a fullstack platform.

If I want to customize the globe, I have to import THREE as well, like this:

import THREE from 'three';

to be able to setup low-level stuff like a phong shader or lights.

But if I do, React complains about two simultaneously loaded three.js libraries:

This is because globe.gl references all three libraries as a hard dependencies and won't take the three I already provide. I've seen that it also checks for window.THREE, but this relies on a certain call order which you cannot guarantee in an ES6 environment.

If I omit three from my package.json, the import won't work anymore.

To resolve this, I'd like to suggest to use a peer dependency instead, so it is up to the developer to import three. The three-globe library already does it this way.

Question: Reverse Engineer air traffic example

Hi,

I hope you are keeping well, and a great project.

I'm trying to use the air traffic example as it best fits my experiment. I am trying to build a map that connects people to their closest datacenter (All mocked data, was learning how to build a web api and thought I'd try to expand it more and came across this project).

I want to replace the fetching of the airport data and use an endpoint that exposes the following json:

[ { "metricName": "concurrentPlays", "proposition": "peacock", "state": "wi", "stateLongLat": { "destLat": "38.5284223", "destLong": "-77.7938668", "lat": "46.01222384063236", "long": "-90.5712890625" } }, { "metricName": "concurrentPlays", "proposition": "peacock", "state": "wi", "stateLongLat": { "destLat": "38.5284223", "destLong": "-77.7938668", "lat": "45.583289756006316", "long": "-89.40673828125" } } ];

I have a way to extract this data, but I want to parse the lat and longs (dest being destination, or end in your example equivalent) but I'm struggling to understand how to use the API specified, it seems there's a lot going on and removing bits of code seems to break the project.

If you're able to assist, will definitely donate more than just a coffee. :)

I tried manually passing in an array of lat/longs but it doesn't seem to work like this;
.arcStartLat(["38.42777351132902", "38.5284223"])
.arcStartLng(["-81.34277343750001", "-77.7938668"])
.arcEndLat(["38.5284223", "44.1757946"])
.arcEndLng(["-77.7938668", "-121.9088563"])

It does work if I give it one item for each as below:
.arcStartLat(["38.42777351132902"])
.arcStartLng(["-81.34277343750001"])
.arcEndLat(["38.5284223"])
.arcEndLng(["-77.7938668"])

I am using this as a alternative to the fetch example in the air traffic solution:

` const airportParse = ([metricName, proposition, state, startLat, startLng, endLat, endLng]) => ({ metricName, proposition, state, startLat, startLng, endLat, endLng });

var x;
Promise.all([
fetch('http://localhost:8080/update')
.then(res => res.json())
.then((out) => {
var i;
for (i = 0; i < out.length; i++) { //this works and gets every bit of data i need...
var index = out[i]
x = [...Array(300).keys()].map(() => (
[
// metricName = index.metricName, proposition = index.proposition, state = index.state, startLat = index.stateLongLat.lat, startLng = index.stateLongLat.long, endLat = index.stateLongLat.destLat, endLng = index.stateLongLat.destLong
startLat = index.stateLongLat.lat, startLng = index.stateLongLat.long, endLat = index.stateLongLat.destLat, endLng = index.stateLongLat.destLong
]
))
console.log(x)
}
myGlobe
.pointsData(x)
.arcsData(x);
})
]);`

Again, any help will be greatly appreciated. Happy to supply the code if necessary :) A massive thank you in advance

Changing color of globe

Changing the color of the globe seems to have no effect at all, when looking through the globeMaterial, seems the color is always a fixed black (0, 0, 0). How can we change the color of the globe?

Globe fixed Zoom (Disable Zoom-In/ Zoom-Out)

How can I set the globe to a fixed size and disable zoom in and out feature?
Zoom in out includes two finger scroll zooming and mouse wheel zooming...
Fixed size means a responsive size such as using percentage sizing...

Thanx in advance for the support...

Cannot Update Arcs Data

Describe the bug
Hi! I'm having a problem with my Globe.gl application that I'm hoping you can help me with. I cannot seem to be able to pass new JSON data to - or modify at all - the arcs data of my application.

To Reproduce

1. Initialize some arcs data based off a JSON array: world.arcsData(usersJSONObjects).arcLabel(() => '').arcStartLat(() => "42.9814").arcStartLng(() => "-70.9478").arcColor(() => ['#ff0000', '#ffffff']).arcEndLat(arcs => arcs.loc_lat).arcEndLng(arcs => arcs.loc_lon).arcStroke(() => 0.025);
2. Then, change an attribute later on (in my case, in my onZoom() function to make the arc bigger): world.arcStroke(() => null);
3. I get the following error: Uncaught TypeError: Cannot read property 'uniforms' of undefined at updateObj (three-globe.module.js:856) at data-joint.module.js:288 at Array.forEach (<anonymous>) at updateObjs (data-joint.module.js:283) at viewDigest (data-joint.module.js:264) at threeDigest (three-globe.module.js:519) at Function.update (three-globe.module.js:841) at kapsule.module.js:112 at later (index.js:27)

Expected behavior
Oddly enough, this functionality works with labels: for example, I can later change the size of my labels and such, but for arcs, an error is given if I attempt to change anything beyond the initialization. The following code works:

1. Initialize some arcs data based off a JSON array: world.arcsData(usersJSONObjects).arcLabel(() => '').arcStartLat(() => "42.9814").arcStartLng(() => "-70.9478").arcColor(() => ['#ff0000', '#ffffff']).arcEndLat(arcs => arcs.loc_lat).arcEndLng(arcs => arcs.loc_lon).arcStroke(() => 0.025);
2. Then, change an attribute later on (in my case, in my onZoom() function to make the label size bigger): world.labelSize(() => 0.06)
3. Works great! 😃

Desktop (please complete the following information):
Not sure if this is relevant because this crops up across all platforms I've tried this on, but Mac OS 10.14.6, Chrome Version 83.0.4103.116.

Additional context
Your work is amazing! Thanks so much for all your help and support in maintaining this project - having this be open-source must be an incredible commitment, but I can tell you that this framework is helping many people like me!

bloomPass on certain objects only

Is your feature request related to a problem? Please describe.
As per this example: https://jsfiddle.net/ghe27wmt

  if (elapsed > fpsInterval) {
                              
                                worldGlobe.renderer().autoClear = false;
                                worldGlobe.renderer().clear();
                                worldGlobe.camera().layers.set(1);  // sets camera to layer 1, the object that has bloom is in layer1
                               if (finalComposer !=null ) {finalComposer.render();} // renders the composer of the bloom
                                worldGlobe.renderer().clearDepth();  
                                worldGlobe.camera().layers.set(0);//sets layer 0 (all the other non bloom objects)
                               worldGlobe.renderer().render(worldGlobe.scene(), worldGlobe.camera())

Describe the solution you'd like
I am trying to get the bloomPass to work on a specific camera.layer (to bloom only objects that are set in layer 1) as per the example above. But the bloomEffect does not show.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
I tried adding the unrealBloomPass to worldGlobe.postProcessingComposer() and replacing the above: finalComposer.render() to worldGlobe.postProcessingComposer().render() although no errors, I see no bloom on the object.

Additional context
So the short question is, whether it is somehow possible to only use a postprocessing pass on specific objects using camera layers. And how to go about it.

choropleth and hexed globes not displaying

The choropleth and hexed globes don't load on a python server.

Map images and Zoom trigger?

Is there any good place to get images to use for this globe? Or do you have any specifications on sizes it should use?

I have been looking for awhile and can't find a spot to get images i can use for wrapping around the globe.

Also is there any access to a zoom triggered function? I would like to try loading a more detailed map when zoomed in to a certain level, also maybe load different set of data at that point? So points can be clustered together when zoomed out and expand when zoomed in enough.

[Bug?] polygonCapCurvatureResolution won't update after creation

Describe the bug
The new polygonCapCurvatureResolution method only apples in the first creation process. After that, the loop still running with new data or changes, but the polygon won't update.

To Reproduce
Steps to reproduce the behavior:

1. Init polygons with polygonCapCurvatureResolution(d=> d.active ? 1 : 10), it works fine
2. Change the active or reset polygonsData
3. the polygonCapCurvatureResolution loop will re-run, but the polygon won't change

Expected behavior
polygonCapCurvatureResolution will change the polygon layers after new loop

Using passive event listeners

Describe the bug
GlobeGL is not using passive event listeners. This affects the page's scroll performance and also throws errors in lighthouse reports.

To Reproduce
Steps to reproduce the behavior:

1. Start Lighthouse audit of website
2. See result ;)

Expected behavior
Using passive event listeners

Screenshots

pointsData([]) cannot clear points with pointsMerge(true)

Describe the bug
With enable pointsMerge, the pointsData([]) won't able to empty points

To Reproduce
Steps to reproduce the behavior:

1. add some points with pointsData([...])
2. also set pointsMerge(true)
3. try to empty points with pointsData([])
4. then you will see no points removed

Expected behavior
All points should be removed

I dont't test hexBinMerge yet, it may share the same problem

efficiently updating data in the labels layer

Hi Vasco!

Hope you are doing well!

For a corona tracking visualization that I'm working on (work in progress) I use pointsData and labelsData. In the app (see screenshot below) there is a timeline and a globe, in which the globe shows a series of data points e.g. number of deaths for a given lat/lng coordinate. The size of the points is proportional to the number of deaths and if the number is above some threshold the count is shown as a label as well. The idea is that when the user hovers over the timeline the counts for that particular point in time are shown and that the globe points and labels update quickly.

What would you advise to be the best way to efficiently update labels (if any)? Preferably I like to animate the numbers in when the globe data is initially shown and to update the labels on timeline hover.

For the customLayerData there is the customThreeObjectUpdate method that allows one to efficiently update the data. However, for the other layers these options do not exist currently.

Say you have some points data e.g. gPointsData and we want to update this efficiently. I had hoped that the globe instance would take a reference and that updating gPointsData without rebinding would suffice for updating the globe view. Turns out this doesn't work, but fortunately re-binding data via globe.pointsData(gPointsData) works and is quick enough.

However, for the labels data updating in a similar way is too slow and does not work well for quick updates for sizes of a few hundred labels and more. To reduce the work load on timeline hover I'm already throttling the hover events. Clearly I can debounce as well but that would make the timeline hover experience much less fluent.

What would you say is the best way to go here?

kind regards, Herman

Is it possible to use map tiles (e.g., OSM hosted tiles at various zoom levels) with globe.gl?

There is a Tiles example, but I did not see how to render WMS map tiles. Please advise. Thank you.

Transparent globe

How to have the globe be transparent so that you see through it? For example if you got hexpolygons, to see their backside through the globe.

Been trying at this for hours with no success.