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