Unable to perform DOM manipulation in a custom widget
0
I am trying to create a custom widget that implements geomaps using following library. http://datamaps.github.io/ The library has a dependency to d3.js and topojson.js. I have started with widget template generated by Yeoman generator . I have added the javascript files within the lib folder and added the reference to the same within the amd definition. For a start , i am trying to generate map from static data . But i am stuck with couple of issues. define([ ... "GeoMap/lib/d3", "GeoMap/lib/topojson", "GeoMap/lib/datamaps.world", "dojo/text!GeoMap/widget/template/GeoMap.html" ], function (... _jQuery,d3,topojson,datamaps, widgetTemplate) { ... // Widget template continues update: function (obj, callback) { logger.debug(this.id + ".update"); this._contextObj = obj; this._renderMap(); this._resetSubscriptions(); this._updateRendering(callback); // We're passing the callback to updateRendering to be called after DOM-manipulation }, _renderMap:function () { let map = new window.Datamap({ element: dom.byId("dataMapContainer"), fills: { defaultFill: 'rgb(60,61,66)', expected: 'rgb(0,163,174)', inProcess: 'rgb(255,242,127)', notImplemented: 'rgb(172,152,219)' }, data: { 'USA': { fillKey: 'expected' }, 'IND': { fillKey: 'notImplemented' } } }); } ... // Template Continues }); I have defined template as below <div class="widgetname"> <div id="dataMapContainer" class="dataMapContainer"></div> </div> 1. datamaps.world.js exports a constructor function , but instead a numeric value is received. 2. I tried to move forward by assigning the same to window object. But the the map initialization is throwing an error mxui.js?636613750682180831:1 Error: mxui_widget_TabContainer_0.applyContext: Error: mxui_widget_TabContent_0.applyContext: Error: mxui_widget_DataView_9.applyContext: Error: GeoMap_widget_GeoMap_0.applyContext: Error: GeoMap_widget_GeoMap_0.applyContext: TypeError: dom.byId is not a function 3. Ideally i would like to pass data which list of object from page to custom widget. How can i achieve it?