Trying to FlyTo a KML file

[Dylan Tusler]

I can't get my page to fly to the loaded KML.

I'd just like a fly-to once the kml is loaded. The KML is loading fine, but the fly isn't happening. No errors on the page.

Using:

      function init() {

        var viewer = new Cesium.Viewer('cesiumContainer');

        var datasource = Cesium.KmlDataSource.load('http://localhost:1235/kmltracks/t19828.0.kml');

        viewer.dataSources.add(datasource);

        viewer.flyTo(datasource);

      }

Effect should be similar to: http://www.ka72.com/viewge.aspx?fid=19828&tid=0 (the site I am replacing.)

Dylan.

[Dylan Tusler]

Slightly amended code to avoid silly reference to the promise returned from the load. Still doesn't work, though.

      function init() {

        Cesium.BingMapsApi.defaultKey = "Aq5pmKsnSXFXAx1V7h5v4CtsQZUOt7F0To9ws4beFtzlj2Zj2a-ZbcoRBWTy4lFg";

        var viewer = new Cesium.Viewer('cesiumContainer');

        var datasource = new Cesium.KmlDataSource();

        datasource.load('http://localhost:61847/kmltracks/t19828.5.kml');

        viewer.dataSources.add(datasource);

        viewer.flyTo(datasource);

[Willem]

I think the datasource is added asynchronously, so you'll need to use the Promise to wait for completion, and then call the flyTo().

See the 'gx KML extensions - Bike Ride' example in SandCastle http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=KML.html&label=DataSources

Willem

[Dylan Tusler]

I was working through the bike rider example trimming it down to resemble my usage, and likewise couldn't get that to flyTo the example. Banging my head.

Even though the documentation says that flyTo works with a datasource, that doesn't seem to be entirely true. I had to select a subset of the datasource.

This code works. You have to select the entities.values[0] first. (If you have an entity in the kml file with an id them you can use getById like in the bike rider example at sandcastle, but my files don't have that.):

      function init() {

        var viewer = new Cesium.Viewer('cesiumContainer');

        var datasource = new Cesium.KmlDataSource();

        viewer.dataSources.add(datasource.load('http://localhost:1235/kmltracks/t19828.0.kml')).then(function(datasource) {

          var maintrack = datasource.entities.values[0];

          viewer.flyTo(maintrack);

        });

      }

[Matthew Amato]

It's behaving as designed, but not as intended.  Right now flyTo/zoomTo fail if the entity has no visualization in the current scene.  This has the unintended consequence of something like an KML folder entity causing zooming to an entire data source to fail.  I plan on fixing this in 1.8 by having zoomTo be a best effort and only failing if there is literally nowhere to zoom to for the current time.

--
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.

[Dylan Tusler]

Thanks, that makes sense. I was just frustrated by spending a day on it, as you can imagine.

Is there any control over a fly-to? I can slow the descent, but many of my tracks are in Australia, which means that when the fly-to commences over northern USA, it does this weird double bump kind of trip, and then you're suddenly staring at the track up close, with no sense of having moved smoothly. Whereas tracks in the northern USA fly-to very nicely. Perhaps it is a matter of starting up with the global "home" view more centered over the final location?

Dylan.

[Matthew Amato]

Currently you can control the duration of the flight and the final heading/pitch/range from the object.  The doc has full details: http://cesiumjs.org/Cesium/Build/Documentation/Viewer.html#flyTo

The actual path generated is known to be sub-optimal and we definitely have an item on the roadmap to improve camera flights, but right now we are concentrating on vector data on terrain, so I can't give you an ETA on it.  We are more than happy to accept pull requests if someone wanted to work on them.

[Dylan Tusler]

Thanks, I've found a sweet spot here. I do a 2sec fly-to to get around the globe to the right longitude and 45 degree angle, then a 6 sec fly-to the actual track. It works well enough for the moment.

See http://ka72.com/viewge.aspx?fid=111024&tid=0 to see it in action.

It took me some time to work out how to chain the flyTos, there were no examples of that anywhere. For reference here's my code (minus Bing maps key.)

	var viewer = new Cesium.Viewer('cesiumContainer', {
	animation: false,
	timeline: false,
	homeButton: false

	});
	var datasource = new Cesium.KmlDataSource();

	var terrainProvider = new Cesium.CesiumTerrainProvider({
	url: '//assets.agi.com/stk-terrain/world',
	requestWaterMask: false
	});
	viewer.terrainProvider = terrainProvider;
	viewer.dataSources.add(datasource.load('http://ka72.com/kml.asmx/GetFile?fileId=111024&trackId=0')).then(function(datasource) {

var maintrack = datasource.entities.values[0];

	viewer.flyTo(maintrack, { duration: 2.0, offset: { heading: 0, pitch: Cesium.Math.toRadians(-45), range: 9000000 } }).then(function () {
	viewer.flyTo(maintrack, { duration: 6.0 });
	});
	});

Thanks for developing such a nice library. I'm going to enjoy working with it, I'm sure.

Dylan.

[dieterv...@gmail.com]

Hi Matthew,

Congratulations on your achievements with Cesium so far. I'm really impressed by your effort (and results) here and on github.

I'm trying to migrating a Google Earth api instance to Cesium. To be precise I'm trying to combine the baselayerpicker example in https://groups.google.com/forum/#!searchin/cesium-dev/providerviewmodels/cesium-dev/2UYkQyA7amU/ULsyQSGbDowJ and the 3D model tutorial and .
Dylan Tusler's flyto-solution in https://groups.google.com/d/msg/cesium-dev/2rB2xGh8zqM/DAY3GOc8-acJ

I succesfully installed cesium 1.9 , converted a collada model and built a cesium scene with a billboard marker and infoBox and got myself a Bing maps api key. The model and infoBox and billboard-marker all work fine and all relative pathnames are correct) but I'ḿ stuck with these . . .

. . . Issues:
- tiles of selected ImageryProviders won't load in online version. Whilst in local build they do.
- (related?) Imagery provider icons in baselayerpicker won't load (while credits, tooltips and Bing creditlogo do)
- I can't figure out how 'Onclick' to fly smoothly to my scene like in https://groups.google.com/d/msg/cesium-dev/2rB2xGh8zqM/DAY3GOc8-acJ to flyto my model or Billboard entity.
- I had to kill the terrain imagery layer because it made my model and billboard hover above the ground.

Because this probably is a comon set of issues for a lot of curious Google Earth (API) fans, I'm bold enough to post it here.

Thanks in advance for taking a look at my code below.

Best regards,
Dieter

---------
<!DOCTYPE html>

<html>
<head>
<title>cesium issues 150520</title>
<script src="../../../Cesium/Cesium.js"></script>
<style>
@import url(../../../Cesium/Widgets/widgets.css);
</style>

</head>
<body onload="init();">


<h3>test baselayer picker + flyto + plus model, marker and infoBox</h3>

<div id="cesiumContainer" width="600" height="500"></div>

<!-- Keuze uit imagery providers -->
<script type="text/javascript">
function createImageryProviderViewModels() {
var providerViewModels = [];
providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/bingAerial.png'),
tooltip: 'Bing Maps aerial imagery \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial with Labels',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/bingAerialLabels.png'),
tooltip: 'Bing Maps aerial imagery with label overlays \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'ESRI World Imagery',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/esriWorldImagery.png'),
tooltip: '\
World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution \
satellite imagery worldwide. The map includes NASA Blue Marble: Next Generation 500m resolution imagery at small scales \
(above 1:1,000,000), i-cubed 15m eSAT imagery at medium-to-large scales (down to 1:70,000) for the world, and USGS 15m Landsat \
imagery for Antarctica. The map features 0.3m resolution imagery in the continental United States and 0.6m resolution imagery in \
parts of Western Europe from DigitalGlobe. In other parts of the world, 1 meter resolution imagery is available from GeoEye IKONOS, \
i-cubed Nationwide Prime, Getmapping, AeroGRID, IGN Spain, and IGP Portugal. Additionally, imagery at different resolutions has been \
contributed by the GIS User Community.\nhttp://www.esri.com',
creationFunction: function () {
return new Cesium.ArcGisMapServerImageryProvider({
url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'ESRI World Street Map',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/esriWorldStreetMap.png'),
tooltip: '\
This worldwide street map presents highway-level data for the world. Street-level data includes the United States; much of \
Canada; Japan; most countries in Europe; Australia and New Zealand; India; parts of South America including Argentina, Brazil, \
Chile, Colombia, and Venezuela; Ghana; and parts of southern Africa including Botswana, Lesotho, Namibia, South Africa, and Swaziland.\n\
http://www.esri.com',
creationFunction: function () {
return new Cesium.ArcGisMapServerImageryProvider({
url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Stamen Watercolor',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/stamenWatercolor.png'),
tooltip: 'Reminiscent of hand drawn maps, Stamen watercolor maps apply raster effect \
area washes and organic edges over a paper texture to add warm pop to any map.\nhttp://maps.stamen.com',
creationFunction: function () {
return new Cesium.OpenStreetMapImageryProvider({
url: '//stamen-tiles.a.ssl.fastly.net/watercolor/',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Stamen Toner',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/stamenToner.png'),
tooltip: 'A high contrast black and white map.\nhttp://maps.stamen.com',
creationFunction: function () {
return new Cesium.OpenStreetMapImageryProvider({
url: '//stamen-tiles.a.ssl.fastly.net/toner/',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
});
}
}));

return providerViewModels;
}

//Bing maps API key
function init() {

// My Bing api key. Why didn't passing this in 'return new Cesium.BingMapsImageryProvider' work?
Cesium.BingMapsApi.defaultKey = "AvOWbRr1xyAtB6hMsKOZDBX03gwAzXoIqhwJBLAtnS1HIrZaLn4toSgCC6MkNFkZ";

var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
timeline: false,

homeButton: false,
imageryProviderViewModels: createImageryProviderViewModels()

});
var baseLayerPickerViewModel = viewer.baseLayerPicker.viewModel;
baseLayerPickerViewModel.selectedImagery = baseLayerPickerViewModel.imageryProviderViewModels[0];
//scene zonder startup functie
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(5.3917, 52.1821, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : 'model.gltf',
modelMatrix : modelMatrix,
scale : 1.0
}));
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(5.3915, 52.1819),
billboard :{
image : 'justicon.gif'
},
name : 'somename',
description :
'<div style="text-align:center; padding:15px">sometext</div>' +
'<img src="someimage.jpg" border="0" WIDTH="120" HEIGHT="120">'
});
// I had to shut down terain because it made my model float above ground
//
// var terrainProvider = new Cesium.CesiumTerrainProvider({
// url: '//assets.agi.com/stk-terrain/world',
// requestWaterMask: false
// });
//viewer.terrainProvider = terrainProvider;

