Trying to integrate ImageMapper as custom component

Hello,

I've fixed your plunker. This is the updated one - https://plnkr.co/edit/OP8jzZKdjVf6nXJG

Two changes:

• Introduced the unique mapName. In your case this name was the same with the designer surface on the design tab and test survey on the test tab. Your clicks were registered for the design survey due to the same map name.

JavaScript
var mapName = question.name + "_map_" + Date.now();

//get and prepare the img element
var image = el.getElementsByTagName("img")[0];
image.src = question.imageLink;
image.alt = question.name;
image.useMap = "#" + mapName;

//get and prepare the map element
var myMap = el.getElementsByTagName("map")[0];
myMap.name = mapName;
myMap.style.cursor = "pointer";

• Changed the way the value assigned:

JavaScript
question.value = (question.value || []).concat([{
    x: e.x,
    y: e.y
}]);

Thanks, Serge
SurveyJS Team

Hello,

Custom widgets in SurveyJS are designed to be used in all supported platforms (KnockoutJS, React, VueJS). Thus most of custom widgets are implemented in pure JavaScript and can be used everywhere in SurveyJS ecosystem.

You can use a React component as a custom widget. And it will work with the survey-react library. But SurveyJS Creator is based on the survey-knockout library and React component will not work here. If you want custom widget will be able in SurveyJS Creator (and consequently in all other platforms) this widget should be implemented in platform (framework) independent manner.

Thanks, Serge
SurveyJS Team