Adding Custom Controls to Change the Map

The last step is to add the radio buttons that change the attribute that is show in the legend and used to colorize the map. The code below should be added to the OnLoad() function to create the DIV element for the control.

	//****************************************************************************
	// setup the DIV for the attribute list with ' buttons to change the legend
	
	var TheCanvasElement=TheCanvasMap.GetElement(CanvasMap.CANVAS_CONTAINER);
	var TheAttributeListBox=document.createElement("DIV");
	TheAttributeListBox.className="CM_AttributeHeadingList";
	
	TheCanvasElement.appendChild(TheAttributeListBox);
	CMUtilities.AbsolutePosition(TheAttributeListBox,10,390,110,40);
	
	var TheHTML=
		"<input type='radio' name='gender' onClick='UpdateLegend(\"pop_est\")' checked>Population<br> \
		<input type='radio' name='gender' onClick='UpdateLegend(\"gdp_md_est\")' >GDP";
  
	TheAttributeListBox.innerHTML=TheHTML;
	

The code contains two radio buttons, each of which has a call to "UpdateLegend()". The UploadLegend() function passes in a different attribute for each radio button changing which one is used ot stylize the map.