// How do I adjust this to flyto my scene above (model,and billboard-marker)? I'd prefer that above creating and flying to an 'invisible rectangle'.
//
// viewer.dataSources.add(datasource.load('http://XXXXXXXXXXX/kml.asmx/GetFile?fileId=XXXXXXXXXXXX&trackId=0')).then(function(datasource) {
// var maintrack = datasource.entities.values[0];
// viewer.flyTo(maintrack, { duration: 2.0, offset: { heading: 0, pitch: Cesium.Math.toRadians(-45), range: 9000000 } }).then(function () {
// viewer.flyTo(maintrack, { duration: 6.0 });
// });
// });

}
</script>

<p>
some other content
</p>

</body>
</html>

------------------
------------------

[Mike LP]

Sorry it took so long to get back to you.

Is it possible to get a really slimmed down sample for Sandcastle that demonstrates the issues?

[dieterv...@gmail.com]

No problem Mike, Thanks for responding. Here's a trimmed down version with my questions commented-out.

I'm trying to migrate a Google Earth api intance that lets you fly (on-button-click) to 6 3D-models. But can't get online what I (more or less) succesfully tested locally (with node.js).

Best regards,
Dieter


---snippet---

<div id="cesiumContainer" width="500" height="400"></div>

<script type="text/javascript">
function createImageryProviderViewModels() {
var providerViewModels = [];
providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial',

// ? why won't the imagery and the images show? I doublechecked the relative pathnames, twice.

iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/bingAerial.png'),
tooltip: 'Bing Maps aerial imagery \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial with Labels',
iconUrl: Cesium.buildModuleUrl('../../../Cesium/Widgets/Images/ImageryProviders/bingAerialLabels.png'),
tooltip: 'Bing Maps aerial imagery with label overlays \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
});
}
}));

