globe.gl 2.33.1 → 2.34.0

package/example/airline-routes/highlight-links.html

@@ -17,8 +17,7 @@
   const MAP_CENTER = { lat: 37.6, lng: -16.6, altitude: 0.4 };
   const OPACITY = 0.3;
 
-  const myGlobe = Globe()
-    (document.getElementById('globeViz'))
+  const myGlobe = new Globe(document.getElementById('globeViz'))
     .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
 
     .arcLabel(d => `${d.airline}: ${d.srcIata} → ${d.dstIata}`)

package/example/airline-routes/us-international-outbound.html

@@ -16,8 +16,7 @@
   const COUNTRY = 'United States';
   const OPACITY = 0.22;
 
-  const myGlobe = Globe()
-    (document.getElementById('globeViz'))
+  const myGlobe = new Globe(document.getElementById('globeViz'))
 
     .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
     .pointOfView({ lat: 39.6, lng: -98.5, altitude: 2 }) // aim at continental US centroid

package/example/basic/index.html

@@ -18,12 +18,11 @@
       color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
     }));
 
-    Globe()
+    new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .pointsData(gData)
       .pointAltitude('size')
-      .pointColor('color')
-    (document.getElementById('globeViz'))
+      .pointColor('color');
 
   </script>
 </body>

package/example/choropleth-countries/index.html

@@ -21,7 +21,7 @@
       const maxVal = Math.max(...countries.features.map(getVal));
       colorScale.domain([0, maxVal]);
 
-      const world = Globe()
+      const world = new Globe(document.getElementById('globeViz'))
         .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
         .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
         .lineHoverPrecision(0)
@@ -39,8 +39,7 @@
           .polygonAltitude(d => d === hoverD ? 0.12 : 0.06)
           .polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d)))
         )
-        .polygonsTransitionDuration(300)
-      (document.getElementById('globeViz'))
+        .polygonsTransitionDuration(300);
     });
   </script>
 </body>

package/example/clouds/index.html

@@ -11,8 +11,7 @@
   <script type="module">
     import * as THREE from '//unpkg.com/three/build/three.module.js';
 
-    const world = Globe({ animateIn: false })
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'), { animateIn: false })
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png');
 

package/example/countries-population/index.html

@@ -9,8 +9,7 @@
   <div id="globeViz"></div>
 
   <script>
-    const world = Globe()
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
       .pointOfView({ altitude: 4 }, 5000)
       .polygonCapColor(feat => 'rgba(200, 0, 0, 0.6)')

package/example/custom-globe-styling/index.html

@@ -11,11 +11,10 @@
   <script type="module">
     import * as THREE from '//unpkg.com/three/build/three.module.js';
 
-    const world = Globe()
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
-      .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
-      (document.getElementById('globeViz'));
+      .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
 
     // custom globe material
     const globeMaterial = world.globeMaterial();

package/example/custom-layer/index.html

@@ -21,8 +21,7 @@
       color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
     }));
 
-    const world = Globe()
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
       .pointOfView({ altitude: 3.5 })

package/example/earth-shield/index.html

@@ -11,14 +11,13 @@
   <script>
     const shieldRing = { lat: 90, lng: 0 };
 
-    const globe = Globe()
+    const globe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .ringsData([shieldRing])
       .ringAltitude(0.25)
       .ringColor(() => 'lightblue')
       .ringMaxRadius(180)
       .ringPropagationSpeed(20)
-      .ringRepeatPeriod(200)
-      (document.getElementById('globeViz'));
+      .ringRepeatPeriod(200);
   </script>
 </body>

package/example/earthquakes/index.html

@@ -16,7 +16,7 @@
       .range(['lightblue', 'darkred'])
       .clamp(true);
 
-    const myGlobe = Globe()
+    const myGlobe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .hexBinPointLat(d => d.geometry.coordinates[1])
       .hexBinPointLng(d => d.geometry.coordinates[0])
@@ -28,8 +28,7 @@
         <b>${d.points.length}</b> earthquakes in the past month:<ul><li>
           ${d.points.slice().sort((a, b) => b.properties.mag - a.properties.mag).map(d => d.properties.title).join('</li><li>')}
         </li></ul>
