Good afternoon,
I know it is risky asking for assistance on a beautiful late-summer Friday afternoon…
I would like to update a InfoBox descriptions dynamically. Hannah Pinkos helped update a CZML entity’s description here (Updating a CZML ‘description’ upon opening the InfoBox). The challenge I’ve hit involves how to supply the return from an AJAX (or XMLhttpRequest) to “setInputAction(function(click)”.
I can get the setInputAction(function(click) to return information to a div or other element without trouble, but I want the result to end up with the "pickedObject.id.description’= “…” to be read in the javascript setInputAction(function(click) operation.
I began using the JQuery AJAX approach but ran into trouble with its Async-ness. Just to get something to work I tried Ssync-ing things with no luck. See the bottom component of this Sancastle (and temporary php):
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var czml =
[{“id” : “document”,
“version” : “1.0”
},{“id” : “Boston”,
“label”:{“text”:“Boston”},
“position”:{“cartographicDegrees”:[-71.0589,42.3601,0]},
“description”:“Boston is a city…”,
},{“id” : “New York City”,
“label”:{“text”:“New York”},
“description”:“New York is a city…”,
“position”:{“cartographicDegrees”:[-74.0059,40.7127,0]},
}];
var promise = Cesium.CzmlDataSource.load(czml);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var handlerA = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handlerA.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject)) {
$.ajax({
async: false,
type: ‘GET’,
url: ‘InfoBox.php’,
data: (pickedObject.id.id).val(),
success: function(response) {
result (response);
}
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
`//------ create CZML ------
//------ Get the array of entities
var entities = dataSource.entities.values;
//------ Loop entities
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.label;
entity.label.translucencyByDistance = new Cesium.NearFarScalar(100000,1.0,500000,0.0);
}
}).otherwise(function(error){
//------ Display error
window.alert(error);
});
//------ Use JQuery/AJAX to update to current description`
<<InfoBox.php>> File (for simplicity’s sake):
<?php //MySQL search with 'placeholder' set to 'pickedObject.id.id' echo ("pickedObject.id.description='this is driving me crazy!';"); ?>``
I have also tried a XMLhttpRequest as that can easily handle the Async-ness of the AJAX (with a callback) without pulling in another library for one function, but the challenge remains: these functions work for me in isolation but not within the setInputAction function.
Many thanks, and enjoy the weekend. Best, erik