return providerViewModels;
}


function init() {

// ? Why didn't passing the key work in above 'return new Cesium.BingMapsImageryProvider' work (like the documentation shows) ?

Cesium.BingMapsApi.defaultKey = "AvOWbRr1xyAtB6hMsKOZDBX03gwAzXoIqhwJBLAtnS1HIrZaLn4toSgCC6MkNFkZ";

var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
timeline: false,
homeButton: false,
imageryProviderViewModels: createImageryProviderViewModels()
});

var baseLayerPickerViewModel = viewer.baseLayerPicker.viewModel;
baseLayerPickerViewModel.selectedImagery = baseLayerPickerViewModel.imageryProviderViewModels[0];

var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(5.3917, 52.1821, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : 'model.gltf',
modelMatrix : modelMatrix,
scale : 1.0
}));
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(5.3915, 52.1819),
billboard :{
image : 'justicon.gif'
},
name : 'somename',
description : '<div style="text-align:center; padding:15px">sometext</div>' +
'<img src="someimage.jpg" border="0" WIDTH="120" HEIGHT="120">'
});

// ? How can I stop my 3d model from floating above the 'stk-terrain? I like flying to the mountains abroad;-)

// var terrainProvider = new Cesium.CesiumTerrainProvider({
// url: '//assets.agi.com/stk-terrain/world',
// requestWaterMask: false
// });
// viewer.terrainProvider = terrainProvider;

