Draw Markup On object in autodesk viewer using dbids

I need to show data(label with background frame) on objects in the autodesk viewer. I tried implementing this blog https://forge.autodesk.com/blog/placing-custom-markup-dbid and this is what I am trying to reproduce also I took reference from https://raw.githubusercontent.com/Autodesk-Forge/forge-digital-twin/master/public/scripts/extensions/issues.js

Things which I tried. 1.Placed .js file in my folder which the code inside 2.gave reference to the file in my html 3.loaded the extension as shown in the above sample 4.have all the bootstrap cdn imported 5.jquery cdn imported

I am able to get the half temperature icon button also extension accepts icon with db ids which I have provided and when clicked on button the icon and text both are not visible, extension executes which out any error but I am not able to see any reflection my viewer.

can any one help me what I need to check more in order to achieve this as I feel lot of things in the autodesk are been updated and I might be missing something

Solution

The "issues" extension in the "forge-digital-twin" demo requires a specific server endpoint to get the data from, as you can see here: https://github.com/petrbroz/forge-digital-twin/blob/master/public/scripts/extensions/issues.js#L55-L57. You can replace these 3 lines of code and populate the this._issues array in any way you want. For example, you could hard-code the values directly like so:

this._issues = [
    {
        partId: 100,
        author: 'John',
        text: 'Message',
        img: '<some image url>',
        x: 0.0,
        y: 0.0,
        z: 0.0
    },
    {
        partId: 101,
        author: 'Joe',
        text: 'Hello',
        img: '<some image url>',
        x: 10.0,
        y: 20.0,
        z: 30.0
    }
];

Note that the partId is the ID of the object the issue is attached to so that when the object is moved in the viewer (for example, using the Explode tool), the issue can follow it.