I would like to add links (url) onto my globe

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I have created an instance of the cesium ion viewer and I have added entities to my viewer. I would now like to be able to add a link (from that entity/label) to my website (which is http://www.capitali.org/capitali-drone-app/#/app/preview/4).

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

This is the javascript code I have used for creating a viewer and entity (city):
    
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR.eyJqdGkiOiI3ZTk0OWVmOS03OTNlLTQ1ZmQtYjhlZS0wNDQ1ZTA4MGM1MTQiLCJpZCI6MTI3MzcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYX9.Y5yXWhATrW7MGyDmEOGEgc3DH4gBNOo91';
    var extent = Cesium.Rectangle.fromDegrees(-25.75034722222222,-0.4456061,44.204115292705865,70.20189571441897);
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.3;
   
    var viewer = new Cesium.Viewer('cesiumContainer', {
        scene3DOnly: true,
        selectionIndicator: true,
        baseLayerPicker: false,
        animation: false,
        timeline: false,
        homeButton: true
    });
  
    var imageryLayer = viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3 })
    );

    // SPECIFY Longitude, Latitude

    var dubai = viewer.entities.add({
        name : 'Dubai',
        position : Cesium.Cartesian3.fromDegrees(55.2708, 25.2048),
        point : {
            pixelSize : 10,
            color : Cesium.Color.RED,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 1
        },
        label : {
            text : 'Dubai',
            font : '15pt sans-serif',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            pixelOffset : new Cesium.Cartesian2(0, -9)
        },
    });

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need to do this because I am trying to create a livestreaming website where users can click on locations on the globe and then they are redirected to my website so that they can view a live video of the location.

4. The Cesium version you're using, your operating system and browser.

I am currently using version 1.59 of Cesium ion. I have checked the examples on Sandcastle but I could not find anything I wanted.

2

var dubai = viewer.entities.add({

name : ‘Dubai’,

description : “

View live footage

”,

position : Cesium.Cartesian3.fromDegrees(55.2708, 25.2048),

point : {

pixelSize : 10,

color : Cesium.Color.RED,

outlineColor : Cesium.Color.WHITE,

outlineWidth : 1

},

label : {

text : ‘Dubai’,

font : ‘15pt sans-serif’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth : 2,

verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

pixelOffset : new Cesium.Cartesian2(0, -9)

}

});

I now found out how to do this: I added “description” and put the url there. However, does anyone know why a blank page shows up instead of the contents on the website where it should redirect to? How could this be fixed?

Thanks

3

If you open the browser console, you can see an error there:

Blocked script execution in ‘’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

``

I think this is because CesiumJS creates an iFrame to render the HTML inside the entity’s description. If you want to have it directly go to that page when you click on the Entity, you could create a mouse event handler, use scene.pick to figure out what entity it clicked on, and based on that open the link with JavaScript. Let me know if that helps!