CESIUM Globe

CESIUM Globe Viewer

<?php
// Add this code to a new WPCode snippet in WordPress (set to "Auto Insert" or use the shortcode manually)
function cesium_globe_shortcode() {
    ob_start(); // Start output buffering
    ?>
    <div id="cesiumContainer" style="width:100%; height:600px;"></div>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script>
        // Replace 'YOUR_CESIUM_ION_ACCESS_TOKEN' with your Cesium Ion access token
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhM2NjNTNiMS0xOWEwLTRmOTktOWQzMy1kMzhmYjZiMmRjYjgiLCJpZCI6MzIyOTEzLCJpYXQiOjE3NTI5Mjg0OTV9.oi0TtKSUC1V1VJJ1KiH_pHvRkyWEmLsrPpGCNXAQnMs';

        // Initialize the Cesium Viewer
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }), // Default satellite imagery
            baseLayerPicker: false, // Disable base layer picker
            geocoder: false, // Disable search bar
            homeButton: false, // Disable home button
            sceneModePicker: false, // Disable scene mode picker
            navigationHelpButton: false, // Disable help button
            animation: false, // Disable animation widget
            timeline: false, // Disable timeline
            fullscreenButton: false // Disable fullscreen button
        });

        // Set initial camera position to view the entire globe
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(0, 0, 15000000), // Center of globe, high altitude
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90), // Look straight down
                roll: 0.0
            }
        });

        // Rotate the globe by animating the camera
        let heading = 0;
        function rotateGlobe() {
            heading += 0.1; // Adjust rotation speed (degrees per frame)
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(0, 0, 15000000),
                orientation: {
                    heading: Cesium.Math.toRadians(heading),
                    pitch: Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            });
            requestAnimationFrame(rotateGlobe); // Continuous rotation
        }
        rotateGlobe();
    </script>
    <?php
    return ob_get_clean(); // Return the buffered content
}

// Register the shortcode
add_shortcode('cesium_globe', 'cesium_globe_shortcode');

// Enqueue CesiumJS assets (optional, if you prefer loading via WordPress enqueue system)
function enqueue_cesium_assets() {
    if (has_shortcode(get_post()->post_content, 'cesium_globe')) {
        wp_enqueue_script('cesium-js', 'https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Cesium.js', [], null, true);
        wp_enqueue_style('cesium-widgets', 'https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Widgets/widgets.css');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_cesium_assets');