-      `)
-      (document.getElementById('globeViz'));
+      `);
 
     fetch('//earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson').then(res => res.json()).then(equakes => {
       myGlobe.hexBinPointsData(equakes.features);

package/example/emit-arcs-on-click/index.html

@@ -15,7 +15,7 @@
     const RINGS_MAX_R = 5; // deg
     const RING_PROPAGATION_SPEED = 5; // deg/sec
 
-    const globe = Globe()
+    const globe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .arcColor(() => 'darkOrange')
       .onGlobeClick(emitArc)
@@ -27,8 +27,7 @@
       .ringColor(() => t => `rgba(255,100,50,${1-t})`)
       .ringMaxRadius(RINGS_MAX_R)
       .ringPropagationSpeed(RING_PROPAGATION_SPEED)
-      .ringRepeatPeriod(FLIGHT_TIME * ARC_REL_LEN / NUM_RINGS)
-      (document.getElementById('globeViz'));
+      .ringRepeatPeriod(FLIGHT_TIME * ARC_REL_LEN / NUM_RINGS);
 
     let prevCoords = { lat: 0, lng: 0 };
     function emitArc({ lat: endLat, lng: endLng }) {

package/example/heatmap/index.html

@@ -10,14 +10,14 @@
 
   <script>
     // Gen random data
-    const N = 300;
+    const N = 900;
     const gData = [...Array(N).keys()].map(() => ({
       lat: (Math.random() - 0.5) * 160,
       lng: (Math.random() - 0.5) * 360,
       weight: Math.random()
     }));
 
-    const world = Globe()
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
       .heatmapsData([gData])
       .heatmapPointLat('lat')
@@ -25,7 +25,6 @@
       .heatmapPointWeight('weight')
       .heatmapTopAltitude(0.7)
       .heatmapsTransitionDuration(3000)
-      .enablePointerInteraction(false)
-      (document.getElementById('globeViz'));
+      .enablePointerInteraction(false);
   </script>
 </body>

package/example/hexed-polygons/index.html

@@ -11,7 +11,7 @@
   <script>
     fetch('../datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
     {
-      const world = Globe()
+      const world = new Globe(document.getElementById('globeViz'))
         .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
         .hexPolygonsData(countries.features)
         .hexPolygonResolution(3)
@@ -21,8 +21,7 @@
         .hexPolygonLabel(({ properties: d }) => `
           <b>${d.ADMIN} (${d.ISO_A2})</b> <br />
           Population: <i>${d.POP_EST}</i>
-        `)
-        (document.getElementById('globeViz'))
+        `);
     });
   </script>
 </body>

package/example/hollow-globe/index.html

@@ -13,8 +13,7 @@
   <script type="module">
     import * as THREE from '//unpkg.com/three/build/three.module.js';
 
-    const world = Globe()
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'))
       .backgroundColor('rgba(0,0,0,0)')
       .showGlobe(false)
       .showAtmosphere(false);

package/example/html-markers/index.html

@@ -23,7 +23,7 @@
     color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
   }));
 
-  Globe()
+  new Globe(document.getElementById('globeViz'))
     .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
     .htmlElementsData(gData)
     .htmlElement(d => {
@@ -36,7 +36,6 @@
       el.style.cursor = 'pointer';
       el.onclick = () => console.info(d);
       return el;
-    })
-    (document.getElementById('globeViz'));
+    });
 </script>
 </body>

package/example/moon-landing-sites/index.html

@@ -16,8 +16,7 @@
 
   const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions
 
-  const elem = document.getElementById('globeViz');
-  const moon = Globe()
+  const moon = new Globe(document.getElementById('globeViz'))
     .globeImageUrl('./lunar_surface.jpg')
     .bumpImageUrl('./lunar_bumpmap.jpg')
     .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
@@ -33,8 +32,7 @@
         <div>${d.agency} - ${d.program} Program</div>
         <div>Landing on <i>${new Date(d.date).toLocaleDateString()}</i></div>
       `)
-    .onLabelClick(d => window.open(d.url, '_blank'))
-    (elem);
+    .onLabelClick(d => window.open(d.url, '_blank'));
 
   fetch('./moon_landings.json').then(r => r.json()).then(landingSites => {
     moon.labelsData(landingSites);

package/example/population-heatmap/index.html

@@ -11,15 +11,14 @@
   <div id="globeViz"></div>
 
   <script>
-    const world = Globe()
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .heatmapPointLat('lat')
       .heatmapPointLng('lng')
       .heatmapPointWeight('pop')
       .heatmapBandwidth(0.9)
       .heatmapColorSaturation(2.8)
-      .enablePointerInteraction(false)
-      (document.getElementById('globeViz'));
+      .enablePointerInteraction(false);
 
     fetch('../datasets/world_population.csv').then(res => res.text())
       .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))

package/example/random-arcs/index.html

@@ -19,14 +19,13 @@
       color: [['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]]
     }));
 
-    Globe()
+    new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .arcsData(arcsData)
       .arcColor('color')
       .arcDashLength(() => Math.random())
       .arcDashGap(() => Math.random())
-      .arcDashAnimateTime(() => Math.random() * 4000 + 500)
-    (document.getElementById('globeViz'))
+      .arcDashAnimateTime(() => Math.random() * 4000 + 500);
 
   </script>
 </body>

package/example/random-paths/index.html

@@ -29,15 +29,14 @@
       })];
     });
 
-    const globe = Globe()
+    const globe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
       .pathsData(gData)
       .pathColor(() => ['rgba(0,0,255,0.6)', 'rgba(255,0,0,0.6)'])
       .pathDashLength(0.01)
       .pathDashGap(0.004)
