Replacing the infoBox

2258 views
Skip to first unread message

rezn8d

unread,
Jun 28, 2015, 11:17:40 PM6/28/15
to cesiu...@googlegroups.com
Is there any example code of how one would go about replacing the default infoBox?

Why does the infoBox load everything into an iframe?  Is it for security and sanitization or is it not necessary at all?

The problem I'm having is that I cannot control CSS content inside an iframe, and I would like to have a draggable modal option for the infoBox.

When loading nowCOAST's WMS layer for severe storm warnings, clicking the tiles returns xml data that is invisible unless i set the background to a dark color: http://climateviewer.net/index.html?layersOn=nws-tstorm

Any help would be greatly appreciated. 

I <3 Cesium!

Jim Lee
Climate Viewer 3D

Matthew Amato

unread,
Jun 29, 2015, 8:11:35 PM6/29/15
to cesiu...@googlegroups.com
The InfoBox does indeed run in an iframe for security and sanitation purposes.  You can remove all restrictions by calling the below line of code after creating the view:

viewer.infoBox.frame.removeAttribute('sandbox');

Only do this if you are in complete control of the data that will be loaded into the InfoBox, otherwise it is a security issue.

You can style the infoBox just as easy by injecting any css you want into the viewer.infoBox.frame  for example:

            var cssLink = frameDocument.createElement("link");
            cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
            cssLink.rel = "stylesheet";
            cssLink.type = "text/css";
            viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);

By default, we inject the contents of Widgets/InfoBox/InfoBoxDescription.css

You can also style outer InfoBox properties by overriding the CSS classes defined in  Widgets/InfoBox/InfoBox.css in your own apps css file. I'm not sure if you'll be able to add draggable support in this way, but you can do a bunch of other stuff.

If you want to replace the infoBox completely, then simply pass "infoBox: false" to the Viewer constructor.  It's then up to you to bring up your own widget when an entity is selected.  The InfoBox simply displayed the content of the entity.description property.  You could copy/paste the existing InfoBox code as a starting point.

Hope that helps.


--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Emmanuel Play or Die

unread,
Sep 7, 2016, 10:19:49 AM9/7/16
to cesium-dev
Greetings! I'm not sure if this workflow has been changed, but attempting to remove the sandbox attribute from viewer.infoBox.frame results in an error of "Cannot read property 'frame' of undefined".

Please advise, if possible! Thank you.

Hannah Pinkos

unread,
Sep 8, 2016, 10:14:21 AM9/8/16
to cesium-dev
Hello,

I wasn't able to reproduce this problem.  This code worked for me:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer
.infoBox.frame.removeAttribute('sandbox');

If you're still seeing this issue, can you post a code example to reproduce it?

Thanks,

Hannah

Geoneer

unread,
Sep 19, 2017, 10:27:20 AM9/19/17
to cesium-dev
I'm my situation this did not help. I want to add Google Streetview in the infobox in a <div id="gmap"> - GMAP - </div>. This div is put in the iframe inside the description :

after I created the viewer:

            viewer.infoBox.frame.removeAttribute('sandbox');

This does not help. In the elements of the infobox I still see the iframe. What's wrong there?

 var selectedEntity = new Cesium.Entity();
        selectedEntity.name = title;
        viewer.selectedEntity = selectedEntity;
        selectedEntity.description = theHtml; <- this is a whole set of information which is working fine in my app. 

But when I add GMAP with this code:

var position = { lat: Number(lat), lng: Number(lon) };
                var streetViewService = new google.maps.StreetViewService();
                var latLng = new google.maps.LatLng(Number(lat), Number(lon));
                if (!heading) { heading = googleStreetviewSettings.heading; }  //if the heading value is null, use default value from settings. This happens when clicking on the billboard.
                streetViewService.getPanoramaByLocation(latLng, googleStreetviewSettings.STREETVIEW_MAX_DISTANCE, function (streetViewPanoramaData, status) {
                    LogManager.log(1, 'Put the streetview map in div: ' + div_id);
                    var div = $('#gmap'); <- This is null!!!! This is the problem. I can't get access to the div to put in the GMAP. 


                    var panorama = new google.maps.StreetViewPanorama(
                        div, {
                            position: position,
                            pov: {
                                heading: Number(heading),
                                pitch: Cesium.Math.toRadians(cameraSettings.pitch), //10,
                                zoom: 0
                            }
                        });
                });
            }



So what am I doin wrong?

Scott Hunter

unread,
Sep 19, 2017, 2:26:41 PM9/19/17
to cesiu...@googlegroups.com
An iframe is a separate context from the rest of the page.  This means that the parent context can't naively access elements from the child context.  

Your issue is not specific to Cesium, this is standard browser iframe behavior.  Try reading through the documentation to see how to access elements across iframe boundaries.




To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+unsubscribe@googlegroups.com.

Geoneer

unread,
Sep 19, 2017, 3:51:41 PM9/19/17
to cesium-dev
Hey Scott,

Yeah indeed... that's the situation. I think it's possible to change the type of div of the infobox from iframe to 'normal' div in de sourcecode of cesium. I did dive deep into this, but did not yett change this in the source. 

What happens then is that I'm changing the scope of this and maybe I will make some damage to the reason why the infobox is just inside the iframe. 

Maybe @Hannah knows more about this?

Geoneer

unread,
Sep 20, 2017, 4:05:18 AM9/20/17
to cesium-dev
In the sourcecode of cesium I will disable the 'sandbox' option:

var frame = document.createElement('iframe');
        frame.className = 'cesium-infoBox-iframe';
        //frame.setAttribute('sandbox', 'allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation'); //allow-pointer-lock allow-scripts allow-top-navigation    
        frame.setAttribute('data-bind', 'style : { maxHeight : maxHeightOffset(40) }');
        frame.setAttribute('allowfullscreen', true);
        infoElement.appendChild(frame);

then I build the cesium code all with npm:

call npm run build
call npm run release

hopefully I can get my <div> inside the iframe inside the infobox. So let's try this today..... I keep you informed!
Reply all
Reply to author
Forward
0 new messages