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"
        }
      }
    },

  });
});