Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Basic jQuery question

    Hello,

    I am developing landing pages for several clients, and I will need to use a map to show where my clients have offices (most have offices in different states, some have several offices in particular states). I want the states to start off highlighted in a certain color, and when the user scrolls over the state, I'd like for a box (which I can format using HTML/CSS) to display underneath the map. This box will include the address/contact number of each office in the selected state. Can someone please help me learn how to add the HTML box?

    Here is my code so far:

    Code:
    <div id="map" style="width: 600px; height: 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'}
    			}
    		});
    	});
    </script>

    Thanks in advance!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Code:
    <div id="map" style="width: 600px; height: 500px;"></div>
    <div id="info"></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'}
    			},
    		mouseoverState: {
    				'AL': function(){showInfo('al')},
    				'MS': function(){showInfo('ms')},
    				'GA': function(){showInfo('ga')},
    				'FL': function(){showInfo('fl')},
    				'TN': function(){showInfo('tn')},
    				'SC': function(){showInfo('sc')},
    				'NC': function(){showInfo('nc')},
    				'VA': function(){showInfo('va')} 
    			}	
    		});
    		
    	var states={
    	al:" here's some AL info",
    	ms:"some stuff about MS",
    	ga:"the deets for GA",
    	fl:"FL contacts",
    	tn:"TN information",
    	sc:"SC data",
    	nc:"our man in NC",
    	va:"everything you ever wanted to know about VA*"
    	}	
    	
    	function showInfo(state){
    		document.getElementById("info").innerHTML=states[state];
    		}
    	});
    </script>

  • Users who have thanked xelawho for this post:

    sakina (12-17-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    10
    Thanked 0 Times in 0 Posts
    For some reason, that made the map completely disappear. What could have caused this?

    Can I put div's around the text to style the content boxes?

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I was able to make the map display. Thank you for your help!

    How can I go about styling the text?

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    10
    Thanked 0 Times in 0 Posts
    styling is simpler than i thought it would be

    Thank you for all your help!

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    10
    Thanked 0 Times in 0 Posts
    How would I make a state remain active (stay the new color, even if I scroll over other states) after clicking it?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Code:
    <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'}
    			},
    		mouseoverState: {
    				'AL': function(){showInfo('al')},
    				'MS': function(){showInfo('ms')},
    				'GA': function(){showInfo('ga')},
    				'FL': function(){showInfo('fl')},
    				'TN': function(){showInfo('tn')},
    				'SC': function(){showInfo('sc')},
    				'NC': function(){showInfo('nc')},
    				'VA': function(){showInfo('va')} 
    			},
    			
    		click: function(event, data) {
    		if(this.stateSpecificStyles[data.name]){
    			this.stateSpecificStyles[data.name].fill= 'red';
    				}
    			}			
    		});
    		
    	var states={
    	al:" here's some AL info",
    	ms:"some stuff about MS",
    	ga:"the deets for GA",
    	fl:"FL contacts",
    	tn:"TN information",
    	sc:"SC data",
    	nc:"our man in NC",
    	va:"everything you ever wanted to know about VA*"
    	}	
    	
    	function showInfo(state){
    		document.getElementById("info").innerHTML=states[state];
    		}
    	});
    </script>


  •  

    Posting Permissions

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