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?