// ? How do I adjust Dylan's below solution to 'smoothly' Flyto 6 different 3D-models, each with their own button outside of the viewer?
viewer.dataSources.add(datasource.load('http://XXXXXXXXXXX/kml.asmx/GetFile?fileId=XXXXXXXXXXXX&trackId=0')).then(function(datasource) {

var maintrack = datasource.entities.values[0];

viewer.flyTo(maintrack, { duration: 2.0, offset: { heading: 0, pitch: Cesium.Math.toRadians(-45), range: 9000000 } }).then(function () {

viewer.flyTo(maintrack, { duration: 6.0 });
});
});

}

</script>


--- you're right, less is more ;-) ---

[Mike LP]

So I'll try to answer the questions, pardon if I missed any:

1. Icons: From Sandcastle the url would be '../../Build/Cesium/Widgets/Images/ImageryProviders/bingAerial.png', I'm not sure why that would not be working for you.
   
   
2. BingMapsApi.defaultKey needs to be set either explicitly before hand or as the 'key' property of the BingMapsImageryProvider each time you initialize a new one.
   
   If you're going to create the viewer or CesiumWidget without overriding the default imageryProvider you need to do the explicit assignment of BingMapsApi.defaultKey before you call the new Cesium.viewer().  The viewer and widget default to Bing so they will throw the error message about not having the key initialized.
   
   
3. Terrain Currently there is no automatic method to bind the model to the terrain provided elevations.  It's going to be added this summer, but we don't have a specific release for it scheduled.
   
   
4. FlyTo You'll need to attach a` handler for the 'click' event and then call the viewer.flyTo() on the particular entity you want that button to go to.
   the Picking Sandcastle demo illustrates this well.

[dieterv...@gmail.com]

Thanks Mike,

I've adjusted conform your pointers above but I don't see why I should build a whole sandcastle on my own webserver. I'm confused wether to build from Helloworld.html (like online 'getting started' suggests) or from ..\Buid\Apps\CesiumViewer\index.html (like documenteation in release zip suggests).

What would be my best bet when I plan to implement feature rich GE-tours and timestamped KML collections later?

Precisely because of my lack of understanding of which libraries to call in the header I present my whole html again here. My questions comented out.

I read your good intentions to make (sandcastle) demos 'ready deployable'. That would be very nice indeed!

Thanks in advance,
Dieter


------begin-----
<html>
<head>
<title>cesium issues 150608</title>

<!-- I don't see why I should build a whole sandcastle on my own webserver. I'ḿ confused wether to build from Helloworld.html (like online 'getting started' suggests) or from zip ..\Buid\Apps\CesiumViewer\index.html (like documenteation in release suggests). What would be my best bet when I plan to implement feature rich GE-tours and timestamped KML collections later? -->
<script src="../../Cesium/Cesium.js"></script>
<style>@import url(../../Cesium/Widgets/widgets.css);</style>

