Giving Each Feature a Unique Style

The Africa example has different styles for each country. This is done by using the SetFeatureProperties() function with an array where each element in the array contains a style for each feature in the map. This tutorial also shows how to create the legend as the styles for the countries and the legend are tied together.

First, we override the CountryLayer's OnLoad function to update the legend.

	TheFilledCountryLayer.OnLoad=function()
	{
		UpdateLegend("pop_est");
	}

The function below will update the legend.

	/**
* Update the contents of the legend.
* For this, we will get the attribute values for each feature, define a set 
* of colors based on the values and the selected attribute, and then
* set these colors as the colors for filling each feature.
*
* @param Heading - the heading of a column with data (e.g. "pop_est")
*/
function UpdateLegend(Heading)
{
	// colors from ColorBrewer (click on the "Export" tab and copy and paste the "JavaScript" colors)
	var TheColors=['#d7191c','#fdae61','#ffffbf','#abd9e9','#2c7bb6']; // default colors for GNP
	
	// these are the intervals that will appear in the legend
	var Intervals=[0,10000000,20000000,30000000,40000000,50000000]; // default intervals for GNP
	
	if (Heading!="pop_est") // setup colors and intervals for population
	{
		TheColors=['#ffffcc','#c2e699','#78c679','#31a354','#006837'];
		Intervals=[0,10000,50000,100000,500000,1000000];
	}
	
	// get the feature values into an array
	var FeatureValues=TheFilledCountryLayer.GetAttributeArrayByHeading(Heading);
	
	// Get colors to match the values
	var Result=CMUtilities.GetColorsFromArrays(FeatureValues,TheColors,Intervals);
	
	// Setup an array with styles for each feature based on the colors
	var FeatureColors=Result.FeatureColors;
	var FeatureStyles=[];
	for (var i=0;i<TheFilledCountryLayer.GetNumAttributeRows();i++)
	{
		FeatureStyles[i]={
			fillStyle:FeatureColors[i],
			strokeStyle:"rgba(220,220,200,0.8)"
		};
	};
	
	// set the styles into the layer
	TheFilledCountryLayer.SetFeatureProperties(CMLayer.FEATURE_STYLE,FeatureStyles);
	
	// make sure the layer is repainted
	TheFilledCountryLayer.Repaint();

	// remove the legend DIV if needed
	var TheCanvasElement=TheCanvasMap.GetElement(CanvasMap.CANVAS_CONTAINER);
	if (TheLegend!=null) { TheCanvasElement.removeChild(TheLegend); }
	
	// add the legend using the helper function (you can replace this with your own code)
	TheLegend=CMUtilities.AddLegend(TheCanvasElement,TheColors,Result.LegendLabels,10,460,180,115);
	TheLegend.className="CM_Legend";
}

The "SetupInfoBox()" function is a global function that creates the DIV element if needed and then sets it's contents. The function is defined below. You'll also want to add a global variable for the "InfoBox" variable to hold a reference to the info box's DIV element.

/**
   * Setup the information box and display the specified HTML content
   * @param TheHTML - The HTML that will be placed in the box
   */
   function SetupInfoBox(TheHTML)
   {
 if (InfoBox==null) // if the box has not been created, create it
 {
 var TheCanvasElement=TheCanvasMap.GetElement(CanvasMap.CANVAS_CONTAINER);
 InfoBox=document.createElement("DIV");
 InfoBox.className="CM_InfoBox";
 
 TheCanvasElement.appendChild(InfoBox);
 CMUtilities.AbsolutePosition(InfoBox,10,10,280,70);
 }
 
 InfoBox.innerHTML=TheHTML;
 }
 

Changing the Selected Style

You may have also noticed that the selected country has a white outline with a black fill color when we select it. This is done by setting the "SELECTED_STYLE" for the main country layer.

	TheMainCountryLayer.SetProperty(CMLayer.SELECTED_STYLE,{
		fillStyle:"black",
		strokeStyle:"white",
		lineWidth:2
	});