Accessing Attributes

You can access the attributes in a vector layer (GeoJSON and others):

var CellValue=TheLayer.GetAttributeCellByHeading("HeadingName",FeatureIndex); // returns a cell (attribute/field) value for a specific feature based on the specified header
var NumRows=TheLayer.GetNumAttributeRows(); // returns the number of rows (features) in the layer
var ColumnIndex=TheLayer.GetAttributeIndexFromHeading('Heading');
TheLayer.SetAttribute('Heading',FeatureIndex); // sets the value in a cell of the attribute table

The code below shows how the Africa example accesses that data in attribute cells to create the HTML that is inserted into the information element.

// override the Layer's mouse down function to put information in the info box
TheMainCountryLayer.MouseDown=function(TheView,RefX,RefY) 
{
	// get the feature selected, if any
	var FeatureIndex=this.In(TheView,RefX,RefY); 
	
	if (FeatureIndex!=-1) // -1 indicates no feature selected
	{
		this.SetSelectedFeature(FeatureIndex);
		
		var TheDataset=this.GetDataset();
				
		// get the information for the information box
		var Name=TheDataset.GetAttributeCellByHeading("name_long",FeatureIndex);
		var Population=TheDataset.GetAttributeCellByHeading("pop_est",FeatureIndex);
		var Economy=TheDataset.GetAttributeCellByHeading("economy",FeatureIndex);
		var Income=TheDataset.GetAttributeCellByHeading("income_grp",FeatureIndex);
		
		// convert the informatin to an HTML string
		var TheHTML="<div>";
		TheHTML+="Country: "+Name;
		TheHTML+="<br>Population: "+Population;
		TheHTML+="<br>Economy: "+Economy;
		TheHTML+="<br>Income: "+Income;
		TheHTML+="</div>";
		
		// set the HTML into the information box
		SetupInfoBox(TheHTML);
	}
	return(true); // we always use the mouse down
};

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=TheMainContainer.GetElement(CMMainContainer.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 "SelectedStyle" for the main country layer.

TheMainCountryLayer.SetSetting("SelectedStyle","fillStyle","black");
TheMainCountryLayer.SetSetting("SelectedStyle","strokeStyle","white");
TheMainCountryLayer.SetSetting("SelectedStyle","lineWidth",2);