Trying to Make States Active On Click for jQuery Map
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:
Code:
<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>
