Mouse enters a plot and override that area's color behind it.

[indigo-sam]

This is the mapOption object that I am using. I am having hard time to figure out how to keep and change the the state's color when mouse enters its plot. There are several plots on the each single area. The default attrsHover on area works but the color disappears when mouse enters its plot, I'd like to keep the color(assume it is color A) on until mouse enters a special plot and change the area colorA to color B. How would you do this in eventHandler? When I tried to edit path's fill attribute directly outside of the object, it worked like a flash for 0.1 seconds and immediately get override by defaultArea's attrs value. In another word, I can't override the default's area hover color out of .mapael() function. Edit, I found the way to trigger area color while hover on plots. However, it doesn't fire area's mouseleave event when mouse quickly hovers around. Thus the color stays at hover color if mosue movement is fast.

{
    map: {
        name: "usa_states",
        defaultArea: {
            attrs: {
                fill: "#fff",
                stroke: "#fff"
            },
            attrsHover: {
                fill: "#ccf1fd"
            },
            eventHandlers: {
                mouseenter: function(e, id, mapElem, textElem, elemOptions) {
                    var category = Tooltip.checkCategoryOnEvent();
                    if (category === 'a') {
                        elemOptions.attrsHover.fill = '#ccf1fd';
                    } else
                    if (category === 'b') {
                        elemOptions.attrsHover.fill = '#f6d9d4';
                    } else
                    if (category === 'c') {
                        elemOptions.attrsHover.fill = '#ded5e8';
                    } else
                    if (category === 'd') {
                        elemOptions.attrsHover.fill = '#abd8ab';
                    }
                },
                mouseleave: function(e, id, mapElem, textElem, elemOptions) {
                    elemOptions.attrsHover.fill = '#ffffff';
                }
            }
        },
        defaultPlot: {
            type: "image",
            eventHandlers: {
                mouseenter: function(e, id, mapElem, textElem, elemOptions) {
                    $('path[data-id="'+ elemOptions.stateAcronyms +'"]').trigger('mouseenter'); //This works but when mouse quick hover over different areas, it doesn't catch the area's mouseleave event. Thus the area color stays on that color without fading Out to default white color if mouse movement is fast. 
                }
            }
        }
    },
    plots: newData
}

[neveldo]

Hello,

Sorry for my late answer. Which browser do you use ? Could you please create a JSFiddle example of your map that highlight the issue ? It will be helpful to make some tests.

However, it seems to be a JS issue that can be adressed with some workarounds at first sight : http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event

[Indigo744]

@indigo-sam any update or can we close this issue?