globe.gl 2.41.0 → 2.41.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +5 -2
  2. package/dist/globe.gl.js +1 -1
  3. package/dist/globe.gl.min.js +1 -1
  4. package/example/airline-routes/highlight-links.html +2 -2
  5. package/example/airline-routes/us-international-outbound.html +2 -2
  6. package/example/basic/index.html +2 -2
  7. package/example/choropleth-countries/index.html +3 -3
  8. package/example/clouds/index.html +3 -3
  9. package/example/countries-population/index.html +2 -2
  10. package/example/custom-globe-styling/index.html +5 -5
  11. package/example/custom-layer/index.html +3 -3
  12. package/example/day-night-cycle/index.html +128 -0
  13. package/example/day-night-cycle/preview.png +0 -0
  14. package/example/earth-shield/index.html +2 -2
  15. package/example/earthquakes/index.html +2 -2
  16. package/example/emit-arcs-on-click/index.html +2 -2
  17. package/example/heatmap/index.html +2 -2
  18. package/example/hexed-polygons/index.html +2 -2
  19. package/example/hollow-globe/index.html +2 -2
  20. package/example/html-markers/index.html +2 -2
  21. package/example/moon-landing-sites/index.html +2 -2
  22. package/example/population-heatmap/index.html +2 -2
  23. package/example/random-arcs/index.html +2 -2
  24. package/example/random-paths/index.html +3 -3
  25. package/example/random-rings/index.html +2 -2
  26. package/example/satellites/index.html +2 -2
  27. package/example/solar-terminator/index.html +4 -6
  28. package/example/submarine-cables/index.html +4 -4
  29. package/example/tile-engine/index.html +1 -1
  30. package/example/tiles/index.html +1 -1
  31. package/example/volcanoes/index.html +3 -3
  32. package/example/volcanoes-heatmap/index.html +2 -2
  33. package/example/world-cities/index.html +3 -3
  34. package/example/world-population/index.html +4 -4
  35. package/package.json +1 -1
package/example/airline-routes/highlight-links.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -17,7 +17,7 @@
17
17
  const OPACITY = 0.3;
18
18
 
19
19
  const myGlobe = new Globe(document.getElementById('globeViz'))
20
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
20
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
21
21
 
22
22
  .arcLabel(d => `${d.airline}: ${d.srcIata} &#8594; ${d.dstIata}`)
23
23
  .arcStartLat(d => d.srcAirport.lat)
package/example/airline-routes/us-international-outbound.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -17,7 +17,7 @@
17
17
 
18
18
  const myGlobe = new Globe(document.getElementById('globeViz'))
19
19
 
20
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
20
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
21
21
  .pointOfView({ lat: 39.6, lng: -98.5, altitude: 2 }) // aim at continental US centroid
22
22
 
23
23
  .arcLabel(d => `${d.airline}: ${d.srcIata} &#8594; ${d.dstIata}`)
package/example/basic/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -19,7 +19,7 @@
19
19
  }));
20
20
 
21
21
  new Globe(document.getElementById('globeViz'))
22
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
22
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
23
23
  .pointsData(gData)
24
24
  .pointAltitude('size')
25
25
  .pointColor('color');
package/example/choropleth-countries/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -23,8 +23,8 @@
23
23
  colorScale.domain([0, maxVal]);
24
24
 
25
25
  const world = new Globe(document.getElementById('globeViz'))
26
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
27
- .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
26
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
27
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')
28
28
  .lineHoverPrecision(0)
29
29
  .polygonsData(countries.features.filter(d => d.properties.ISO_A2 !== 'AQ'))
30
30
  .polygonAltitude(0.06)
package/example/clouds/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -12,8 +12,8 @@
12
12
  import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const world = new Globe(document.getElementById('globeViz'), { animateIn: false })
15
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
16
- .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png');
15
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg')
16
+ .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png');
17
17
 
18
18
  // Auto-rotate
19
19
  world.controls().autoRotate = true;
package/example/countries-population/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -10,7 +10,7 @@
10
10
 
11
11
  <script>
12
12
  const world = new Globe(document.getElementById('globeViz'))
13
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
13
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
14
14
  .pointOfView({ altitude: 4 }, 5000)
15
15
  .polygonCapColor(feat => 'rgba(200, 0, 0, 0.6)')
16
16
  .polygonSideColor(() => 'rgba(0, 100, 0, 0.05)')
