Cesium Click Event seem in different location

CesiumJS
1

Hi,

I try to add a mouse click to my geojson data to display the travel times on a hexagons. I could add the mouse click and popup window however depends on the camera position, most of the time it shows it in different location.

I cannot find what is wrong with the code.

Cesium.IonResource.fromAssetId(assetId)
.then(function (resource) {
return geoJsonDataSource.load(resource, {
clampToGround: true,

         stroke: Cesium.Color.HOTPINK,
         fill: Cesium.Color.PINK.withAlpha(0.5),
         strokeWidth: 3
     });
 })
 .then(function (dataSource) {
    viewer.dataSources.add(dataSource);

     // Style the hexagons based on their travel_time property
     var entities = dataSource.entities.values;
     for (var i = 0; i < entities.length; i++) {
         var entity = entities[i];
         var travelTime = entity.properties.travel_time.getValue();

         function getColorByTravelTime(travelTime) {
            if (travelTime <= 38) {
                // White blue for travel times between 25 to 38
                return Cesium.Color.fromCssColorString('rgba(173, 216, 230, 0.6)'); // Light blue color (like AliceBlue)
            } else if (travelTime <= 43) {
                // Light sky blue for travel times between 38 to 43
                return Cesium.Color.fromCssColorString('rgba(135, 206, 250, 0.6)'); // Sky blue color
            } else if (travelTime <= 50) {
                // Darker sky blue for travel times between 43 to 50
                return Cesium.Color.fromCssColorString('rgba(70, 130, 180, 0.6)'); // Steel blue color
            } else {
                // Dark blue for travel times between 50 to 75
                return Cesium.Color.fromCssColorString('rgba(0, 0, 139, 0.6)'); // Dark blue color
            }
        }

         entity.polygon.material = getColorByTravelTime(travelTime);
     }


     var currentPopup = null;
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     handler.setInputAction(function (clickEvent) {
        var pickedObject = viewer.scene.pick(clickEvent.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
            var entity = pickedObject.id;
            var travelTime = entity.properties.travel_time;
    
            if (travelTime !== undefined) {
                var boundingSphere = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions);
                var center = Cesium.Ellipsoid.WGS84.cartesianToCartographic(boundingSphere.center);
    
                // Convert center position to Cartesian3 for the screen position calculation
                var centerPosition = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude, center.height);
                var screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, centerPosition);
    
                if (screenPosition) {
                    showPopup(screenPosition, `Travel Time: ${travelTime} minutes`);
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    
    function showPopup(screenPosition, message) {
        // Remove the existing popup if it exists
        if (currentPopup) {
            document.body.removeChild(currentPopup);
            currentPopup = null;
        }
    
        // Create a new popup
        var popupDiv = document.createElement('div');
        popupDiv.className = 'cesium-popup';
        popupDiv.innerHTML = message;
    
        popupDiv.style.left = screenPosition.x + 'px';
        popupDiv.style.top = screenPosition.y + 'px';
    
        document.body.appendChild(popupDiv);
        currentPopup = popupDiv;
    }


    // Event listener for GeoJSON data toggle
    document.getElementById('showGeoJson').addEventListener('click', function() {
        geoJsonDataSource.show = true;
        tileset1.show = true;
        tileset2.show = true;
        tileset3.show = true;
    });

 });