Generate snapshot in the Web World Wind

Snapshot of the Prague Urban Heat Island

I guess that for plenty of projects it is important at some point to generate the snapshot of the current state of the application. In this tutorial, I would like to discuss how to achieve this, when you display data using Web World Wind.
    In general, the Web World Wind draws data on to the Canvas. Every canvas has a toDataURL() function, therefore it must be simple to obtain the data, mustn’t it?
    Well, it turned out, that it isn’t that simple for two reasons. First of them is that Web World Wind uses Off-screen rendering for the generation of the current state to be drawn. This means that the toDataURL most of the times returns the black screen. Second is the amount of the data, that you try to export. Depending on the variability of the data on the screen, this might mean that you are trying to export and download 10th of megabytes in size.
    To get the valid dataURL it is necessary to ask for it in the right moment. Each WorldWindow contains its own set of redrawCallbacks. You need to get the code for taking the snapshost into such callback such as in following snippet:

var worldWindow = new WorldWind.WorldWindow("canvas1");
function getSnapshot(wwd, stage) {
    if(stage === WorldWind.AFTER_REDRAW) {
        console.log(document.getElementById("canvas1").toDataURL());

        wwd.redrawCallbacks.splice(positionOfSnapshotFunction, 1);
    }
}

worldWindow.redrawCallbacks.push(getSnapshot);
var positionOfSnapshotFunction = worldWindow.redrawCallbacks.length - 1;

This code takes snapshot and then removes the function from the callbacks. So if you want to get one snapshot, this is the way to go. It is possible that you will run into the issue, that the snapshot URL is too big to be used directly to download the snapshost. In this case, we solved the issue by sending the Image on the server, storing it there and there serving it back again.