Add Single Point with Mouse Click on Cesium Map

Hello,

I am working to create a React App, and am currently using “Resium,” in VS Code.
I have been able to return the “Viewer,” on the screen, but I want to make it more interactive with the user. I looked through what was offered on sandcastle and other online sources, but I am only able to find the option to “draw a line,” or “draw a polygon,” and the “picking” option, which shows lat long of wherever my mouse hovers.

I am looking for a kind of “in between” feature, or guidance on how I can achieve this end goal. I would like to be able to click on the globe and create a point. I would then like to be able to return the latitude and longitude of that point.

I hope to hear back soon.
Thank you again!
Cheers, Divya

@divyayendapally

Welcome to the community :confetti_ball:

With your permission, I would like to make this post public. I do not see any confidential information on your post and I think that this post would help out the rest of our community. Do I have your permission to make this post public? Let me know, and we can start taking a look at your use-case :grinning_face_with_smiling_eyes:

Best,
Sam

That should be fine. Thank you!

@divyayendapally

I would use the method setInputAction() of ScreenSpaceEventHandler to add a point to the map when the user left-clicks. Here is some documentation to get you started:

https://cesium.com/learn/cesiumjs/ref-doc/ScreenSpaceEventHandler.html?classFilter=screen

You can use the Points demo that you referenced earlier to help out with adding a point to the map.

As you can see in the Points demo, the coordinates are updated as follows

position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)

Thus you will need the mouse position to add a point to the viewer. The picking sandcastle demo shows how to get the cartographic of the mouse at any given time. Lines 46-51 seem particularly important. Once acquired, these values can easily be printed to the Console.

Let me know if you have any other questions or concerns. I would also be curious to hear other ideas for implementing this functionality.

-Sam

Thank you! Any help on how I can convert this to Resium?

@divyayendapally

You are welcome! I am happy to help out :grinning:

That’s a great question. I would recommend going through the “getting started” resources on Resium’s website. These guides should help get you familiar with Resium. A basic familiarity with Resium will make the whole development process more seamless.

When you begin to have more specific questions about Resium, the following two community forum threads are a terrific resource.

And of course, bugs and issues with Resium can be posted on the Resium GitHub page.

Resium has been a hot topic in the Cesium community. If other community members have any suggestions do not hesitate to share them!

-Sam