NewSignature / us-map

An interactive map of the United States using Raphaël
BSD 2-Clause "Simplified" License
279 stars 184 forks source link

How to update the statespecific styles on a button click? #32

Open mmbont0 opened 10 years ago

mmbont0 commented 10 years ago

How to update the statespecific styles on a button click? I initialized the map with a set of colors. upon a button click [no postback] the colors for some states should change. initializing the us map plugin again in the button click does not seem to work.. Any way to get this working?

jtfairbank commented 10 years ago

Seconding this.

jasonseminara commented 10 years ago

Is this project still maintained? I'd like to use this on a public website, but I'd like to be certain that this will be supported in the future.

jtfairbank commented 10 years ago

Well... it is open source... so you could fork it and be the new maintainer!!! :D

http://www.highcharts.com/products/highmaps Looks like a good alternative.

mlnisd commented 8 years ago

@mmbont0 @jtfairbank May be a year too late, but have you tried the "trigger" method? I use it to highlight whole regions instead of one state.

//Here is my button I made in my html file

<button id="over-ne">Northeast</button>
//Create the regions
var neStates = ['VT','NH','MA','RI','CT','NY','ME'];

//Init the usmap
$('#map').usmap({
    showLabels: false,
    'stateStyles': {
        fill: '#fff', 
        'stroke-width': 1,
        'stroke' : '#ccc'
    },
    stateSpecificStyles: {
        'VT': {fill: 'purple'},
        'NH': {fill: 'purple'},
        'MA': {fill: 'purple'},
        'RI': {fill: 'purple'},
        'CT': {fill: 'purple'},
        'NY': {fill: 'purple'},
        'ME': {fill: 'purple'}
    }
});

//Northeast mouseover button
$('#over-ne').mouseover(function(event){
    //loop through the NE array of states and use the usmap trigger method to fire the event you want
    for(i = 0; i < neStates.length; i++){
        $('#map').usmap('trigger', neStates[i], 'mouseover', event);
     }
});
//Northeast mouseout button
$('#over-ne').mouseout(function(event){
    for(i = 0; i < neStates.length; i++){
        $('#map').usmap('trigger', neStates[i], 'mouseout', event);
    }
});
jtfairbank commented 8 years ago

@mlnisd I appreciate the tip but we switched to HighMaps a long time ago. I've actually moved on from that particular project as well.

Seems like this particular project is dead as well.