Toggle selected color of area on click amMap

Question

I've been working on a map similar to this example where multiple countries can be selected at once when clicked. I added this to the world map, but I wanted to change it so that when clicked once, the country would turn blue, when clicked twice, the country would turn red, and when clicked a third time, it would become unselected. With what I currently have working, when a country is clicked twice, it only appears red after moving over another country. Am I not setting the selected color correctly? I've looked over the documentation and some more examples, but I haven't been able to find a solution. Any help is greatly appreciated. Here's what I have so far.

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      if (event.mapObject.showAsSelected == false || typeof event.mapObject.showAsSelected == 'undefined') {
        event.mapObject.showAsSelected = true;
      } else if (event.mapObject.showAsSelected == true && event.mapObject.selectedColorReal == "#5EB7DE") {
        event.mapObject.selectedColorReal = "#CC0000";
      } else {
        event.mapObject.showAsSelected = false;
        event.mapObject.selectedColorReal = "#5EB7DE"
        map.returnInitialColor(event.mapObject);
      }
    }
  }],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Answer 1

Don't update selectedColorReal as its an internal property that is handled differently, which explains why your color only changes when you roll over. Set the area's selectedColor instead.

As for picking which color to use, you'll want to set some kind of custom property that tracks how many times an area has been clicked on to determine which color to use in selectedColor before finally deselecting it by setting showAsSelected to false and calling the area's validate method to update it, for example:

  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>