Search code examples
autodesk-forgeautodesk-viewerautodesk

Placing custom markup by dbId not showing the markups on viewer

So I want to reproduce this tutorial. I have got the exact same code for the IconMarkupExtension.js . But I do not get the markups on the viewer but custom extension gets added to the tool bar with the icon. I was wondering if it has to do with the model I'm using but not sure.

My Viewer Code

if (viewer != null) {
    var thisviewer= viewer;
    if (thisviewer) {
      thisviewer.tearDown();
      thisviewer.finish();
      thisviewer= null;
      $("#forgeViewer").empty();
    }
  }
 
  var options = {
    env: 'AutodeskProduction',
    api: 'derivativeV2',
    getAccessToken: function(onTokenReady) {
      var token = accessToken;
      var timeInSeconds = 3600; 
      onTokenReady(token, timeInSeconds);
    }
  };

  var documentId = "urn:" + urn;

  Autodesk.Viewing.Initializer(options, function() {

    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
    var startedCode = viewer.start();
    if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
    }
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
  });

extension loading


  viewer.loadExtension('IconMarkupExtension', {
    button: {
        icon: 'fa-thermometer-half',
        tooltip: 'Show The Temperature'
    },
    icons: [
      { dbId: 69, label: '300°C', css: 'temperatureHigh fas fa-thermometer-full'},
      { dbId: 70, label: '300°C', css: 'temperatureHigh fas fa-thermometer-full'},
      { dbId: 71, label: '300°C', css: 'temperatureHigh fas fa-thermometer-full'}
    ],
    onClick: (id) => {
      console.log(' ======================= IconMarkupExtension onClick id: ' + id);
        viewer.select(id);
        viewer.utilities.fitToView();
        switch (id){
            case 69:
                alert('Sensor offline');
        }
    }
})

This is the model I'm using.

I'm using viewer version V7*

Thank you

EDIT :

I managed to get the icons but all the icons are displayed centered . as you see below Centerd Icons

it is the same even if i selected one particular object .

enter image description here

labels and values shows correctly according to the model ID that I have added .

Is it something to do with the models I have ?

Solution

  • Here you can find a sample implementing this extension.

    Please note that to make it work, you need to add the extension, styles, reference css and js, add it to viewer, and ensure the dbids specified are present in your model. Here is the source for the sample