Creating Cesium Imagery Provider in Dart

Question

I am trying to use the Cesium javascript library to load a WMS map in dart. I am able to get the correct map loaded from the .html file using this code:

<script>
    var widget = new Cesium.CesiumWidget('cesiumContainer', {
        imageryProvider : new Cesium.WebMapServiceImageryProvider({    
            url: "http://10.1.10.74:8080/geoserver/wms",
            layers : 'planet_osm_roads,planet_osm_polygon,planet_osm_line,planet_osm_point'
        })
    });
</script>

However when I try to load it from within the .dart file, the CesiumWidget seems to fall back and use the default BingMapsImageryProvider instead of the WebMapService provider. Here is the code I am using in .dart

void main() {
    final ces_widget = context['Cesium']['CesiumWidget'];
    final wms = context['Cesium']['WebMapServiceImageryProvider'];

    String url = "http://10.1.10.74:8080/geoserver/wms";
    var provider = new JsObject(wms, [url, 'planet_osm_roads,planet_osm_polygon,planet_osm_line,planet_osm_point']);  

    if(provider['ready'] == true) {
        var widget = new JsObject(ces_widget, ['cesiumContainer', {'imageryProvider' : provider}]);
    }
}

All of the properties of provider are null except for tileHeight, tileWidth, and ready. Does anyone have any ideas why the WMS provider is not being created?

The Cesium Widget is being created and a map is being loaded, it is just being loaded from the default Bing Provider.

Answer 1

When you pass Map, List or JSON like structure from Dart to JS you have to use new JsObject.jsify(json). For instance your provider should be :

var provider = new JsObject(wms, 
  [new JsObject.jsify({
    'url': url, 
    'layers': 'planet_osm_roads,planet_osm_polygon,planet_osm_line,planet_osm_point'
  })]);
//....
var widget = new JsObject(ces_widget, ['cesiumContainer', new JsObject.jsify({'imageryProvider' : provider})]);