Capturing and saving an image of a Cesium map

CesiumJS
1

I’ve been trying to figure out how to capture images on the server of Cesium maps, and was wondering if this was a solved problem.

Let me give an example:

When you go to facebook and see a map in the news feed, that map is an image of a user generated map. If you click on that map, a modal pops up where you can interact with a live version.

Here is an example from facebook:

I’m trying to do something similar. I have an activity feed where users do some action, and an image of the resultant map is generated, saved to S3, then shown on the story that is generated from the action.

I’ve noticed a ton of websites do this, including every running/cycling tracking app with an activity feed, so I’m assuming it’s a solved problem, but I can’t figure out how to do it. I do know how to get a client side screenshot, but this would have to be a server side solution I assume.

Thanks for the help!

2

Hi Arel,

This is a frequently requested feature, and we have an issue open in GitHub to create a function to do this in the API.

Here’s a previous thread on how to accomplish this. You could implement this solution on the client side when a change is made, and save the image on the server to return when needed.

Thanks,

Gabby

3

For anyone who is interested. I had to do things a bit differently than the proposed solutions because I needed to get an image of a map the user may never interact with.

I spun up a node app and used Puppeteer to capture the image of the map. The app has two routes, an index for displaying the map, and a post for capturing an image. I send a user_id to the post route, which triggers puppeteer to load the node apps index route with the passed in user_id, which triggers an API call back to my original server to get the GeoJSON it needs to render the map. Puppeteer then waits for the page to finish loading, captures a screenshot, and saves that screenshot to S3 and sends back the URL of the new image.

This is the best totally headless server side solution I could come up with, but it’s working well for me so far.

4

Thanks for updating with your solution! I’m sure others are looking to do something similar.

5

Happy to help! Also happy to answer any questions if anyone has any. This solution will be going into production in a week or two.