Placemarks don't display on some computers.

franck.fasolin · October 3, 2017, 10:04pm

1. A concise explanation of the problem you're experiencing.

I am using cesium to display placemarks on airport maps with IE11. Though it works fine on my computer, the placemarks don't display on many others and cesium is very slow on those computers.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=11">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>AGS World</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>

Cesium.BingMapsApi.defaultKey = ‘’;
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : ‘https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer’
    }),
    baseLayerPicker : false,infoBox : false, selectionIndicator : false, animation: false,fullscreenButton: false, timeline: false
});
viewer.render()

var moving ;
var mousePosition = new Cesium.Cartesian2();
var mousePositionProperty = new Cesium.CallbackProperty(function(time, result){
    var position = scene.camera.pickEllipsoid(mousePosition, undefined, result);
    var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
    cartographic.height =0;
    return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
}, false);
var scene = viewer.scene;
var dragging = false;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(
    function(click) {
        var pickedObject = scene.pick(click.position);
        if (Cesium.defined(pickedObject) ) {

    moving = Cesium.defaultValue(pickedObject.id, pickedObject.primitive.id);

            dragging = true;

            scene.screenSpaceCameraController.enableRotate = false;
            Cesium.Cartesian2.clone(click.position, mousePosition);
            moving.position = mousePositionProperty;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_DOWN
);

handler.setInputAction(
    function(movement) {
        if (dragging) {
            Cesium.Cartesian2.clone(movement.endPosition, mousePosition);
      var ellipsoid = viewer.scene.globe.ellipsoid;
      var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
         var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7);
        var altitudeString ='0';
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7);
     top.document.title= '<EVENT>coordinates</EVENT>' +'<longitude>' + (longitudeString).slice(-20) + '</longitude>' +
                '<latitude>' + (latitudeString).slice(-20) + '</latitude>'+
                '<altitude>' + (altitudeString).slice(-20) + '</altitude>'+
                '<placemark>' + moving.id + '</placemark>';
        }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
handler.setInputAction(
    function(click) {
        if(dragging) {
          dragging = false;
          scene.screenSpaceCameraController.enableRotate = true;
          moving.position = scene.camera.pickEllipsoid(click.position);
        }
       else {
      var ellipsoid = viewer.scene.globe.ellipsoid;
      var cartesian = viewer.camera.pickEllipsoid(click.position, ellipsoid);
         var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7);
        var altitudeString ='0';
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7);
     top.document.title= '<EVENT>clicked</EVENT>' +'<longitude>' + (longitudeString).slice(-20) + '</longitude>' +
                '<latitude>' + (latitudeString).slice(-20) + '</latitude>'+
                '<altitude>' + (altitudeString).slice(-20) + '</altitude>';
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

var pinBuilder = new Cesium.PinBuilder();var entity = viewer.entities.add({name : ‘arp_$1’,id : ‘arp_$1’,position : Cesium.Cartesian3.fromDegrees(-69.38873056,77.48865), label : {text : ‘QAANAAQ’, font :‘16px tahoma’, showBackground :true, backgroundColor : Cesium.Color(0.165, 0.165, 0.165, 1), translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 1.0), verticalOrigin : Cesium.VerticalOrigin.TOP, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0 ,8000.0), }, billboard : { image : ‘http://localhost/ags/cesium/apps//blue-dot.png’, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, scaleByDistance :new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0), }});
var pinBuilder = new Cesium.PinBuilder();var entity = viewer.entities.add({name : ‘rwy_$1’,id : ‘rwy_$1’,position : Cesium.Cartesian3.fromDegrees(-69.40436944,77.49083056), label : {text : ‘Runway 18 - LDA start point’, font :‘16px tahoma’, showBackground :true, backgroundColor : Cesium.Color(0.165, 0.165, 0.165, 1), translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 1.0), verticalOrigin : Cesium.VerticalOrigin.TOP, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0 ,800.0), }, billboard : { image : ‘http://localhost/ags/cesium/apps//grn-pushpin.png’, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, scaleByDistance :new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0), }});

viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-69.38873056,77.48865,5000),});

</script>
</body>
</html>

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.
I am using cesium 1.36 in IE11.

Jonathan_Hall · October 4, 2017, 1:10am

If you are experiencing different display results using the same code and browser on different hardware, then its probably hardware limitations.
The appearance of slow Cesium performance on other computers may be a combination of their GPU limitations and display hardware capabilities, as well as their network connections, compared to your computer, where Cesium works fine.

Have you run http://webglreport.com on each of the computers and compared the reports?
Any messages in the javascript console? I think dev tools is <F12> in IE11(?).
IE11 is not the best browser platform for Cesium, can you install other browsers on the computers, or are you committed to IE11? Try comparing browser's HTML5 support with this site:
https://html5test.com/
At one point in my Cesium map development, I gave up on supporting the IE browser, because of differing interpretations of js and css. Chrome is more forgiving, enables me to 'develop for mobile', and what works in Chrome desktop always works on Chrome for Android, and usually works on ios Safari.
I hope you find a solution. Goid luck. -Jon

Jonathan_Hall · October 4, 2017, 1:18am

Franck- in your code example, you reference http://localhost/ paths to the image files.
What is the URL to those image files in the html document, when you open your cesium map on the other computers, where placemark entities dont show? Are ypu getting 404 errors in the console?

Gabby_Getz · October 4, 2017, 9:31pm

Thanks for a great answer Jon!

Franck, one thing I noticed in your code is that you’re calling viewer.render() manually, but I don’t see useDefaultRenderLoop set to false. I’m guessing that will cause some unwanted behavior from the renderer.

Thanks!

Gabby