MapHilight issue

Question

I'm building a Lightning Component using jQuery v1.7.2 and mapHilight.

I'm showing an imaging and plotting its portions with map tag. I want to highlight these portins with mapHilight.

When I try to implement mapHiLight I'm getting the following error:

Uncaught TypeError: Cannot read property 'style' of null throws at /resource/1506205722000/mapHilight:4:308

Any help appreciated.

I attached my code below.

HotspotImage.App

<aura:application extends="force:slds">

    <aura:attribute name="Question" type="Map" access="public" default='{"Id" : "a0J3600000ARwhNEAT", 
                                                                        "Hotspot_Image_Properties__c" : {"area":[{"shape":"circle","$$hashKey":"object:6","coords":"112.5,107,43.60","areaValue":"face"}],"questionImageId":"00P3600000H7WZIEA3","imageWidth":240,"imageHeight":320}}'/>

    <c:createHotspotImage  hotspotImage="{!v.Question.Hotspot_Image_Properties__c}"/>

</aura:application>

createHotspotImage

<aura:component access="public">

    <ltng:require scripts="{!join(',', $Resource.jquery, $Resource.mapHilight)}" afterScriptsLoaded="{!c.scriptsLoaded}"/>

    <aura:attribute name="imagePrefix" type="String" default="/servlet/servlet.FileDownload?file=" access="public"/>
    <aura:attribute name="hotspotImage" type="Map" access="public"/>


    <img aura:id="map" class="map" src="{!v.imagePrefix + v.hotspotImage.questionImageId}" usemap="{!'#'+v.hotspotImage.questionImageId}" width="{!v.hotspotImage.imageWidth}" height="{!v.hotspotImage.imageHeight}"/>

    <map id="imgMap" class="tabs" name="{!v.hotspotImage.questionImageId}">
        <aura:iteration items="{!v.hotspotImage.area}" var="area" indexVar="index">
            <area aura:id="area" shape="{!area.shape}" coords="{!area.coords}" title="{!area.areaValue}" data-index="{!index}"/>
        </aura:iteration>
    </map>


</aura:component>

createHotspotImageController.js

 ({
       scriptsLoaded : function(cmp, event, helper){
           $(function() {
                $('.map').maphilight({fade: false});
           });
       }
  })

Answer 1

I think there might be several things to point out,

1. I dont see you referencing Jquery in your component
2. The version of JQuery that you mention, is not supported by locker service (enforced if your component is api 40+)
3. mapHighlight doesn't seem supported either.

For a list of supported libraries, you can refer to this post.