Want to Make States Active On Click for jQuery Map

[alabamaseo]

Hello,

I am making a jQuery map for a client who has offices in many states. Right now, when I click on a state, the text at the bottom remains until I click on another state, but I would like for the state to keep the color red after I click it. It will be fine if states I hover over keep the same color, I just want to make sure the active state that the user clicks on is able to stand out.

Can someone please help me learn how to do this? I am new to Javascript so please bear with me if this is a stupid question. Thank you in advance for your help!

Here is my code thusfar:

<div id="map" style="width: 500px; height: 500px;"></div>
<div id="notif" style="width: 500px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/raphael.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>

<script>
	$(document).ready(function() {
		$('#map').usmap({
			stateSpecificStyles: {
				'AL': {fill: 'yellow'},
				'MS': {fill: 'yellow'},
				'GA': {fill: 'yellow'},
				'FL': {fill: 'yellow'},
				'TN': {fill: 'yellow'},
				'SC': {fill: 'yellow'},
				'NC': {fill: 'yellow'},
				'VA': {fill: 'yellow'}			},
			stateSpecificHoverStyles: {
				'AL': {fill: 'red'},
				'MS': {fill: 'red'},
				'GA': {fill: 'red'},
				'FL': {fill: 'red'},
				'TN': {fill: 'red'},
				'SC': {fill: 'red'},
				'NC': {fill: 'red'},
				'VA': {fill: 'red'}
	},
			click: myCallback
		});
	});


	function myCallback(event, data)
	{
		if ('AL' == data.name) // this text for Alabama
		{
			$('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
		}
		else if ('VA' == data.name) // text for Virginia
		{
			$('#notif').html('Virginia is under the cursor!');
		}
		else if ('GA' == data.name) // text for Georgia
		{
			$('#notif').html('Georgia is under the cursor!');
		}
		else if ('TN' == data.name) // text for Tennessee
		{
			$('#notif').html('Tennessee is under the cursor!');
		}
	}
</script>

[Pullo]

Hi there,

And welcome to the forums.

It took a while, but I found an answer to your problem.
What you need to do is to alter the code in the file "jquery.usmap.js" (you also need to be hosting it locally to do this).

At about line 256 in this file (latest version), you'll find the following code:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];
 
  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
}

You need to add the following line before the final curly brace:

this.stateShapes[state].node.setAttribute("id", state);

The code should now should read:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];
 
  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
  this.stateShapes[state].node.setAttribute("id", state);
}

What this does, is give every state on the map its own id which corresponds to the id used in the state specific styles (Alabama has id ="AL", California has id="CA" etc.)

Now in your click handler you can write:

$("#map > svg > path").each(function(){
  $(this).css('fill', '');
});
$('#' + data.name).css('fill', 'pink');

The first bit gets a reference to all of the states on the map and removes the fill property from all of them.
This is so that only one state can be highlighted at once.
The second bit changes the colour of the state that was just selected.

I've made a simple demo showing what I mean here: http://hibbard.eu/blog/pages/us-map/example/

I hope this helps you.

P.S. I can't take credit for the first part of this. I found a big hint on the project's issue tracker on GitHub: https://github.com/NewSignature/us-map/issues/3

P.P.S. If you want me to send you over the files, just PM me.

[alabamaseo]

Again, thank you so much for all of your help! I am still a little confused as to how I would add the click handler to the code I have in place. Would I place it before the myCallback?

[Pullo]

Hey there,

No problem!

You currently have this:

function myCallback(event, data)
  {
  if ('AL' == data.name) // this text for Alabama
  {
    $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
  }
    else if ('VA' == data.name) // text for Virginia
  {
    $('#notif').html('Virginia is under the cursor!');
  }
    else if ('GA' == data.name) // text for Georgia
  {
    $('#notif').html('Georgia is under the cursor!');
  }
    else if ('TN' == data.name) // text for Tennessee
  {
    $('#notif').html('Tennessee is under the cursor!');
  }
}

change it to this:

function myCallback(event, data)
  {
  if ('AL' == data.name) // this text for Alabama
  {
    $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
  }
    else if ('VA' == data.name) // text for Virginia
  {
    $('#notif').html('Virginia is under the cursor!');
  }
    else if ('GA' == data.name) // text for Georgia
  {
    $('#notif').html('Georgia is under the cursor!');
  }
    else if ('TN' == data.name) // text for Tennessee
  {
    $('#notif').html('Tennessee is under the cursor!');
  }
 
  $("#map > svg > path").each(function(i){
    $(this).css('fill', '');
  });
  $('#' + data.name).css('fill', 'pink');
}

This will only work if you have altered the "jquery.usmap.js" file.

HTH

[alabamaseo]

For some reason this is not making the state remain pink after it is selected. It works exactly the same as before I added the code.

[alabamaseo]

Is there any reason you can think of that this code would be working properly with your map and not mine? Could there be something overriding that section?

I have made all of the changes you have suggested exactly.

Thank you again for taking so much time from your busy schedule to help me solve this issue.

[Pullo]

Hi there,

Is it possible to post a link to a page where I can see this?
I'm sure it'll be something simple.

[alabamaseo]

It can be found at http://alabamaseo.org/map

[Pullo]

Hi there,

The problem is that you are still linking to the jquery.usmap.js file on GitHub.

<script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>

You need to download this file, alter it as I describe in my first post, then upload it to your own server.

Does that make sense?