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
TheLayer.SetAttributeCellByHeading('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);
			
			// get the information for the information box
			var Name=this.GetAttributeCellByHeading("name_long",FeatureIndex);
			var Population=this.GetAttributeCellByHeading("pop_est",FeatureIndex);
			var Economy=this.GetAttributeCellByHeading("economy",FeatureIndex);
			var Income=this.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=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
	});