DEV Community

Cover image for Creating a globe map with visibility features in TypeScript and working with 3D maps globes
Olatunji Ayodele Abidemi
Olatunji Ayodele Abidemi

Posted on

Creating a globe map with visibility features in TypeScript and working with 3D maps globes

import { Globe } from '@openglobus/og/Globe';
import { XYZ } from '@openglobus/og/layer/XYZ';

// Create a new globe instance
const globe = new Globe({
'target': 'globeDiv', // The ID of the div element where the globe will be rendered
'name': 'Earth',
'layers': [
new XYZ({
'isBaseLayer': true,
'url': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
'attribution': 'Data @ OpenStreetMap contributors, ODbL'
})
]
});

// Set the initial view for the globe
globe.setView({
'lat': 0,
'lon': 0,
'alt': 10000000, // Altitude in meters
'duration': 1000 // Duration of the initial animation in milliseconds
});

Top comments (0)