Hi,
Some examples on this forum and on the internet are explaining how to add a HTML popup (in my case a menu) on the top of an entity after a user has clicked on it.
My html popup element is positioning well on the first click (image 1), but as soon as I’m moving on the map the HTML element does not update its position correctly (image 2).
Image 1
The menu is well positioning below the entity
Image 2
The position is not correct anymore
Here is my code :
First on left click I get pickedFeature and store the result in this.viewer.selectedEntity.
Then after the camera moveEnd event I display the menu using the selectedEntity position.
This code works fine on the first pick event but if I move the wgs84ToWindowCoordinates are not correct anymore.
this.viewer.screenSpaceEventHandler.setInputAction((click) => {
var pickedFeature = this.viewer.scene.pick(click.position);
this.viewer.selectedEntity = pickedFeature.id;
if (Cesium.defined(pickedFeature)){
this.viewer.flyTo(
pickedFeature.id, {
offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0),
}
);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.viewer.camera.moveEnd.addEventListener(() => {
if(this.viewer.selectedEntity){
console.log(" ***************** moveEnd ***************** ");
var screenCoordinates = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.viewer.selectedEntity.position._value);
console.log(screenCoordinates);
const top = `${Math.round(screenCoordinates.y)}px`;
const left = `${Math.round(screenCoordinates.x)-150}px`;
document.getElementById("menu-tooltip").style.display = 'block';
document.getElementById("menu-tooltip").style.top = top;
document.getElementById("menu-tooltip").style.left = left;
console.log(" ***************** moveEnd ***************** ");
}
})
Do you see what I’m doing wrong ?
Thanks for your help.