Tooltip in cesium

admi...@gmail.com

unread,

Jul 27, 2016, 2:54:21 AM7/27/16

to cesium-dev

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.

Hannah Pinkos

unread,

Jul 27, 2016, 9:43:20 AM7/27/16

to cesium-dev

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

Ian Walberg

unread,

Jul 27, 2016, 7:57:19 PM7/27/16

to cesiu...@googlegroups.com

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

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Hannah Pinkos

unread,

Jul 28, 2016, 9:49:04 AM7/28/16

to cesium-dev

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

Admin887

unread,

Jul 31, 2016, 9:28:33 AM7/31/16

to cesium-dev

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.

<body>
  <div id="cesiumContainer" onmousemove="show()"  title=""></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    var SelectedObj= null;
    var whiteObjForExample= viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0,40.0),
    ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    }
    });
    
     handler.setInputAction(function (movement) {
     SelectedObj= getSelectedObjFromPoint(movement.endPosition);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    
    
    function getSelectedObjFromPoint(Position){
    var valueToReturn= null;
    var pickedObject = viewer.scene.pick(Position);
    var pickedObjects = viewer.scene.drillPick(Position);
    var picked = pickedObjects[0];
    if (!Cesium.defined(pickedObject)) {
        picked = null;
        valueToReturn = null;
    }
    else {
        valueToReturn = Cesium.defaultValue(picked.id, picked.primitive.id);
    }
    return valueToReturn;
}
    var show = function () {
    if (SelectedObj != null) {
        var obj = document.getElementById("cesiumContainer"); obj.title = "Selected Obj!";
    }
    else{
        var obj = document.getElementById("cesiumContainer"); obj.title = "";
    }
}
    
  </script>
</body>

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

Ian Walberg

unread,

Jan 17, 2017, 7:55:56 PM1/17/17

to cesiu...@googlegroups.com

Folks,

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

Many thanks

Ian

Left Gully

unread,

Jan 25, 2017, 7:53:31 AM1/25/17

to cesium-dev

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.

/**++++++++++++++++++++++++++++++++++++++++*
 *	TOOLTIP FOR HOVERING OVER ENTITIES  *
 * ++++++++++++++++++++++++++++++++++++++++
 * credit Ian Walberg, https://groups.google.com/forum/#!topic/cesium-dev/68GDFwLYWYk */
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;  
}

Admin887

unread,

Jan 25, 2017, 8:37:50 AM1/25/17

to cesium-dev

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 :)

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

Left Gully

unread,

Jan 25, 2017, 9:33:49 AM1/25/17

to cesium-dev

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

Left Gully

unread,

Jan 25, 2017, 9:36:08 AM1/25/17

to cesium-dev

/**++++++++++++++++++++++++++++++++++++++++*
 *  TOOLTIP FOR HOVERING OVER ENTITIES  *
 * ++++++++++++++++++++++++++++++++++++++++

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

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

    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;  
}

Reply all

Reply to author

Forward