Cleanup CZML custom properties demo

Apps/Sandcastle/gallery/CZML Custom Properties.html

@@ -22,7 +22,10 @@
 </style>
 <div id="cesiumContainer" class="fullSize"></div>
 <div id="loadingOverlay"><h1>Loading...</h1></div>
-<div id="toolbar"></div>
+<div id="toolbar">
+    <div id="propertiesMenu"></div>
+</div>
+</div>
 
 <script id="cesium_sandcastle_script">
 function startup(Cesium) {
@@ -33,45 +36,48 @@
     "name" : "CZML Custom Properties",
     "version" : "1.0",
     "clock": {
-        "interval": "1990/2010",
-        "currentTime": "1990",
-        "multiplier": 100000000
+        "interval": "1970/2010",
+        "currentTime": "1970",
+        "multiplier": 500000000
     }
 }, {
     "id" : "custom_property_object",
     "name" : "An object with custom properties",
     "properties" : {
         "constant_property" : true,
         "population_intervals" : [{
+            "interval": "1970/1980",
+            "number": 2209600
+        }, {
+            "interval": "1980/2090",
+            "number": 2889700
+        }, {
             "interval" : "1990/2000",
-            "number": 11881643
+            "number": 3307600
         }, {
             "interval" : "2000/2010",
-            "number" : 12281054
+            "number" : 4326900
         }],
         "population_sampled" : {
             "number": [
-                "1990", 11881643,
-                "2000", 12281054,
-                "2010", 12702379
+                "1970", 2209600,
+                "1980", 2889700,
+                "1990", 3307600,
+                "2000", 4326900,
+                "2010", 5049100
             ]
         }
     }
 }, {
-    "id" : "pennsylvania",
-    "name" : "Pennsylvania",
+    "id" : "colorado",
+    "name" : "Colorado",
     "polygon" : {
         "positions" : {
             "cartographicDegrees" : [
-                -75.5, 42, 0,
-                -79.8, 42, 0,
-                -79.9, 42.3, 0,
-                -80.5, 42, 0,
-                -80.5, 39.8, 0,
-                -75.7, 39.8, 0,
-                -74.5, 40.2, 0,
-                -75.2, 40.8, 0,
-                -74.7, 41.3, 0
+                -109.03, 41, 0,
+                -102.03, 41, 0,
+                -102.03, 37, 0,
+                -109.03, 37, 0
             ]
         },
         "material" : {
@@ -89,35 +95,6 @@
 var viewer = new Cesium.Viewer('cesiumContainer');
 var dataSource = new Cesium.CzmlDataSource();
 
-// custom properties can be queried directly:
-Sandcastle.addToolbarButton('Print values', function() {
-    var entity = dataSource.entities.getById('custom_property_object');
-    // get the values of all properties at the current time.
-    var propertyValues = entity.properties.getValue(viewer.clock.currentTime);
-    console.log('constant_property: ' + propertyValues.constant_property);
-    console.log('population_intervals: ' + propertyValues.population_intervals);
-    console.log('population_sampled: ' + propertyValues.population_sampled);
-});
-
-// Custom properties can be used as the value of graphical properties:
-Sandcastle.addToolbarButton('Use interval data', function() {
-    var customProperyObject = dataSource.entities.getById('custom_property_object');
-    var intervalProperty = customProperyObject.properties.population_intervals;
-    var pennsylvania = dataSource.entities.getById('pennsylvania');
-
-    // Because the population values are so large, we scale them down
-    // by 100 so they fit on the screen.
-    // If we didn't need to scale, we could directly assign the property
-    // to extrudedHeight.
-    pennsylvania.polygon.extrudedHeight = scaleProperty(intervalProperty, 1 / 100.0);
-});
-Sandcastle.addToolbarButton('Use sampled data', function() {
-    var customProperyObject = dataSource.entities.getById('custom_property_object');
-    var sampledProperty = customProperyObject.properties.population_sampled;
-    var pennsylvania = dataSource.entities.getById('pennsylvania');
-    pennsylvania.polygon.extrudedHeight = scaleProperty(sampledProperty, 1 / 100.0);
-});
-
 function scaleProperty(property, scalingFactor) {
     // returns a property that scales another property by a constant factor.
     return new Cesium.CallbackProperty(function(time, result) {
@@ -127,6 +104,32 @@
     }, property.isConstant);
 }
 
+function setExtrudedHeight(propertyName) {
+    var customPropertyObject = dataSource.entities.getById('custom_property_object');
+    var property = customPropertyObject.properties[propertyName];
+    var colorado = dataSource.entities.getById('colorado');
+
+    // Because the population values are so large, we scale them down
+    // by 50 so they fit on the screen.
+    // If we didn't need to scale, we could directly assign the property
+    // to extrudedHeight.
+    // colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
+    colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
+}
+
+// Custom properties can be used as the value of graphical properties:
+Sandcastle.addToolbarMenu([{
+    text: 'Use interval data',
+    onselect: function () {
+        setExtrudedHeight('population_intervals');
+    }
+}, {
+    text: 'Use sampled data',
+    onselect: function () {
+        setExtrudedHeight('population_sampled');
+    }
+}], 'propertiesMenu');
+
 dataSource.load(czml);
 viewer.dataSources.add(dataSource);
 viewer.zoomTo(dataSource);//Sandcastle_End

CHANGES.md

@@ -3,7 +3,10 @@ Change Log
 
 ### 1.42 - 2018-02-01
 
+* Breaking changes
+  *
 * Added `ClippingPlaneCollection.isSupported` function for checking if rendering with clipping planes is supported.
+* Improved CZML Custom Properties sandcastle example [#6086](https://github.com/AnalyticalGraphicsInc/cesium/pull/6086)
 
 ### 1.41 - 2018-01-02