 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
npm install react-globe.gl
import Globe from 'react-globe.gl';
const Page = () => {
return null
}
export default Page
// src/routes/basic-image.jsx
import Globe from 'react-globe.gl';
import globeImage from '../assets/earth-dark.jpg';
const Page = () => {
const myData = [
{
lat: 29.953204744601763,
lng: -90.08925929478903,
altitude: 0.4,
color: '#00ff33',
},
{
lat: 28.621322361013092,
lng: 77.20347613099612,
altitude: 0.4,
color: '#ff0000',
},
{
lat: -43.1571459086602,
lng: 172.72338919659848,
altitude: 0.4,
color: '#ffff00',
},
];
return (
<div className='cursor-move'>
<Globe globeImageUrl={globeImage} pointsData={myData} pointAltitude='altitude' pointColor='color' />
</div>
);
};
export default Page;
// src/routes/geojson-hexagon.jsx
import Globe from 'react-globe.gl';
import globeJson from '../assets/countries_110m.json';
const Page = () => {
const myData = [
{
lat: 29.953204744601763,
lng: -90.08925929478903,
altitude: 0.4,
color: '#00ff33',
},
{
lat: 28.621322361013092,
lng: 77.20347613099612,
altitude: 0.4,
color: '#ff0000',
},
{
lat: -43.1571459086602,
lng: 172.72338919659848,
altitude: 0.4,
color: '#ffff00',
},
];
return (
<div className='cursor-move'>
<Globe
hexPolygonsData={globeJson.features}
hexPolygonColor={(geometry) => {
return ['#0000ff', '#0000cc', '#000099', '#000066'][geometry.properties.abbrev_len % 4];
}}
pointsData={myData}
pointAltitude='altitude'
pointColor='color'
/>
</div>
);
};
export default Page;
// src/routes/geojson-polygon.jsx
import Globe from 'react-globe.gl';
import globeJson from '../assets/countries_110m.json';
const Page = () => {
const myData = [
{
lat: 29.953204744601763,
lng: -90.08925929478903,
altitude: 0.4,
color: '#00ff33',
},
{
lat: 28.621322361013092,
lng: 77.20347613099612,
altitude: 0.4,
color: '#ff0000',
},
{
lat: -43.1571459086602,
lng: 172.72338919659848,
altitude: 0.4,
color: '#ffff00',
},
];
return (
<div className='cursor-move'>
<Globe
polygonsData={globeJson.features}
polygonCapColor={(geometry) => {
return ['#0000ff', '#0000cc', '#000099', '#000066'][geometry.properties.abbrev_len % 4];
}}
polygonSideColor={(geometry) => {
return ['#0000ff', '#0000cc', '#000099', '#000066'][geometry.properties.abbrev_len % 4];
}}
polygonAltitude={0.08}
pointsData={myData}
pointAltitude='altitude'
pointColor='color'
/>
</div>
);
};
export default Page;
// src/routes/arcs-data.jsx
import Globe from 'react-globe.gl';
import globeImage from '../assets/earth-dark.jpg';
const Page = () => {
const myData = [
{
startLat: 29.953204744601763,
startLng: -90.08925929478903,
endLat: 28.621322361013092,
endLng: 77.20347613099612,
color: ['#00ff33', '#ff0000'],
stroke: 1,
gap: 0.02,
dash: 0.02,
scale: 0.3,
time: 2000,
},
{
startLat: 28.621322361013092,
startLng: 77.20347613099612,
endLat: -43.1571459086602,
endLng: 172.72338919659848,
color: ['#ff0000', '#ffff00'],
stroke: 3,
gap: 0.05,
dash: 0.3,
scale: 0.5,
time: 8000,
},
];
return (
<div className='cursor-move'>
<Globe
globeImageUrl={globeImage}
arcsData={myData}
arcColor='color'
arcStroke='stroke'
arcDashGap='gap'
arcDashLength='dash'
arcAltitudeAutoScale='scale'
arcDashAnimateTime='time'
/>
</div>
);
};
export default Page;
// src/routes/rings-data.jsx
import Globe from 'react-globe.gl';
import hexRgb from 'hex-rgb';
import globeImage from '../assets/earth-dark.jpg';
const Page = () => {
const myData = [
{
lat: 29.953204744601763,
lng: -90.08925929478903,
radius: 20,
color: '#00ff33',
speed: 10,
repeat: 500,
},
{
lat: 28.621322361013092,
lng: 77.20347613099612,
radius: 40,
color: '#ffff00',
speed: 20,
repeat: 500,
},
{
lat: -43.1571459086602,
lng: 172.72338919659848,
radius: 5,
color: '#ff0000',
speed: 2,
repeat: 1000,
},
];
return (
<div className='cursor-move'>
<Globe
globeImageUrl={globeImage}
ringsData={myData}
ringMaxRadius='radius'
ringColor={(ring) => (t) => {
const { red, green, blue } = hexRgb(ring.color);
return `rgba(${red},${green},${blue},${Math.sqrt(1 - t)})`;
}}
ringPropagationSpeed='speed'
ringRepeatPeriod='repeat'
/>
</div>
);
};
export default Page;
// src/routes/html-marker.jsx
import Globe from 'react-globe.gl';
import globeImage from '../assets/earth-dark.jpg';
const Page = () => {
const myData = [
{
city: 'New Orleans',
lat: 29.953204744601763,
lng: -90.08925929478903,
altitude: 0.1,
color: '#00ff33',
},
{
city: 'New Delhi',
lat: 28.621322361013092,
lng: 77.20347613099612,
altitude: 0.1,
color: '#ff0000',
},
{
city: 'New Zealand',
lat: -43.1571459086602,
lng: 172.72338919659848,
altitude: 0.1,
color: '#ffff00',
},
];
const icon = `
`;
return (
<div className='cursor-move'>
<Globe
globeImageUrl={globeImage}
htmlElementsData={myData}
htmlAltitude='altitude'
htmlElement={(data) => {
const { city, color } = data;
const element = document.createElement('div');
element.style.color = color;
element.innerHTML = `
<div>
<svg viewBox="0 0 24 24" style="width:24px;margin:0 auto;">
<path fill="currentColor" fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
</svg>
<strong style="font-size:10px;text-align:center">${city}</strong>
</div>`;
return element;
}}
/>
</div>
);
};
export default Page;
// src/routes/custom-layer
import { useRef } from 'react';
import Globe from 'react-globe.gl';
import * as THREE from 'three';
import globeImage from '../assets/earth-dark.jpg';
const Page = () => {
const globeEl = useRef(null);
const myData = [
{
lat: 29.953204744601763,
lng: -90.08925929478903,
altitude: 0.4,
color: '#00ff33',
},
{
lat: 28.621322361013092,
lng: 77.20347613099612,
altitude: 0.4,
color: '#ff0000',
},
{
lat: -43.1571459086602,
lng: 172.72338919659848,
altitude: 0.4,
color: '#ffff00',
},
];
return (
<div className='cursor-move'>
<Globe
ref={globeEl}
globeImageUrl={globeImage}
pointsData={myData}
pointAltitude='altitude'
pointColor='color'
customLayerData={[...Array(500).keys()].map(() => ({
lat: (Math.random() - 1) * 360,
lng: (Math.random() - 1) * 360,
altitude: Math.random() * 2,
size: Math.random() * 1,
color: '#9999cc',
}))}
customThreeObject={(data) => {
const { size, color } = data;
return new THREE.Mesh(new THREE.SphereGeometry(size), new THREE.MeshBasicMaterial({ color }));
}}
customThreeObjectUpdate={(obj, data) => {
const { lat, lng, altitude } = data;
return Object.assign(obj.position, globeEl.current?.getCoords(lat, lng, altitude));
}}
/>
</div>
);
};
export default Page;
// src/routes/finished.jsx
import { useRef } from 'react';
import Globe from 'react-globe.gl';
import * as THREE from 'three';
import * as topojson from 'topojson-client';
import landTopology from '../assets/land_10m.json';
import pointsData from '../assets/random-locations.json';
import texture from '../assets/texture.jpg';
const min = 1000;
const max = 4000;
const sliceData = pointsData.sort(() => (Math.random() > 0.5 ? 1 : -1)).slice(20, 90);
const arcsData = sliceData.map(() => {
const randStart = Math.floor(Math.random() * sliceData.length);
const randEnd = Math.floor(Math.random() * sliceData.length);
const randTime = Math.floor(Math.random() * (max - min + 1) + min);
return {
startLat: sliceData[randStart].lat,
startLng: sliceData[randStart].lng,
endLat: sliceData[randEnd].lat,
endLng: sliceData[randEnd].lng,
time: randTime,
color: ['#ffffff00', '#faf7e6', '#ffffff00'],
};
});
const Page = () => {
const globeRef = useRef(null);
const globeReady = () => {
if (globeRef.current) {
globeRef.current.controls().autoRotate = true;
globeRef.current.controls().enableZoom = false;
globeRef.current.pointOfView({
lat: 19.054339351561637,
lng: -50.421161072148465,
altitude: 1.8,
});
}
};
return (
<div className='cursor-move'>
<Globe
ref={globeRef}
onGlobeReady={globeReady}
backgroundColor='#08070e'
rendererConfig={{ antialias: true, alpha: true }}
globeMaterial={
new THREE.MeshPhongMaterial({
color: '#1a2033',
opacity: 0.95,
transparent: true,
})
}
atmosphereColor='#5784a7'
atmosphereAltitude={0.5}
pointsMerge={true}
pointsData={pointsData}
pointAltitude={0.01}
pointRadius={0.2}
pointResolution={5}
pointColor={() => '#eed31f'}
arcsData={arcsData}
arcAltitudeAutoScale={0.3}
arcColor='color'
arcStroke={0.5}
arcDashGap={2}
arcDashAnimateTime='time'
polygonsData={topojson.feature(landTopology, landTopology.objects.land).features}
polygonSideColor={() => '#00000000'}
polygonCapMaterial={
new THREE.MeshPhongMaterial({
color: '#49ac8f',
side: THREE.DoubleSide,
map: new THREE.TextureLoader().load(texture),
})
}
polygonAltitude={0.01}
customLayerData={[...Array(500).keys()].map(() => ({
lat: (Math.random() - 1) * 360,
lng: (Math.random() - 1) * 360,
altitude: Math.random() * 2,
size: Math.random() * 0.4,
color: '#faadfd',
}))}
customThreeObject={(sliceData) => {
const { size, color } = sliceData;
return new THREE.Mesh(new THREE.SphereGeometry(size), new THREE.MeshBasicMaterial({ color }));
}}
customThreeObjectUpdate={(obj, sliceData) => {
const { lat, lng, altitude } = sliceData;
return Object.assign(obj.position, globeRef.current?.getCoords(lat, lng, altitude));
}}
/>
</div>
);
};
export default Page;
