Tooltip in cesium

CesiumJS
1

Hi,
i would like to popup a small tooltip when the curser is on a entity/Primitive on the map. we need that the tooltip will show up after some seconds on the object and disappears when the curser is leaves the object.

i searched a lot for answer all over the internet and i did not found something..

is it possible?

thank you.

2

Hello,

This feature is not something included in Cesium. You would have to implement it yourself.

Take a look at our picking demo to see how to detect when the cursor is over an entity: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

You can use SceneTransforms.wgs84ToWindowCoordinates to convert the position of the entity to a XY screen position. Then you can show an HTML element at that position.

Check out our build guide for information on downloading and building the code base: https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors/BuildGuide

If you get something working, let us know! I’m also here to help if you have any questions

Best,

Hannah

3

Hannah,

Is there an example which includes checking if the entity is visible? We need to do something similar and when we tried a little while back it worked well but if the entity
is on the other side of the globe it still got a valid screen XY.

Thanks

Ian

4

Hi Ian,

This probably isn’t the best solution, but you can try using Camera.computeViewRectangle, then check if the entity position is inside that rectangle.

Best,

Hannah

5

Hi!
thank you Hannah for your answer.

i found a way to display a tooltip that answer my requirements without external frameworks. I would like to share with you.

``

בתאריך יום רביעי, 27 ביולי 2016 בשעה 16:43:20 UTC+3, מאת Hannah Pinkos:

6

Folks,

Does anyone have an example we can use to detect when an entity is visible?

Many thanks

Ian

7

Ian,
I am interested in the answer to your Q: Is there an example which includes checking if the entity is visible?

I also wanted to thank you for following up, and posting your successful tooltip result. It adds a lot of value to the forum, as a resource, when users also contribute, rather than relying solely on the valuable suggestions and code snippets provided by Hannah and the Cesium team.

In the javascript function that initializes my Cesium map, I add a number of eventHandlers, to which I added Ian’s snippet for tooltips, modified to access properties of two geoJSON datasources, as follows. I placed the getSelectedObjFromPoint function outside that initialization function.

/**++++++++++++++++++++++++++++++++++++++++*

var handlerToolTips = new Cesium.ScreenSpaceEventHandler(CesiumMapViewer.scene.canvas);

var SelectedObj= null;

handlerToolTips.setInputAction(function (movement) {

SelectedObj= getSelectedObjFromPoint(movement.endPosition);

if (SelectedObj != null) {

var obj = document.getElementById(“cesiumContainer”); obj.title = SelectedObj;

} else{

var obj = document.getElementById(“cesiumContainer”); obj.title = “”;

}

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function getSelectedObjFromPoint(Position){

/** credit Ian Walberg, https://groups.google.com/forum/#!topic/cesium-dev/68GDFwLYWYk

var valueToReturn= null;

var pickedObject = CesiumMapViewer.scene.pick(Position);

var pickedObjects = CesiumMapViewer.scene.drillPick(Position);

var picked = pickedObjects[0];

if (!Cesium.defined(pickedObject)) {

picked = null;

valueToReturn = null;

}

else if (pickedObject.id._properties !== undefined) {

if (pickedObject.id._properties.Path_Name !== undefined && pickedObject.id._properties.danger_rating !== undefined) {

valueToReturn = pickedObject.id._properties.Path_Name + " danger level = " + danger_level[pickedObject.id._properties.danger_rating];

}

}

else if (pickedObject.id.description !== undefined ){

valueToReturn = pickedObject.id.description._value.value;

}

return valueToReturn;

}

``

8

Hi Left Gully.

Perhaps you’re confused.
lan asked the quistion you mentioned, but I published the solution- actually a solution for my question above:)

i am glad that my code helps you too :slight_smile:

בתאריך יום רביעי, 25 בינואר 2017 בשעה 14:53:31 UTC+2, מאת Left Gully:

9

I am always confused. I will update the credit, my apologies, I thought Admin887 was another alias for Ian.

10

/**++++++++++++++++++++++++++++++++++++++++*

var handlerToolTips = new Cesium.ScreenSpaceEventHandler(CesiumMapViewer.scene.canvas);

var SelectedObj= null;

handlerToolTips.setInputAction(function (movement) {

   SelectedObj= getSelectedObjFromPoint(movement.endPosition);

if (SelectedObj != null) {

         var obj = document.getElementById("cesiumContainer"); obj.title = SelectedObj;

     } else{

    var obj = document.getElementById("cesiumContainer"); obj.title = "";

      }

  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function getSelectedObjFromPoint(Position){

/** credit Admin887, [https://groups.google.com/forum/#!topic/cesium-dev/68GDFwLYWYk](https://groups.google.com/forum/#!topic/cesium-dev/68GDFwLYWYk)

var valueToReturn= null;

var pickedObject = CesiumMapViewer.scene.pick(Position);

var pickedObjects = CesiumMapViewer.scene.drillPick(Position);

var picked = pickedObjects[0];

if (!Cesium.defined(pickedObject)) {

   picked = null;

   valueToReturn = null;

}

else if (pickedObject.id._properties !== undefined) {

       if (pickedObject.id._properties.Path_Name !== undefined  &&  pickedObject.id._properties.danger_rating !== undefined) {

    valueToReturn = pickedObject.id._properties.Path_Name + " danger level = " + danger_level[pickedObject.id._properties.danger_rating];

      }

}

    else if (pickedObject.id.description !== undefined ){

      valueToReturn = pickedObject.id.description._value.value;

  }

return valueToReturn;

}

``