@clairbuoyant/worldwind-react
Version:
An interactive globe for React using NASA's WorldWind Javascript SDK.
59 lines • 2.96 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Globe = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const worldwind_1 = __importDefault(require("@nasaworldwind/worldwind"));
const react_1 = require("react");
const useWorldWindow_1 = require("../../hooks/useWorldWindow");
const globe_constants_1 = require("./globe.constants");
const defaultGlobeProps = {
backgroundColor: globe_constants_1.DEFAULT_BACKGROUND_COLOR,
canvasId: 'worldwind-globe',
is2D: false,
};
const Globe = ({ backgroundColor = defaultGlobeProps.backgroundColor, canvasId: defaultCanvasIdOrFromUser = defaultGlobeProps.canvasId, layers, is2D = defaultGlobeProps.is2D, }) => {
const canvasRef = (0, react_1.useRef)(null);
const [wwdRef, setWwdRef] = (0, useWorldWindow_1.useWorldWindow)();
const style = {
backgroundColor,
height: '100%',
width: '100%',
};
const [canvasId] = (0, react_1.useState)(defaultCanvasIdOrFromUser);
// const [] = useState(defaultBaseUrl); // baseUrl
// const [] = useState(1); // nextLayerId
// const [] = useState(new Map()); // categoryTimestamps
// const [] = useState(null); // roundGlobe
// const [] = useState(null); // flatGlobe
(0, react_1.useEffect)(() => {
// TODO: test re-render behavior w/ and w/o default
setWwdRef(canvasId);
}, [canvasId]);
(0, react_1.useEffect)(() => {
if (wwdRef.current) {
const layers = [
{ layer: new worldwind_1.default.BMNGLayer(), enabled: true },
{ layer: new worldwind_1.default.BMNGLandsatLayer(), enabled: false },
{ layer: new worldwind_1.default.OpenStreetMapImageLayer(), enabled: true },
{ layer: new worldwind_1.default.BingAerialWithLabelsLayer(), enabled: true },
{ layer: new worldwind_1.default.AtmosphereLayer(), enabled: true },
{ layer: new worldwind_1.default.CompassLayer(), enabled: true },
{ layer: new worldwind_1.default.CoordinatesDisplayLayer(wwdRef.current), enabled: true },
{ layer: new worldwind_1.default.ViewControlsLayer(wwdRef.current), enabled: true },
];
for (let i = 0; i < layers.length; i++) {
layers[i].layer.enabled = layers[i].enabled;
wwdRef.current.addLayer(layers[i].layer);
}
if (is2D)
wwdRef.current.globe = new worldwind_1.default.Globe2D();
wwdRef.current.redraw();
}
}, [is2D, wwdRef]);
return ((0, jsx_runtime_1.jsx)("canvas", { id: canvasId, ref: canvasRef, style: style, children: "Your browser does not support HTML5 Canvas." }));
};
exports.Globe = Globe;
//# sourceMappingURL=globe.component.js.map