-      .pathDashAnimateTime(100000)
-      (document.getElementById('globeViz'));
+      .pathDashAnimateTime(100000);
 
     setTimeout(() => {
       globe

package/example/random-rings/index.html

@@ -21,14 +21,13 @@
 
     const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;
 
-    const globe = Globe()
+    const globe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .ringsData(gData)
       .ringColor(() => colorInterpolator)
       .ringMaxRadius('maxR')
       .ringPropagationSpeed('propagationSpeed')
-      .ringRepeatPeriod('repeatPeriod')
-      (document.getElementById('globeViz'));
+      .ringRepeatPeriod('repeatPeriod');
 
   </script>
 </body>

package/example/satellites/index.html

@@ -34,8 +34,7 @@
 
     const timeLogger = document.getElementById('time-log');
 
-    const world = Globe()
-      (document.getElementById('chart'))
+    const world = new Globe(document.getElementById('chart'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
       .objectLat('lat')
       .objectLng('lng')

package/example/solar-terminator/index.html

@@ -39,8 +39,7 @@
     const solarTile = { pos: sunPosAt(dt) };
     const timeEl = document.getElementById('time');
 
-    const world = Globe()
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
       .tilesData([solarTile])
       .tileLng(d => d.pos[0])

package/example/submarine-cables/index.html

@@ -9,11 +9,10 @@
 <div id="globeViz"></div>
 
   <script>
-    const globe = Globe()
+    const globe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
-      .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
-      (document.getElementById('globeViz'));
+      .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
 
     // from https://www.submarinecablemap.com
     fetch('//http-proxy.vastur.com?url=https://www.submarinecablemap.com/api/v3/cable/cable-geo.json')

package/example/tiles/index.html

@@ -31,12 +31,11 @@
     )
   );
 
-  Globe()
+  new Globe(document.getElementById('globeViz'))
     .tilesData(tilesData)
     .tileWidth(tileWidth - TILE_MARGIN)
     .tileHeight(tileHeight - TILE_MARGIN)
-    .tileMaterial('material')
-    (document.getElementById('globeViz'))
+    .tileMaterial('material');
 
 </script>
 </body>

package/example/volcanoes/index.html

@@ -24,7 +24,7 @@
       </div>
     `;
 
-    const myGlobe = Globe()
+    const myGlobe = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
       .pointLat('lat')
@@ -42,8 +42,7 @@
       .labelText('name')
       .labelSize(0.15)
       .labelResolution(1)
-      .labelLabel(getTooltip)
-      (document.getElementById('globeViz'));
+      .labelLabel(getTooltip);
 
     fetch('../datasets/world_volcanoes.json').then(res => res.json()).then(volcanoes => {
       myGlobe.pointsData(volcanoes)

package/example/volcanoes-heatmap/index.html

@@ -9,7 +9,7 @@
   <div id="globeViz"></div>
 
   <script>
-    const world = Globe()
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
       .heatmapPointLat('lat')
       .heatmapPointLng('lon')
@@ -17,8 +17,7 @@
       .heatmapTopAltitude(0.2)
       .heatmapBandwidth(1.35)
       .heatmapColorSaturation(3.2)
-      .enablePointerInteraction(false)
-      (document.getElementById('globeViz'));
+      .enablePointerInteraction(false);
 
     fetch('../datasets/world_volcanoes.json').then(res => res.json()).then(volcanoes => {
       world.heatmapsData([volcanoes])

package/example/world-cities/index.html

@@ -10,7 +10,7 @@
 
 <script>
   fetch('../datasets/ne_110m_populated_places_simple.geojson').then(res => res.json()).then(places => {
-    Globe()
+    new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
       .labelsData(places.features)
@@ -20,8 +20,7 @@
       .labelSize(d => Math.sqrt(d.properties.pop_max) * 4e-4)
       .labelDotRadius(d => Math.sqrt(d.properties.pop_max) * 4e-4)
       .labelColor(() => 'rgba(255, 165, 0, 0.75)')
-      .labelResolution(2)
-    (document.getElementById('globeViz'))
+      .labelResolution(2);
   });
 </script>
 </body>

package/example/world-population/index.html

@@ -15,8 +15,7 @@
     const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
       .domain([0, 1e7]);
 
-    const world = Globe()
-      (document.getElementById('globeViz'))
+    const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
       .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globe.gl",
-  "version": "2.33.1",
+  "version": "2.34.0",
   "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
   "type": "module",
   "unpkg": "dist/globe.gl.min.js",
@@ -50,24 +50,24 @@
   "dependencies": {
     "@tweenjs/tween.js": "18 - 25",
     "accessor-fn": "1",
-    "kapsule": "1",
+    "kapsule": "^1.16",
     "three": ">=0.154 <1",
-    "three-globe": "^2.33",
-    "three-render-objects": "^1.30"
+    "three-globe": "^2.35",
+    "three-render-objects": "^1.31"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/preset-env": "^7.25.8",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.0",
+    "rollup": "^4.28.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "engines": {
     "node": ">=12"