Generate snapshot in the Web World Wind

Jakub Balhar
Sep 2, 2018 · 2 min read
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 variablity 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.

Written by

I always try to find answers to the complex questions. Why we behave the way we do? What is love? What is meaning of life?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade