Question

Update:

I’ve fixed up my referencing below, and my problem is now more specific.

Background: I’ve got a set paths making up a map. Currently I have a visual on/off state when each region is clicked on, but I only want one region ‘active’ at any given time. I am calling a function which is meant to loop through all the regions, and change the fill colour of any non-active regions back to grey. Currently it seems to create a new set of paths when the following line is run: var obj = rsr.path(pathObj.path);. Below is a screen of the before and after.

I know this isn’t a rendering issue as the new paths are injected into the DOM.

This is my last hurdle on this project, I feel I’m so close!

You can view the page here: http://ochrerecruitment.com.s145292.gridserver.com/job-search/

This is the function I am running at the end of the click event (courtesy of Eliran Malka, thank you):

function onlyOneRegion() {
    for (var state in paths) {
            var pathObj = paths[state];
            var obj = rsr.path(pathObj.path);
            if (pathObj.active) {
                // do something
            } else {
                pathObj.active = false;
                obj.toFront();
                obj.animate({
                    fill: attributes.fill,
                    scale: 1,
                    'stroke' : '#fff',
                    'stroke-width' : 1,
                    transform: 's1'
                }, 150);
            }
    };
}

Thanks again!

Original Question:

I’ve currently got a map that sets a <select> value when clicked. Each region on the map also has a hover state and an on/off state.

The <select> functionality only allows one region to be active at any given time.

My problem is that I can’t figure out how to visually display only one active item. So on click, a region turns on, but I also want it to turn all other regions off.

My full function can be viewed here: http://pastie.org/3675997

The structure of each region is as follows:

var paths = {
    southisland: {
        name: 'southisland',
        path: 'coords',
        active: 'false'
    }

in my click event I have the following if else:

if (this.active) {
    this.active = false;
    this.animate({
        fill: attributes.fill,
        scale: '1',
        'stroke-width' : '1',
        transform: 's1'
    }, 150);                    
} else {
    this.active = true;
    this.animate({
        fill: '#e36f1e',
        scale: '1',
        'stroke-width' : '1',
        transform: 's1'
    }, 150);
}

straight after that I am trying to call the following function:

function onlyOneRegion() {
    for (var state in paths) {
        var obj = rsr.path(paths[state].path);
        if (state[active]) {
        } else {
            state[active] = false;

            obj.animate({
                fill: attributes.fill,
                scale: '1',
                'stroke-width' : '1',
                transform: 's1'
            }, 150);
        }
    };
}

This function doesn’t throw any errors, but doesn’t work wither.

Any help is greatly appreciated!

Answer 1

I ended up solving the updated issue by rewriting my map creation into a function. Each time the a region is clicked on, It remembers that region, the deletes and re-creates the map, matching up the region with the relevant state id and making it active. Not the most elegant solution, but a solution nonetheless.