www.webdeveloper.com
Results 1 to 2 of 2

Thread: Trying to Make States Active On Click for jQuery Map

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    1

    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>

  2. #2
    Join Date
    Mar 2013
    Location
    india
    Posts
    4

    JQVmap might be useful

    You can try the JS from following map which is free to download. http://jqvmap.com/

    Keep me posted if it worked or not. If not, i can try couple of solutions.


    -Pratik

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles