Wow, you remind me, There are streets in St. Louis that are a bit challenging, near the Mississippi for example, but not even close.
Do you happen to know where to look for this popup infoBox 's code, or how to, to resize and format it on the fly? For some buildings there is going to be a lot of text.
infoBox is created in the viewer constructor and infoBox resides in a div called infoBoxContainer
https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Viewer/Viewer.js#L381 (line # for Cesium 1.8)
https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/InfoBox/InfoBox.js#L135 (line # for Cesium 1.8)
“// Measure and set the new custom height, based on text wrapped above.”
Regarding the width, I haven’t see any apps that adjust it’s width. That seems to be a fixed % relative to the overall size of the Cesium div.
https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/InfoBox/InfoBox.css#L6 (line # for Cesium 1.8)
width: 40%;
max-width: 480px;
You can inject this into any SandCastle that uses infoBox to find some info about it after clicking on something that causes it to appear
Sandcastle.addToolbarButton(‘info’, function()
{console.log(viewer.infoBox._element);});
Perhaps selecting an entity has a callback function you can use to make your own custom div? I haven’t looked through the entity selection code yet.
The InfoBox adjusts the width to fit it’s content. You can provide it HTML content that provides it’s own width and styling. For example, notice the custom styling in balloons for the KML Sandcastle demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=KML.html&label=Showcases
You can also override the default styling in your app by overriding the CSS properties in InfoBox.css. There’s no need to modify the file itself, just override the values in your own app’s CSS. For example, if you wanted to override the width/max-width settings you can just add the below with whatever values you want.
.cesium-infoBox {
width: 40%;
max-width: 480px;
}
You could also do
viewer.infoBox._element.style.width=“80%”;
viewer.infoBox._element.style.maxWidth=“800px”;
viewer.infoBox._element.style.overflow=“scroll”; //or “hidden”
since there’s only one infobox, though you’d be using a private property with the underscored name.
Being able to use HTML content would be wonderful.
This link shows, basically, where I am. .
.
http://vcities.ite-stl.org/Cesium/Apps/Sandcastle/gallery/Block512.html
Here is the relevant code:
var building28 = viewer.entities.add({
id: "building28",
name:"Firehouse 512 Built 1888-Demolished 1932",
availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : Cesium.JulianDate.fromIso8601("1888-01-01"),
stop : Cesium.JulianDate.fromIso8601("1932-01-01")
})]),
position: Cesium.Cartesian3.fromDegrees(-90.20276954596574
,38.63089539292937,118.2),
model:{
uri:'../../SampleData/models512/90359.gltf'
}
}
);
When I click on the building28 entity I see the “name” value.
I attached a screen shot firehouse.jpg.
The data at the link is is just play, .
Here is some real data, though not for this firehouse.
I also attached a screenshot firehouse_data.jpg
What I would like to happen is that when I click on the building, an abbreviated version of this Page would appear in the InfoBox rather than just the text “Firehouse 512 Built 1888-Demolished 1932”
On that link that Matt gave http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=KML.html&label=Showcases
The infoBox div has these elements
-title div
-camera button
-exit button
-iframe
The iframe consist of an HTML document.
https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/InfoBox/InfoBox.js#L74
I’m not sure how you set the href of the iframe however.
You don’t. You simple set the entity.description property to whatever HTML snippet you want. You can even have that snippet be an iFrame that embeds another site. Then when you click on an entity, it will load that snippet.
I should have read the entity doc first https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/Entity.js#L94 I noticed that the green selector is off center on some of the buildings (year 1919 west side.) I’m guessing that’s where the model origin is. Is there a way to offset that?
Currently the selection indicator is positioned based on the combined bounding sphere of all visualization associated with that entity. It’s not perfect but it provides the best value most of the time. We may provide a way to override it in the future, but it’s not on anyone short term schedule. You can such off the selectionIndicator widget and plug in your own easily enough that uses whatever metric you want.
I tried typing viewer.selectionIndicator in the console, but then I noticed that Jerrold’s examples are SandCastle apps and I don’t know where the viewer object is buried in SandCastle apps.
Usually the selection indicator is well positioned, but I think the origin point of some of these models is off to the side of the model, not in the center of the model, and the model is the only visualization of the entity.
viewer.selectionIndicator.position probably matches the model’s position
It would be nice if entities provided a ‘origin to model center’ offset (which would default to (0,0,0) ), as origin and center are not always one in the same.
You folks are making this far to easy 
Again, the URL is http://vcities.ite-stl.org/Cesium/Apps/Sandcastle/gallery/Block512.html
Go to year 1919. The two building that have description content are the one on the left corner, which just has HTML, and the fourth building from the left, just after the alley, which has an iframe showing a random Page. There is lots and lots of Web Page Design left to be done before you would actually show this Page but everything is there that we need to go to the next level.
Much Thanks,
I’m glad we could help. It’s nice to witness the progress! I’ve noticed you’re placing everything in SandCastle though. You could probably drop the code into Cesium\Apps\HelloWorld.html to convert to a regular app.
Maybe html content could have an abbreviated version with a show more link like I see many mobile news sites have.
Smith Meats building and it’s twin neighbor seem to have the origin on it’s side, not a big deal though.
It would be nice to resize the The Old Firehouse infoBox content
http://www.w3schools.com/cssref/css3_pr_resize.asp
Then when closing the infoBox maybe make it go back to normal size somehow.
I will work through your suggestions. I have been punting on portability, in particular, since, in the end, all of the Pages will be created dynamically out of a database (and some text files), using a .php generator. Based on our present experience with the current incarnation, the historical data seems to be in a constant state of flux. So static Pages are always out of data, which means access is needed to the database and file system, etc.So leaving the stuff in Sandcastle is less of an issue.Basically, portability has been achieved through forms.For example, http://vcities.umsl.edu/tours/Blocksm.html. on a different project server. Anyway, your point is still important and I will now bite the bullet. Again, thanks.
I would really appreciate it if somebody could help me with this? Some of the buildings in our views are not important and it would be useful if we could turn off the infoBox for those entities.
Plan B would be to work with the selectionIndicator, turn it off for certain entities. I tried
viewer.scene.canvas.addEventListener(‘click’, function(e) {
viewer.selectionIndicator.viewModel.showSelection=false;
});
which does not work.
Is there a way to do this? Also I have not figured out how to compute the entity.id of the entity being clicked.
Thanks,
Hello
I have also a follow up question:
The SceneCameraController tries to prevent the camera from going below terrain. The easiest method is going to overwrite the mouse handlers so you can use the scene.camera object directly. The Camera methods are allowed to go wherever you tell it to regardless of terrain collision.
