CODEWITHSUNDEEP
cesiumjs
ChanduRaj
ChanduRaj

Reputation: 161

Adding mini cesium container on Main cesium Container

Is it possible to add a mini cesium container on top of Main cesium container as follows enter image description here.

Both containers should render different information. How this can be achieved in cesium?

Upvotes: 2

Views: 954

Answers (1)

emackey
emackey

Reputation: 12448

Yes, this is possible, but beware that it is a full separate instance of Cesium. This means it takes its own texture memory, GL context, etc. Click "Run code snippet" at the bottom of this for an example.

var mainViewer = new Cesium.Viewer('mainCesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false
});

var insetViewer = new Cesium.Viewer('insetCesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false,
    geocoder: false, baseLayerPicker: false, sceneModePicker: false
});

// Make the inset window display in 2D, to show it's different.
insetViewer.scene.morphTo2D(0);
html, body, #mainCesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}
#insetCesiumContainer {
    position: absolute;
    bottom: 1%;
    right: 2%;
    width: 40%;
    height: 60%;
    border: 1px solid #fff;
    box-shadow: 0 0 4px #fff;
}
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js">
</script>
<div id="mainCesiumContainer"></div>
<div id="insetCesiumContainer"></div>

Upvotes: 3

Related Questions