</head>
<body onload="init();">

<h3>cesium issues 150608: baselayer picker + flyto + plus model, marker and infoBox</h3>

<!-- How do I populate the onclick events from the script with the least possible (and easiest updatable) script-->
<div id="toolbar">
<input type="button" value="zoom to model1" onclick="??????????" />
<input type="button" value="zoom to model2" onclick="??????????" />
<input type="button" value="zoom to model3" onclick="??????????" />
<input type="button" value="zoom to model4" onclick="??????????" />
<input type="button" value="zoom to model5" onclick="??????????" />
<input type="button" value="zoom to model6" onclick="??????????" />
</div>
<div id="cesiumContainer" width="100%" height="100%"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>



<script type="text/javascript">

<!-- baselayerpicker vars -->

function createImageryProviderViewModels() {
var providerViewModels = [];
providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial',

iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/bingAerial.png'),

tooltip: 'Bing Maps aerial imagery \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Bing Maps Aerial with Labels',

iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/bingAerialLabels.png'),

tooltip: 'Bing Maps aerial imagery with label overlays \nhttp://www.bing.com/maps',
creationFunction: function () {
return new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'ESRI World Imagery',

iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/esriWorldImagery.png'),

tooltip: '\
World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution \
satellite imagery worldwide. The map includes NASA Blue Marble: Next Generation 500m resolution imagery at small scales \
(above 1:1,000,000), i-cubed 15m eSAT imagery at medium-to-large scales (down to 1:70,000) for the world, and USGS 15m Landsat \
imagery for Antarctica. The map features 0.3m resolution imagery in the continental United States and 0.6m resolution imagery in \
parts of Western Europe from DigitalGlobe. In other parts of the world, 1 meter resolution imagery is available from GeoEye IKONOS, \
i-cubed Nationwide Prime, Getmapping, AeroGRID, IGN Spain, and IGP Portugal. Additionally, imagery at different resolutions has been \

contributed by the GIS User Community.\nhttp://www.esri.com',
creationFunction: function () {
return new Cesium.ArcGisMapServerImageryProvider({
url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({

name: 'ESRI World Street Map',

iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/esriWorldStreetMap.png'),

tooltip: '\
This worldwide street map presents highway-level data for the world. Street-level data includes the United States; much of \
Canada; Japan; most countries in Europe; Australia and New Zealand; India; parts of South America including Argentina, Brazil, \
Chile, Colombia, and Venezuela; Ghana; and parts of southern Africa including Botswana, Lesotho, Namibia, South Africa, and Swaziland.\n\

http://www.esri.com',
creationFunction: function () {
return new Cesium.ArcGisMapServerImageryProvider({
url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Stamen Watercolor',
iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/stamenWatercolor.png'),

tooltip: 'Reminiscent of hand drawn maps, Stamen watercolor maps apply raster effect \

area washes and organic edges over a paper texture to add warm pop to any map.\nhttp://maps.stamen.com',
creationFunction: function () {

return new Cesium.OpenStreetMapImageryProvider({
url: '//stamen-tiles.a.ssl.fastly.net/watercolor/',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'

});
}
}));

providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Stamen Toner',
iconUrl: Cesium.buildModuleUrl('../../Cesium/Widgets/Images/ImageryProviders/stamenToner.png'),
tooltip: 'A high contrast black and white map.\nhttp://maps.stamen.com',
creationFunction: function () {

return new Cesium.OpenStreetMapImageryProvider({
url: '//stamen-tiles.a.ssl.fastly.net/toner/',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
});
}
}));

return providerViewModels;
}

// activate terrainprovider as soon as 'binding models to terrain' is implemented
/* var terrainProvider = new Cesium.CesiumTerrainProvider({

url: '//assets.agi.com/stk-terrain/world',
requestWaterMask: false
});
viewer.terrainProvider = terrainProvider;

*/

<!-- I don't know (if or) where exactly I need the (onload) init function. Depends on the headers I suppose? -->
function init() {

// viewersettings

var viewer = new Cesium.Viewer('cesiumContainer', {
animation : false,

fullscreenButton : true,
homeButton : true,
infoBox : true,
sceneModePicker : true,
selectionIndicator : false,
timeline : false,
navigationHelpButton : true,
scene3DOnly : false,
targetFrameRate : 24,
geocoder : true,
imageryProviderViewModels: createImageryProviderViewModels()
});

// set api keys before initialising layers
Cesium.BingMapsApi.defaultKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

var baseLayerPickerViewModel = viewer.baseLayerPicker.viewModel;
baseLayerPickerViewModel.selectedImagery = baseLayerPickerViewModel.imageryProviderViewModels[0];

// set initial Lookat (check to see if/how implementation changed from release 1.10 onwards)
/*
viewer.camera.viewRectangle(Cesium.Rectangle.fromDegrees(114.591,-45.837, 148.970, -5.730));
*/

var scene = viewer.scene;

// adapted from Picking sandcastle demo (NOTE: release 1.9. zip version isn't complete)
// set scene 1 with model and a billboard to acces Infobox of the model
// model 1 of 6
<!-- How to build a toolbar with ZoomTo/Flyto buttons without sandcastle? -->
Sandcastle.addToolbarButton('Flyto 3D-model', function() {
var ellipsoid = scene.globe.ellipsoid;

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(5.3917, 52.1821, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({

url : 'castellum4_cesium.gltf',

modelMatrix : modelMatrix,
scale : 1.0
}));

});
viewer.zoomTo(modelMatrix);
// billboard 1 of 6 (infoBox carries zoomto icon by default)

var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(5.3915, 52.1819),
billboard :{

image : 'i_archi.gif'
},
name : 'some_name',
description :
'<div style="text-align:center; padding:15px">some_text</div>' +
'<img src="some_image.jpg" border="0" WIDTH="120" HEIGHT="120">'
});
// repeat the above for all other models, or perhaps a more brief buildup?

} // end of init()
</script>

<p>
Lorem ipsum dolor sit amet, consecteteur adipiscing. Ullamcorper vel, diam hymenaeos magnis. Quis magnis. Enim, ut metus. Risus id massa luctus. Id. Nibh. Nulla leo elit nec ut montes sociosqu magna nascetur class. Commodo, metus purus luctus nibh at nibh erat vel porta parturient rhoncus duis morbi amet. Venenatis suscipit, elit ad consectetuer sociis, eu imperdiet curae sed vestibulum. Ve ligula placerat. Semper aenean, porta, viverra, orci, pharetra. Mattis a, lobortis per, id tortor nulla tempor. Volutpat lacinia varius ad. Pede purus gravida elit eros lorem. Eros enim hendrerit varius, suscipit potenti egestas nunc orci felis ad non fermentum varius. Iaculis.
</p>

</body>
</html>

------end-------

[Mike LP]

You do not need to actually use/include Sandcastle for an application.

The bare minimum you'll need is your HTML file and from the Build Dir either CesiumUnminified or Cesium.  You would want to use the unminified version during development and minified one on your production site.

within the HTML file you only need to include the widgets.css and the Cesium.js files, setting them relative to where ever you've put the Cesium directory on your web server.

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Use correct character set. -->
 <meta charset="utf-8">
 <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 <script src="/Cesium/Cesium.js"></script>
 <style>
 @import url(/Cesium/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script>
(function() { // onload equivalent
 var viewer = new Cesium.Viewer('cesiumContainer');
 //put the rest of your application here or in a separate javascript file if you prefer.})();
});
 </script>
</body>
</html>

My personal preference for attaching event handlers and general DOM manipulation is jQuery.

[dieterv...@gmail.com]

Thanks for clearing that up Mike. I know where to look now.

You left one question unanswered. I can rephrase now: is calling a body onload function (like init) avoidable for my purpose (above)? Or perhaps standard practice when building a scene (or initial Flyto)

Best regards,
Dieter

[Mike LP]

You don't have to use onload method, or its equivalents, to start your app.  It's considered best practice to do so though as it ensures that the browser has fully loaded the DOM before you start trying to manipulate it. 

Cheers,

-Mike

[dieterv...@gmail.com]

Okay, I guess it's all jquery from here. That may take me a while.
Best regards,
Dieter

[Mike LP]

I like using jQuery and lodash personally.