Dear cesium team,
I have the following use case:
Make a interactive 3d map (of the alps) that contains a personal raster layer (uploaded via cesium ion). This layer should be colored according to its values. It is a snow cover duration layer with values from 0 to 356. A legend should be shown to the user. Ideally also a transparency slider and toggle layer on off.
Additionally, it would be great if the raster values could be querried via mouse click on the map.
What I have done:
- I’ve uploaded the raster choosing the type “image” into cesium ion.
- I’ve used the sandbox to add it to a map.
- I’ve tried adapting the example “globe materials” but didn’t manage to change the color of my snow cover duration raster.
- The example “Imagery Layers Manipulation” looks interesting. But there is also no legend and the mouse click action only says “no features found”.
Currently my try looks like this:
Example of what I would like it to look like
The team of opendatascience.eu has a nice visualization tool which seems to based on cesium and has even more features then I would need. My use case is only coloring and legend according to the raster values (and on click display of the raster value)
https://maps.opendatascience.eu/?base=BingMaps%20(Aerial)&layer=NDVI%20Landsat%20(quarterly)%20-%20autumn&zoom=13¢er=46.3467,10.3932&opacity=45&time=201909
Related questions on the forum
I’ve checked the forum but didn’t find the answer suiting my case. There are two similar questions but they’re diverging in a different direction. The first one is using raster to give a texture to 3d objects. The second one is not using personal data.
Question
- How can I color a personally uploaded raster (uploaded as type image) overlayed on the 3d terrain according to its values?
- How can I add a legend?
- How do i get on-click values of the raster displayed?
- Am I following the best approach to achieve what I want?
Thanks for your help,
All the best!
1 Like
@pzellner
Welcome to the community and thank you for the well-formatted post! It seems like you are off to a great start with CesiumJS.
With regards to your first question, more details would help me better answer this question. Are you currently trying to upload an image? If so, what data is embedded in the image - what do you mean by “according to its values”? Sharing the image that you are referring to would be useful.
Overall, I think working from the Globe Materials sandcastle is a great place to start. I believe that a combination of using material shaders with a custom image and picking display heights given a user input would give you most of the functionality that you are looking for.
In terms of adding a legend, here is an old thread that discusses making a legend using regular HTML and overlaying it onto the CesiumJS viewer. Cesium ion also provides simple tools for annotating the Cesium viewer. I have used Cesium ion to create some fun annotated maps.
As eluded to before, more information about your goals, the data you are currently using, and some of the code that you have tried (in the form of a sandcastle) would help me assist you more efficiently. If possible, can you provide some of these resources?
-Sam
@sam.rothstein, thanks for the encouraging reply!
Are you currently trying to upload an image?
I have already uploaded the image on my Cesium Ion account. The screenshot above shows the image I have uploaded. It is colored in a black and white scale. That is what I want to change.
If so, what data is embedded in the image - what do you mean by “according to its values”?
The data is a .tif raster image. It has one band with values ranging from 1 to 365. They represent snow cover duration. By “according to it’s values” I mean, I want to change the default color scheme that is applied to the image by default. This is a black and white scale, where black corresponds to low values and white corresponds to high values.
Overall, I think working from the Globe Materials sandcastle is a great place to start.
I think so too! I tried it. But I don’t understand how to reference the image I have uploaded to material shaders (i.e., a custom color scheme).
As eluded to before, more information about your goals, the data you are currently using, and some of the code that you have tried (in the form of a sandcastle) would help me assist you more efficiently. If possible, can you provide some of these resources?
Here’s my Sandcastle with my uploaded image included:
Thanks for the help!
I have received a question on this topic form another user (thanks @obviousOak). I’ll quote it here:
Hello,
I came across your super well articulated post about coloring a custom geotiff in Cesium. I’m struggling with the exact same issue. I was starting to think that Cesium is not the tool for this, but the opendatascience.eu example you posted makes me think otherwise. Did you ever figure out this problem? Any guidance at all would help.
Thanks!
Unfortunately, I didn’t continue working in this direction directly on cesium. Luckily another department in our institute is using mapstore. They have integrated the possibility to colour and view raster layers with cesium 3d view (blogpost). I’m not 100% sure if the 3d View is working correctly though in all mapstore versions (issue).
Still it would be super helpful if someone here has figured out how to go about this directly in cesium.
On how to add a legend:
https://tilemill-project.github.io/tilemill/docs/guides/advanced-legends/
There are two examples (horizontal sequential and vertical qualitative) given in the link above. It’s quite easy to implement on Html/CSS and customise it according to your map.
