Strategy for Visualizing Data on Map (e.g. weather maps)?

CesiumJS
1

I have a data variable associated with geographic locations that I would like to visualize on a map. The data is a continuous variable which I’d
like to visualize as something like a contour map. An example data variable for this type of
visualization would be current rainfall, where the map shows different
color levels to indicate how much rainfall is going on. Where the amount of rainfall is below a
minimum, the map shows no color overlay.

I have not seen this type of visualization in the code
examples or seen a discussion on how to accomplish this. I’d like advice on the strategy to take in
Cesium for such a visualization.

Here are the requirements I think need to be fulfilled:

  1. Ability to shade regions of the map with
    different colors determined by corresponding geographic data variable. There would be a finite number of colors (perhaps
    12 or so).

  2. Colored regions must be transparent and allow
    underlying map imagery/labels to be visible.

  3. Colored regions must be able to take jagged
    shape, including “islands” of one color within a band of another color

  4. Colored regions must be clamped to terrain

  5. Visualization must be able to update in response
    to new data (i.e. this is not a one-off static map)

  6. Nice to have: ability to click on a colored
    region and see corresponding info appear in info box

I have so far explored two strategies for this:

  1. Defining polygons with holes for each colored
    band

  2. Overlaying an image file

The polygon approach has worked well for me, but I have only
used simple test data where the contours are well behaved. I am concerned about how this will scale with
irregular data that has “islands” and sharp jagged edges.

I have also tried the image approach, where I overlay a
static image. My main concern with this
approach is that it seems to require I generate an image file to specify the
overlay, when I prefer to use my data directly.
I am unsure if I will be able to dynamically create image files
on-the-fly. In addition, using an image
does not satisfy requirement 6.

I appreciate ideas on how to approach this. I was hoping there would be a high level API
to display arbitrary georeferenced data as a colored visualization,
but I have not seen one. Is the polygon
strategy best? Or is there another API or
strategy that I should consider?

Thanks,

Jacob

2

I am currently pursuing the image overlay strategy for this. I think I need an image overlay to be scalable for interesting data where contour boundaries are not well behaved. The primary hurdle in using image overlay is how to handle dynamic data. I solved this by writing a temporary PNG image file and then reading it as binary data and transforming that to base64 encoding. With that data, I can then define the image in JavaScript without referring to an image file:

var imageURL = new URL(‘data:image/png;base64,’ + imageData);

And then I overlay the image with transparency thusly:

var imageLayer = viewer.scene.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({

url: imageURL,

rectangle: rec

}));

imageLayer.alpha = 0.3;

Jacob

3

Jacob,
re: “The primary hurdle in using image overlay is how to handle dynamic data. I solved this by writing a temporary PNG image file and then reading it as binary data and transforming that to base64 encoding.”

I’m curious if you accomplished automating this PNG image creation on-the-fly using an open-source javascript library, like GDAL, or some other approach?

Thanks-

-Jon

4

Hi Jon,

I’m driving Cesium from a desktop application. I’m doing the data processing and PNG file write/read in the desktop app, then pushing the resultant base-64 image data across the browser boundary to Cesium.

Jacob