Custom Visualizer to display waypoints in a time range

I'm trying to take advantage of the positions stored in a SampledPositionProperty and be able to display multiple positions within a time window. I ultimately want to be able to have this as a sliding time window so at each clock tick, the positions displayed would change has they fall out/come into the time window.

I have read a bit about Cesium Visualizers and assume this would be the best way to do this, but I can't find any simple examples of how to even registering a Visualizer. I see that Cesium at one time was going to implement this (there is even a wiki page about it: https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-History-visualization-details), but it never seemed to materialize. Could anyone point me to some examples/documentation of how to implement such a feature use Visualizers? Or if there is a better way to do this, let me know!

Thanks
Andrew

Hi Andrew,

Can you explain a little more about what you are displaying? Is it a collection of points? A short code sample would be helpful.

Are you going to be using CZML or creating the entities client side?

Best,

Hannah

Sure. We have entities that move over time (say a car or plane) that we want to place on the map. We sample the location of those entities every x seconds/minutes. Right now, we take every sample and populate a SampledPositionProperty with each location at their collected time. With the current timeline, we can play that as an animated entity that moves along an interpolated track from point to point over time just like the Interpolation example in the sand castle (this would be the best to use as sample code: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Interpolation.html&label=Showcases). Now that we have that, we would like to be able to see the different locations the entity visited (waypoints) within a time window (say from NOW to 10 mins ago). We would then want to slide the time window either left or right and have those points that are visible change. So If we had a time window of 10 mins and our sample rate was 1 location per/min, then we would see 10 points for that single entity.

The Interpolation example just manually plots each of the way points which works if you want to see all of them all the time, but we only want to see a limited number of them based on the current select time in the timeline. So I thought that if we could make a Visualizer that when update(time) was called, it could show all points within the time window, that would work, but I can’t figure out how that would be done. Let me know if you need more info.

Thanks

Andrew

Thanks for elaborating Andrew, I have a better understanding now.

Showing points at previously visited locations would be fairly easy using availability. Replace the computeCirclularFlight function in the interpolation sandcastle example with this:

function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
property.addSample(time, position);

    //Also create a point for each sample we generate.
    viewer.entities.add({
        position : position,
        availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start : time,
            stop : stop
        })]),
        point : {
            pixelSize : 8,
            color : Cesium.Color.TRANSPARENT,
            outlineColor : Cesium.Color.YELLOW,
            outlineWidth : 3
        }
    });
}
return property;

}

``

You should see the points pop in only after the plane has been to that position.

However, the update function for the visualizers just takes the current time.

I think you would have to make a ton of changes in order to use a time window instead of just the current time here.

Instead, you might be able to use a CallbackProperty for show that only returns true when the position time is within the time window. I can throw together an example of that too if you’d like.

Best,

Hannah

Thanks Hannah, that does almost accomplish what we are after. I added a stop time 10 seconds after the start to get it a bit closer. However, if you wanted to be able to dynamically change the length of the time window, you would have to reset the availability on all the entities correct? Maybe having a CallbackProperty for either show or stop would work better that could use an external time window duration to calculate based on the start time. That’d be great to see that example too.

Thanks again

Andrew

Hello Andrew,

Here’s an example of using a callback property for showing the points:

var timeWindow = new Cesium.TimeInterval({
start: Cesium.JulianDate.addSeconds(start, 180, new Cesium.JulianDate()),
stop: stop
});
function getShowCallback(entity) {
return function() {
return Cesium.TimeInterval.contains(timeWindow, entity.name.time);
};
}

function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
property.addSample(time, position);

    //Also create a point for each sample we generate.
    var entity = viewer.entities.add({
        name: {
            time: time
        },
        position : position,
        point : {
            pixelSize : 8,
            color : Cesium.Color.TRANSPARENT,
            outlineColor : Cesium.Color.YELLOW,
            outlineWidth : 3
        }
    });
    entity.point.show = new Cesium.CallbackProperty(getShowCallback(entity), false);
}
return property;

}

``

Best,

Hannah