Question T16892
Visible to All Users

SurveyJs blocking third party library (e.g JQuery image mapster, pictarea)

created a year ago

I have a custom widget that consist of an image and map which is used to create interactivity on the image, the problem is inside my afterRender function I bind the plugin to the image element like this

Code
afterRender: function (question, el) { let imgBg = el.getElementsByTagName("img")[0]; let default_options = { fillOpacity: 0.5, render_highlight: { fillColor: '2aff00', stroke: true }, render_select: { fillColor: 'ff000c', stroke: false }, mouseoutDelay: 0, fadeInterval: 30, isSelectable: true, singleSelect: false, mapKey: 'state', mapValue: 'full', listKey: 'name', listSelectedAttribute: 'checked', sortList: 'asc', //onGetList: addCheckBoxes, //onConfigured: mapsterConfigured, showToolTip: false, toolTipClose: ['area-mouseout'] }; $(imgBg).pictarea({ normal: { fillStyle: 'rgba(255,255,255,.4)', strokeStyle: 'rgba(255,255,255,.8)', lineWidth: 1 }, hover: { fillStyle: 'rgba(255,255,255,.6)', strokeStyle: '#fff', lineWidth: 2, shadowColor: '#fff', shadowBlur: 10 }, active: { fillStyle: 'rgba(255,255,255,.8)', strokeStyle: '#f00', lineWidth: 2 }, disabled: { fillStyle: 'rgba(0,0,0,.4)', strokeStyle: 'transparent' } }); },

however this does not work as it only displays the image without any interactivity but if I do this outside of surveyJs (i.e on page load), it works as expected. I have tried this with 2 different plugins but it's the same result.
Kindly assist

Comments (2)

    Hello,
    I would appreciate it if you could share a complete demo so that I can research it on my end.

    Thanks

      please find attached the necessary files to recreate

      Answers approved by surveyjs Support

      created a year ago

      Hello,
      Thank you for the update. I tested your files, however, I didn't manage to run the provided Hand image map even outside a survey. Please validate its settings and ensure that you configured the map correctly.

      In the meantime, I created a demo for your reference. Please check the attachment. A survey and a custom widget appear and operate correctly:
      Clipboard-File-1.png

      Please let me know if you have any further questions.

        Comments (2)

          thank you
          I figured the problem, it was a missing # in the usemap value.
          building up on this, how do I set the datatype for my custom widget as array of string

            Hello,
            Thank you for the update. I'm happy to hear that you found the cause of the issue.

            Regarding your recent question: please refer to the following guide for more information on settings and properties which you can configure for a custom widget.
            Create Custom Widgets in jQuery and Knockout

            If the question remains, please feel fee to elaborate on it. In particular, clarify what you mean by a datatype.

            Thanks