CODEWITHSUNDEEP
javascriptamchartsammap
Rabinder Bisht
Rabinder Bisht

Reputation: 604

Change color of selected area in amMap with different color from adjacent area,

In amcharts amMap, when one selects a region then it changes its color. But every time, it is the same color, when select multi areas. How to make it a different color with every selection and the color of an area should be different from the adjacent areas. JsFiddle

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "black",
    "panEventsEnabled": true,
    "backgroundColor": "#00aeff",
    "backgroundAlpha": 1,
    "dataProvider": {
        "map": "indiaLow",
        "getAreasFromMap": true,
        "images": [{
            "id": "backButton",
            "label": "Back to continents map",
            "rollOverColor": "#ffffff",
            "labelRollOverColor": "#ffffff",
            "useTargetsZoomValues": true,
            "right": 100,
            "top": 30,
            "labelFontSize": 10,
            "selectable": true,
            "imageURL": "http://simplemaps.com/static/svg/in/in.svg",
            "width": 32,
            "height": 32,
            "label": "District Level Map"
        }]
    },
    "areasSettings": {
        "autoZoom": false,
        "color": "#CDCDCD",
        "colorSolid": "#5EB7DE",
        "selectedColor": "#5EB7DE",
        "selectedColor": getRandomColor(),
        "outlineColor": "#666666",
        "rollOverColor": "#ffffff",
        "rollOverOutlineColor": "#FFFFFF",
        "selectable": true
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function(event) {
        //I tried this but not working. I think map is not taking the new areasettinng values.
            map.areasSettings = {selectedColor : ""};
            map.areasSettings = {selectedColor : getRandomColor()};
            map.selectedObject = map.dataProvider;
            event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
            map.returnInitialColor(event.mapObject);
            var states = [];
            for (var i in map.dataProvider.areas) {
                var area = map.dataProvider.areas[i];
                if (area.showAsSelected) {
                    states.push(area.title);
                }
            }
        }
    }],
    "export": {
        "enabled": false
    }
});
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.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" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<div id="chartdiv"></div>

The selection of an area give some color to that area and then another area selected then it should be given another color. How to achieve this thing?

Upvotes: 0

Views: 2318

Answers (1)

xorspark
xorspark

Reputation: 16012

You have to assign the new individual color to the area itself and then call validateNow or validateData afterward to redraw the map with the changes. Setting it in areasSettings will potentially change all of the areas' colors (though, in your case, it won't do anything since you didn't call validateNow/Data). Here's your updated clickMapObject event:

"listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
        map.selectedObject = map.dataProvider;
        event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
        map.returnInitialColor(event.mapObject);
        var states = [];
        for (var i in map.dataProvider.areas) {
            var area = map.dataProvider.areas[i];
            if (area.showAsSelected) {  
                //set a new color only if it wasn't assigned before
                area.selectedColor = area.selectedColor || getRandomColor(); 
                states.push(area.title);
            }
        }

        // set same zoom levels to retain map position/zoom in case a selection was made after a zoom
        map.dataProvider.zoomLevel = map.zoomLevel();
        map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude();
        map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude();
        map.validateNow(); //redraw the map with the new selection/colors.
    }
}],

Demo below:

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "black",
    "panEventsEnabled": true,
    "backgroundColor": "#00aeff",
    "backgroundAlpha": 1,
    "dataProvider": {
        "map": "indiaLow",
        "getAreasFromMap": true,
        "images": [{
            "id": "backButton",
            "label": "Back to continents map",
            "rollOverColor": "#ffffff",
            "labelRollOverColor": "#ffffff",
            "useTargetsZoomValues": true,
            "right": 100,
            "top": 30,
            "labelFontSize": 10,
            "selectable": true,
            "imageURL": "http://simplemaps.com/static/svg/in/in.svg",
            "width": 32,
            "height": 32,
            "label": "District Level Map"
        }]
    },
    "areasSettings": {
        "autoZoom": false,
        "color": "#CDCDCD",
        "colorSolid": "#5EB7DE",
        "selectedColor": "#5EB7DE",
        "selectedColor": getRandomColor(),
        "outlineColor": "#666666",
        "rollOverColor": "#ffffff",
        "rollOverOutlineColor": "#FFFFFF",
        "selectable": true
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function(event) {
            map.selectedObject = map.dataProvider;
            event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
            map.returnInitialColor(event.mapObject);
            var states = [];
            for (var i in map.dataProvider.areas) {
                var area = map.dataProvider.areas[i];
                if (area.showAsSelected) {  
                    //set a new color only if it wasn't assigned before
                	  area.selectedColor = area.selectedColor || getRandomColor(); 
                    states.push(area.title);
                }
            }
            
            // set same zoom levels to retain map position/zoom in case a selection was made after a zoom
            map.dataProvider.zoomLevel = map.zoomLevel();
            map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude();
            map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude();
            map.validateNow(); //redraw the map with the new selection/colors.
        }
    }],
    "export": {
        "enabled": false
    }
});
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.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" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<div id="chartdiv"></div>

Upvotes: 2

Related Questions