0

I am working on an Interactive US map using this plugin, On initial load one state(FL) will fill with Hover color by default which works great. I need to remove those default (fill) color from the state(FL) when mouser hover in any state. Here is my code

$(document).ready(function () {
    $("#map-container").usmap({
        stateStyles: {
            fill: "#8B1109",
            stroke: "#fff",
            "stroke-width": 1,
            "stroke-linejoin": "round",
            scale: [1, 1],
        },
        stateHoverStyles: {
            fill: "#58adaf",
            stroke: "#fff",
            scale: [1.1, 1.1],
        },
        stateHoverAnimation: false,
        stateSpecificStyles: {
            FL: {
                fill: "#58adaf",
            },
        },
        mouseover: function (event, data) {
            console.log(data);
        },
    });
});

My requirement is hovering on any state Default state(Fl) should back to normal color.

Current status:

Default state

Requirement :When mouse over to California, Florida should fill with default color

Thanks in advance

Jonathan Petitcolas
  • 4,254
  • 4
  • 31
  • 42
Ravichandran S
  • 11
  • 4

1 Answers1

1

This helped me to achieve my requirements by adding new attribute(id) and change the color in the mouseover event.

Changes in the file “jquery.usmap.js”

From this:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, "cursor": "pointer"});
  this.stateHitAreas[state].node.dataState = state;
}

To this:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
  this.stateShapes[state].node.setAttribute("id", state); // New attribute
}

Changes in js file (config)

$('#map-container').usmap({
    'stateSpecificStyles': {
        'FL': {
            fill: "#58adaf",
        }
    },
    'mouseover': function (event, data) {
        $('#map-container > svg > path').each(function (e) {
            $(this).css('fill', '#8B1109');
        })
        $('#' + data.name).css('fill', '#58adaf');
    }
});
Ravichandran S
  • 11
  • 4