Change map cursor

CesiumJS
1

Hi,

Is there a way to change the mouse pointer when hovering over an entity?

Eg: on Google Maps and Esri, if you hover over the marker the mouse pointer changes.

Thanks,
Gowtham.

2

Hello,

You can use a ScreenSpaceEventHander to detect if you are hovering over an entity on mouse move, and use CSS to change the cursor style to pointer.

Here is a code example:

var element = document.getElementById(‘cesiumContainer’);
var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;
var handler;

var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard : {
image : ‘…/images/Cesium_Logo_overlay.png’
}
});

// If the mouse is over the billboard, change its scale and color
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
var pickedObject = scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
element.style.cursor = ‘pointer’;
} else {
element.style.cursor = ‘default’;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

Best,

Hannah

3

Thanks Hannah.

4

Hi, this is a very expensive way to change the cursor, overall pick is very expensive in performance, maybe there are other ways to change the cursor?

I am working with resium(cesium for react js) I had a few ideas
1 idea is a hook that changes the cursor after isCursorPointer becomes true or false

const [isCursorPointer, setIsCursorPointer] = useState(false);
useEffect(() => {

    if (viewer == null) {
        return;
    }
    if (isCursorPointer) {
        viewer.canvas.style.cursor = "pointer";
    } else {
        viewer.canvas.style.cursor = "default";
    }

<Entity
            onMouseLeave={() => setIsCursorPointer(false)}
            onMouseEnter={() => setIsCursorPointer(true)}

But it won’t work if the object is in another object

Perhaps you managed to solve the problem?

5

Hello,
I would very appreciate to know if there is any new more straight way to change mouse cursor while hovering above, let’s say, label or billboard!

I believe almost everybody has to run into this problem, as “mouse pointer” is the most natural way to notify the user that the object is “clickable”.

I would guess that it should be a “built-in” feature, but could not find any mention of it…

6

HI @ivank ,

Thanks for your post and welcome to the Cesium community. I saw the other thread you opened on the same topic Any "cheap" way to indicate "clickable" objects/labels by changing cursor to "pointer"?, I’ll respond here where more people are likely to see and get use out of this existing thread.

Using picking as described in the thread above and demonstrated in this sandcastle example Cesium Sandcastle to change the cursor based on the cursor location is the best solution at this time and closest we have to built in behavior. As noted there are performance implications for picking that would be great to improve. If any community members are interested in alternative approaches or ways to improve picking we would love to learn more about it.

Thanks,
Luke

1 Like
7

Thank you very much for your quick and helpful reaction!

As I needed to indicate only the Labels as “clickable”, I adjusted the code as follows (for anyone who may be interested; is the method acceptable, by the way?):

...
if (Cesium.defined(pickedObject) && pickedObject.primitive) {
 if (pickedObject.primitive instanceof Cesium.Label) {
  element.style.cursor = 'pointer';
 }
}
else {
...

Is it possible to suggest it as a new feature - to add “pointer” cursor option to API where relevant, as a rather standard hint for “clickability”?

Similarly confusing feature - well, for my “test users” :slightly_smiling_face: - is seemingly inevitable popping-up of InfoBoxes from clicks on virtually all objects, including those not carrying any meaningful/author-added information.
Please, the same question again :slightly_smiling_face: - is there any, preferably straight way for the Author/content creator to control which objects will have the “InfoBox feature” dis-/enabled?

Sorry I should probably ask the InfoBox question in another thread, but could not find proper one…
EDIT: The InfoBox problem is discussed here, but the presented answer does not seem to allow to disable InfoBox for individual object/s(?)