Comments (4)
@mdance86 did you ever figure this out?
from us-map.
I did not. I had to use some images overlaying each other, instead. Not ideal - but I had a deadline that needed to be met. :)
from us-map.
I was also finding some solution so I did it actually this way may be you can get help now, altough its too late :)
$('#map').usmap({
// $(this).css('fill', 'pink');
stateStyles: {fill: '#4ecdc4', 'stroke': '#fff'},
stateHoverStyles: {fill: '#f5b021'},
'stateSpecificStyles': {
'AL' : {fill: '#eee'},
'AK' : {fill: '#eee'},
'AR' : {fill: '#eee'},
'CO' : {fill: '#eee'},
'GA' : {fill: '#eee'},
'HI' : {fill: '#eee'},
'ID' : {fill: '#eee'},
'IN' : {fill: '#eee'},
'IA' : {fill: '#eee'},
'KS' : {fill: '#eee'},
'KY' : {fill: '#eee'},
'ME' : {fill: '#eee'},
'MD' : {fill: '#eee'},
'MA' : {fill: '#eee'},
'MS' : {fill: '#eee'},
'MO' : {fill: '#eee'},
'MT' : {fill: '#eee'},
'NH' : {fill: '#eee'},
'NM' : {fill: '#eee'},
'ND' : {fill: '#eee'},
'OH' : {fill: '#eee'},
'OR' : {fill: '#eee'},
'PA' : {fill: '#eee'},
'SC' : {fill: '#eee'},
'SD' : {fill: '#eee'},
'TN' : {fill: '#eee'},
'UT' : {fill: '#eee'},
'VT' : {fill: '#eee'},
'VA' : {fill: '#eee'},
'WA' : {fill: '#eee'},
'WY' : {fill: '#eee'}
},
'stateSpecificHoverStyles': {
'AL' : {fill: '#eee', 'cursor': 'pointer'},
'AK' : {fill: '#eee', 'cursor': 'pointer'},
'AR' : {fill: '#eee', 'cursor': 'pointer'},
'CO' : {fill: '#eee', 'cursor': 'pointer'},
'GA' : {fill: '#eee', 'cursor': 'pointer'},
'HI' : {fill: '#eee', 'cursor': 'pointer'},
'ID' : {fill: '#eee', 'cursor': 'pointer'},
'IN' : {fill: '#eee', 'cursor': 'pointer'},
'IA' : {fill: '#eee', 'cursor': 'pointer'},
'KS' : {fill: '#eee', 'cursor': 'pointer'},
'KY' : {fill: '#eee', 'cursor': 'pointer'},
'ME' : {fill: '#eee', 'cursor': 'pointer'},
'MD' : {fill: '#eee', 'cursor': 'pointer'},
'MA' : {fill: '#eee', 'cursor': 'pointer'},
'MS' : {fill: '#eee', 'cursor': 'pointer'},
'MO' : {fill: '#eee', 'cursor': 'pointer'},
'MT' : {fill: '#eee', 'cursor': 'pointer'},
'NH' : {fill: '#eee', 'cursor': 'pointer'},
'NM' : {fill: '#eee', 'cursor': 'pointer'},
'ND' : {fill: '#eee', 'cursor': 'pointer'},
'OH' : {fill: '#eee', 'cursor': 'pointer'},
'OR' : {fill: '#eee', 'cursor': 'pointer'},
'PA' : {fill: '#eee', 'cursor': 'pointer'},
'SC' : {fill: '#eee', 'cursor': 'pointer'},
'SD' : {fill: '#eee', 'cursor': 'pointer'},
'TN' : {fill: '#eee', 'cursor': 'pointer'},
'UT' : {fill: '#eee', 'cursor': 'pointer'},
'VT' : {fill: '#eee', 'cursor': 'pointer'},
'VA' : {fill: '#eee', 'cursor': 'pointer'},
'WA' : {fill: '#eee', 'cursor': 'pointer'},
'WY' : {fill: '#eee', 'cursor': 'pointer'}
},
'mouseoverState': {
'HI' : function(e, data) {
//return false;
}
},
'click' : function(e, data) {
var stateName = data.name;
var stateText = findTextAgainstStateName(stateName);
$('.map-text')
.html(stateText)
.stop()
.css('backgroundColor', '#F5F5F5')
.animate({backgroundColor: '#fff'}, 1000);
}
});
from us-map.
findTextAgainstStateName()
what's this function?
from us-map.
Related Issues (20)
- this.paper.safari is not a function HOT 4
- Selecting multiple states HOT 2
- Must tap map twice to follow link HOT 8
- Responsive? HOT 10
- Single active state?
- Check license
- Change hover color of New England and small state label boxes? HOT 2
- show labels for all US states? HOT 1
- Split a state in two HOT 2
- Adding Text or Text box below the map.
- Add State Specific Content in Alert/Tooltip HOT 1
- No onload ability
- On State hover, how to show some description text about the state? HOT 2
- data HOT 1
- Hover Not working HOT 2
- Can this map show regions? (i.e. Highlight multiple states on hover)?
- Output state name instead of state code HOT 1
- how to add if condition in stateSpecificStyles
- Keyboard support
- Distribute through CDN
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from us-map.