package/example/custom-globe-styling/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -12,14 +12,14 @@
12
12
  import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const world = new Globe(document.getElementById('globeViz'))
15
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
16
- .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
17
- .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
15
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg')
16
+ .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
17
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png');
18
18
 
19
19
  // custom globe material
20
20
  const globeMaterial = world.globeMaterial();
21
21
  globeMaterial.bumpScale = 10;
22
- new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-water.png', texture => {
22
+ new THREE.TextureLoader().load('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-water.png', texture => {
23
23
  globeMaterial.specularMap = texture;
24
24
  globeMaterial.specular = new THREE.Color('grey');
25
25
  globeMaterial.shininess = 15;
package/example/custom-layer/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -22,8 +22,8 @@
22
22
  }));
23
23
 
24
24
  const world = new Globe(document.getElementById('globeViz'))
25
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
26
- .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
25
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg')
26
+ .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
27
27
  .pointOfView({ altitude: 3.5 })
28
28
  .customLayerData(gData)
29
29
  .customThreeObject(d => new THREE.Mesh(
package/example/day-night-cycle/index.html ADDED
@@ -0,0 +1,128 @@
1
+ <head>
2
+ <style>
3
+ body { margin: 0; }
4
+
5
+ #time {
6
+ position: absolute;
7
+ bottom: 8px;
8
+ left: 8px;
9
+ color: lightblue;
10
+ font-family: monospace;
11
+ }
12
+ </style>
13
+
14
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
15
+ <!-- <script src="../../dist/globe.gl.js"></script>-->
16
+ </head>
17
+
18
+ <body>
19
+ <div id="globeViz"></div>
20
+ <div id="time"></div>
21
+
22
+ <script type="module">
23
+ import { TextureLoader, ShaderMaterial, Vector2 } from 'https://esm.sh/three';
24
+ import * as solar from 'https://esm.sh/solar-calculator';
25
+
26
+ const VELOCITY = 1; // minutes per frame
27
+
28
+ // Custom shader: Blends night and day images to simulate day/night cycle
29
+ const dayNightShader = {
30
+ vertexShader: `
31
+ varying vec3 vNormal;
32
+ varying vec2 vUv;
33
+ void main() {
34
+ vNormal = normalize(normalMatrix * normal);
35
+ vUv = uv;
36
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
37
+ }
38
+ `,
39
+ fragmentShader: `
40
+ #define PI 3.141592653589793
41
+ uniform sampler2D dayTexture;
42
+ uniform sampler2D nightTexture;
43
+ uniform vec2 sunPosition;
44
+ uniform vec2 globeRotation;
45
+ varying vec3 vNormal;
46
+ varying vec2 vUv;
47
+
48
+ float toRad(in float a) {
49
+ return a * PI / 180.0;
50
+ }
51
+
52
+ vec3 Polar2Cartesian(in vec2 c) { // [lng, lat]
53
+ float theta = toRad(90.0 - c.x);
54
+ float phi = toRad(90.0 - c.y);
55
+ return vec3( // x,y,z
56
+ sin(phi) * cos(theta),
57
+ cos(phi),
58
+ sin(phi) * sin(theta)
59
+ );
60
+ }
61
+
62
+ void main() {
63
+ float invLon = toRad(globeRotation.x);
64
+ float invLat = -toRad(globeRotation.y);
65
+ mat3 rotX = mat3(
66
+ 1, 0, 0,
67
+ 0, cos(invLat), -sin(invLat),
68
+ 0, sin(invLat), cos(invLat)
69
+ );
70
+ mat3 rotY = mat3(
71
+ cos(invLon), 0, sin(invLon),
72
+ 0, 1, 0,
73
+ -sin(invLon), 0, cos(invLon)
74
+ );
75
+ vec3 rotatedSunDirection = rotX * rotY * Polar2Cartesian(sunPosition);
76
+ float intensity = dot(normalize(vNormal), normalize(rotatedSunDirection));
77
+ vec4 dayColor = texture2D(dayTexture, vUv);
78
+ vec4 nightColor = texture2D(nightTexture, vUv);
79
+ float blendFactor = smoothstep(-0.1, 0.1, intensity);
80
+ gl_FragColor = mix(nightColor, dayColor, blendFactor);
81
+ }
82
+ `
83
+ };
84
+
85
+ const sunPosAt = dt => {
86
+ const day = new Date(+dt).setUTCHours(0, 0, 0, 0);
87
+ const t = solar.century(dt);
88
+ const longitude = (day - dt) / 864e5 * 360 - 180;
89
+ return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
90
+ };
91
+
92
+ let dt = +new Date();
93
+ const timeEl = document.getElementById('time');
94
+
95
+ const world = new Globe(document.getElementById('globeViz'));
96
+
97
+ Promise.all([
98
+ new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-day.jpg'),
99
+ new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
100
+ ]).then(([dayTexture, nightTexture]) => {
101
+ const material = new ShaderMaterial({
102
+ uniforms: {
103
+ dayTexture: { value: dayTexture },
104
+ nightTexture: { value: nightTexture },
105
+ sunPosition: { value: new Vector2() },
106
+ globeRotation: { value: new Vector2() }
107
+ },
108
+ vertexShader: dayNightShader.vertexShader,
109
+ fragmentShader: dayNightShader.fragmentShader
110
+ });
111
+
112
+ world.globeMaterial(material)
113
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')
114
+ // Update globe rotation on shader
115
+ .onZoom(({ lng, lat }) => material.uniforms.globeRotation.value.set(lng, lat));
116
+
117
+ requestAnimationFrame(() =>
118
+ (function animate() {
119
+ // animate time of day
120
+ dt += VELOCITY * 60 * 1000;
121
+ timeEl.textContent = new Date(dt).toLocaleString();
122
+ material.uniforms.sunPosition.value.set(...sunPosAt(dt));
123
+ requestAnimationFrame(animate);
124
+ })()
125
+ );
126
+ });
127
+ </script>
128
+ </body>
package/example/earth-shield/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -12,7 +12,7 @@
12
12
  const shieldRing = { lat: 90, lng: 0 };
13
13
 
14
14
  const globe = new Globe(document.getElementById('globeViz'))
15
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
15
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
16
16
  .ringsData([shieldRing])
17
17
  .ringAltitude(0.25)
18
18
  .ringColor(() => 'lightblue')
package/example/earthquakes/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -17,7 +17,7 @@
17
17
  .clamp(true);
18
18
 
19
19
  const myGlobe = new Globe(document.getElementById('globeViz'))
20
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
20
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
21
21
  .hexBinPointLat(d => d.geometry.coordinates[1])
22
22
  .hexBinPointLng(d => d.geometry.coordinates[0])
23
23
  .hexBinPointWeight(d => d.properties.mag)
package/example/emit-arcs-on-click/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -16,7 +16,7 @@
16
16
  const RING_PROPAGATION_SPEED = 5; // deg/sec
17
17
 
18
18
  const globe = new Globe(document.getElementById('globeViz'))
19
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
19
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
20
20
  .arcColor(() => 'darkOrange')
21
21
  .onGlobeClick(emitArc)
22
22
  .arcDashLength(ARC_REL_LEN)
package/example/heatmap/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -18,7 +18,7 @@
18
18
  }));
