CODEWITHSUNDEEP
javascriptjquerysvgraphaelmapael
alexc
alexc

Reputation: 1310

Chaining jQuery events together with Raphael/Mapael

I'm using a Mapael, a Raphael plug in to create an interactive map. I'm looking to colour one area of the map when clicked, and then when the area is clicked again revert it back to the default colour. Here is a plnk;

http://plnkr.co/edit/VNUYsO0TeX7AIdLqLjiG

As you can see, you are only able to click on one part of the map. The problem however is when you use the list item. I would like to have both of the functions working together, so there can only be one area of the map appearing green at any one time.

Here is the code which I think needs to change;

JavaScript:

 var green = "#9FCC3B";
 var grey = "#ededed";
 var previousSelectedElementId = null;

  $("ul#countries li a").click(function() {
    var updatedOptions = {
        'areas': {}
      },
      inputVal = $(this).attr("map")

    if (previousSelectedElementId !== null) {
      updatedOptions.areas[inputVal] = {
        attrs: {
          fill: grey
        }
      }

    }

    if (inputVal) {
      updatedOptions.areas[inputVal] = {
        attrs: {
          fill: green
        }
      };
      previousSelectedElementId = inputVal;
    } else {
      updatedOptions.areas[inputVal] = {
        attrs: {
          fill: grey
        }
      };
      previousSelectedElementId = null;
    }


    $(".mapcontainer").trigger('update', [updatedOptions, {},
      []
    ]);

    $("#selectCountry").html($(this).text())
  });

HTML:

<ul>
    <li><a href="#" id="selectCountry">France</a>
      <ul id="countries">
        <li><a href="#" map="BE">Belgium</a></li>
        <li><a href="#" map="FR">France</a></li>
        <li><a href="#" map="NL">Netherlands</a></li>
      </ul>
    </li>
  </ul>

Currently, when a list item is clicked it takes the map attribute which are the same as the path identifiers in the map.js file, and then uses the updatedOptions to perform the colour change.

I'm not sure If I can reuse the previousSelectedElementId to replicate the same functionality which works with the click event?

Hopefully I've explained the problem well enough, If any more info is required I can provide as needed.

Cheers

EDIT:

I've been playing around with it a little more, and thought the possibility of linking the selection to a hidden text box and using the .one handler? Unfortunately I can't get it to work, but here is a plnk if anyone thinks the idea is a viable alternative;

http://plnkr.co/edit/4dskLo0w1XZkPckyE61z?p=info

(It works when you enter ('FR', 'NL', 'BE' etc manually)

Upvotes: 2

Views: 459

Answers (1)

Tim Herbert
Tim Herbert

Reputation: 120

I found a solution to something like this You add this into your click function in Mapael. You define previousSelectedElementId as null outside of the whole mapael function. It doesn't do exactly what you want but it's pretty close.

if (previousSelectedElementId !== null) {
    newData.areas[previousSelectedElementId] = {
        attrs: {
            fill: "rgba(255,255,255,0.3)"
        }
    };
}

if (mapElem.originalAttrs.fill == "rgba(255,255,255,0.3)") {
    newData.areas[id] = {
        attrs: {
            fill: "rgba(0,0,0,1)"
        }
    };
    previousSelectedElementId = id;
} else {
    newData.areas[id] = {
        attrs: {
            fill: "rgba(255,255,255,0.3)"
        }
    };
    previousSelectedElementId = null;
}

$(".world").trigger('update', [{mapOptions: newData}]);

Upvotes: 1

Related Questions