How do I update the background color of specific countries within a Mapel SVG Map?

Question

I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.

I'm trying to change the fill color of specific individual countries.

I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?

I was wondering if this is possible with Mapael? and Where does one grab the SVG file from?

I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).

See screenshot of the files and folders.

svg code file

Answer 1

You have to use Mapael special function/params:

$(function () {
  $("yourMapElementSelector").mapael({
    // Customize some areas of the map
    areas: {
      "US": {
        attrs: {
          fill: "#488402"
        }
        , attrsHover: {
          fill: "#a4e100"
        }
      }
    },

  });
});

Answer 2

I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:

<g id="france">
or
<path id="france">

Or whatever shapes you use and then just define a CSS class similar to this:

/* if the paths are inside a group */
.svgactive path {
   fill: red;
}

/* if the paths are standalone */
path.svgactive {
   fill: red;
}

And just toggle the class .svgactive on your specific id inside the SVG file.