Activer/désactiver la couleur de la zone sélectionnée Cliquer sur amMap

Question

J'ai travaillé sur une carte similaire à this example où plusieurs pays peuvent être sélectionnés en même temps. J'ai ajouté ceci à la carte du monde, mais je voulais le changer de façon à ce qu'une fois cliqué une fois, le pays devienne bleu, cliqué deux fois, le pays deviendrait rouge, et une fois cliqué une troisième fois, il deviendrait non sélectionné. Avec ce que j'ai actuellement en train de travailler, lorsqu'un pays est cliqué deux fois, il n'apparaît rouge qu'après avoir traversé un autre pays. Est-ce que je ne règle pas correctement la couleur sélectionnée? J'ai examiné la documentation et d'autres exemples, mais je n'ai pas été en mesure de trouver une solution. Toute aide est grandement appréciée. Voici ce que j'ai jusqu'ici.

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

Ne pas mettre à jour selectedColorReal comme une propriété interne qui est gérée différemment, ce qui explique pourquoi la couleur change que lorsque vous roulez sur. Définissez plutôt la zone selectedColor.

Comme pour choisir quelle couleur à utiliser, vous aurez envie de mettre une sorte de propriété personnalisée qui permet de suivre le nombre de fois qu'une zone a été cliqué pour déterminer quelle couleur à utiliser dans selectedColor avant décochant enfin par la mise showAsSelected à faux et appeler validate de la zone méthode pour la mettre à jour, par exemple:

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