19
19
 
20
20
  const world = new Globe(document.getElementById('globeViz'))
21
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
21
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
22
22
  .heatmapsData([gData])
23
23
  .heatmapPointLat('lat')
24
24
  .heatmapPointLng('lng')
package/example/hexed-polygons/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -12,7 +12,7 @@
12
12
  fetch('../datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
13
13
  {
14
14
  const world = new Globe(document.getElementById('globeViz'))
15
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
15
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
16
16
  .hexPolygonsData(countries.features)
17
17
  .hexPolygonResolution(3)
18
18
  .hexPolygonMargin(0.3)
package/example/hollow-globe/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -17,7 +17,7 @@
17
17
  .showGlobe(false)
18
18
  .showAtmosphere(false);
19
19
 
20
- fetch('//unpkg.com/world-atlas/land-110m.json').then(res => res.json())
20
+ fetch('//cdn.jsdelivr.net/npm/world-atlas/land-110m.json').then(res => res.json())
21
21
  .then(landTopo => {
22
22
  world
23
23
  .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
package/example/html-markers/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -24,7 +24,7 @@
24
24
  }));
25
25
 
26
26
  new Globe(document.getElementById('globeViz'))
27
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
27
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
28
28
  .htmlElementsData(gData)
29
29
  .htmlElement(d => {
30
30
  const el = document.createElement('div');
package/example/moon-landing-sites/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -18,7 +18,7 @@
18
18
  const moon = new Globe(document.getElementById('globeViz'))
19
19
  .globeImageUrl('./lunar_surface.jpg')
20
20
  .bumpImageUrl('./lunar_bumpmap.jpg')
21
- .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
21
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')
22
22
  .showGraticules(true)
23
23
  .showAtmosphere(false) // moon has no atmosphere
24
24
  .labelText('label')
package/example/population-heatmap/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -12,7 +12,7 @@
12
12
  import { csvParse } from 'https://esm.sh/d3-dsv';
13
13
 
14
14
  const world = new Globe(document.getElementById('globeViz'))
15
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
15
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
16
16
  .heatmapPointLat('lat')
17
17
  .heatmapPointLng('lng')
18
18
  .heatmapPointWeight('pop')
package/example/random-arcs/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -20,7 +20,7 @@
20
20
  }));
