How to show pictures from CZML inside InfoBox Widget

CesiumJS
1

Hi!

I'm trying to show pictures coming from CZML file into the InfoBox Widget, but the image is not coming.

I Attached the screenshot and the CZML file.

I'm adding a link to the picture in the DESCRIPTION field of the czml as an html <img> tag. This is the entire CZML (if you drag and drop this to the Cesium Viewer you can see it)

[{
    “id”:“document”, “version”:“1.0”,
    “clock”:{
      “interval”:“2014-01-01T12:00:00Z/2014-09-15T12:00:00Z”,
      “currentTime”:“2014-09-15T12:00:00Z”,
      “range”:“LOOP_STOP”,
      “step”:“SYSTEM_CLOCK_MULTIPLIER”
    }
} ,{
“id”:“1”,
“availability”: “2014-04-24T18:04:22Z/2014-09-15T12:00:00Z”,
“position”:{
“cartographicDegrees”: [-0.976240521700356, 51.4609894403789, 0]
  },
“point”:{
  “color”:{
  “rgba”:[0,0,255,95]},
  “pixelSize”:40,“show”:true
  },
“description”:“PICTURE: <br> <br><div> <img src=‘http://demo.coffeyidevuk.com/Demos/CosmosGISWebApi/pictures/1_MINI.jpeg’ height=‘300’ width=‘300’> </img> <br> <br>Device: 1<br>Wave: 1<br>Time Stamp: 24/04/2014 18:04:22<br>Latitude: 51.4609894403789<br>Longitude: -0.976240521700356<br>Altitude: 0<br>Speed: 0<br>GPS Horizontal accuracy: 59<br>GPS vertical accuracy: 0<br>”

}]

The other elements of the html works fine, but not the <img> tab. I'm doing something wrong?

Thanks in advance!

2

For security reasons, by default all descriptions are sanitized using Google Caja: https://code.google.com/p/google-caja/. We plan on looking into allowing some default functionality, such as images, to work out of the box; but we need to better explore the implications of doing so. If you are in full control of all CZML being loaded into your app, you can disable the sanitization completely by adding the following line to the start of your app (before you create the Viewer or CesiumWidget)

InfoBoxViewModel.defaultSanitizer = function(rawHtml){ return rawHtml;};

This will cause any and all HTML inside of a description field to be executed/rendered in Cesium.

1 Like
3

You may also consider using Mapbox’s sanitize-caja library, which loosens the restrictions of Google Caja somewhat.

https://github.com/mapbox/sanitize-caja

4

Thanks so much for the quick reply. It works fine now!!