21
21
 
22
22
  new Globe(document.getElementById('globeViz'))
23
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
23
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
24
24
  .arcsData(arcsData)
25
25
  .arcColor('color')
26
26
  .arcDashLength(() => Math.random())
package/example/random-paths/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -30,8 +30,8 @@
30
30
  });
31
31
 
32
32
  const globe = new Globe(document.getElementById('globeViz'))
33
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
34
- .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
33
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
34
+ .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
35
35
  .pathsData(gData)
36
36
  .pathColor(() => ['rgba(0,0,255,0.6)', 'rgba(255,0,0,0.6)'])
37
37
  .pathDashLength(0.01)
package/example/random-rings/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -22,7 +22,7 @@
22
22
  const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;
23
23
 
24
24
  const globe = new Globe(document.getElementById('globeViz'))
25
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
25
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
26
26
  .ringsData(gData)
27
27
  .ringColor(() => colorInterpolator)
28
28
  .ringMaxRadius('maxR')
package/example/satellites/index.html CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
  </style>
17
17
 
18
- <script src="//unpkg.com/globe.gl"></script>
18
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
19
19
  <!-- <script src="../../dist/globe.gl.js"></script>-->
20
20
  </head>
21
21
 
@@ -32,7 +32,7 @@
32
32
  const timeLogger = document.getElementById('time-log');
33
33
 
34
34
  const world = new Globe(document.getElementById('chart'))
35
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
35
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg')
36
36
  .particleLat('lat')
37
37
  .particleLng('lng')
38
38
  .particleAltitude('alt')
package/example/solar-terminator/index.html CHANGED
@@ -1,19 +1,17 @@
1
1
  <head>
2
2
  <style>
3
- body {
4
- margin: 0;
5
- font-family: SansSerif;
6
- }
3
+ body { margin: 0; }
7
4
 
8
5
  #time {
9
6
  position: absolute;
10
7
  bottom: 8px;
11
8
  left: 8px;
12
9
  color: lightblue;
10
+ font-family: monospace;
13
11
  }
14
12
  </style>
15
13
 
16
- <script src="//unpkg.com/globe.gl"></script>
14
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
17
15
  <!-- <script src="../../dist/globe.gl.js"></script>-->
18
16
  </head>
19
17
 
@@ -39,7 +37,7 @@
39
37
  const timeEl = document.getElementById('time');
40
38
 
41
39
  const world = new Globe(document.getElementById('globeViz'))
42
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
40
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
43
41
  .tilesData([solarTile])
44
42
  .tileLng(d => d.pos[0])
45
43
  .tileLat(d => d.pos[1])
package/example/submarine-cables/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -10,9 +10,9 @@
10
10
 
11
11
  <script>
12
12
  const globe = new Globe(document.getElementById('globeViz'))
13
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
14
- .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
15
- .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png');
13
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
14
+ .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
15
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png');
16
16
 
17
17
  // from https://www.submarinecablemap.com
18
18
  fetch('//http-proxy.vastur.com?url=https://www.submarinecablemap.com/api/v3/cable/cable-geo.json')
package/example/tile-engine/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
package/example/tiles/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
package/example/volcanoes/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/globe.gl"></script>
4
+ <script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
5
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
6
6
  </head>
7
7
 
@@ -26,8 +26,8 @@
26
26
  `;
27
27
 
28
28
  const myGlobe = new Globe(document.getElementById('globeViz'))
29
- .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
30
- .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
29
+ .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
30
+ .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')
31
31
  .pointLat('lat')
32
32
  .pointLng('lon')
33
33
  .pointAltitude(getAlt)