Adding Custom Controls

The second Google Mercator example includes custom controls to control the foreground and background layers of the map.

Take a look at the code and you will see that this was done by first creating arrays with the information for the background layers. Then, the background layers are all added to the map and an HTML string is created for the radio buttons that will be in the control. The UpdateBackgrounds(Index) function simply sets the current background. This function is used with each of the radio buttons. Note that the MainContainer had to be a global variable for this work.

UpdateBackgrounds=function(Index)
{
	// set the selected background which will make it visible
	TheMainContainer.SetSelectedBackgroundIndex(Index);
}
 

The code is very similar for the foreground layers except that the function to update the layers is a bit more complicated. In this case, we need to check the value of the checkbox selected attribute and the make the layer visible or hidden.

UpdateLayers=function(FeatureIndex)
{
	// get the scene
	var TheScene=TheMainContainer.GetScene();
	var TheGeo=TheMainContainer.GetGeo();
	
	// get the layer whose status changed
	var TheLayer=TheMainContainer.GetLayer(FeatureIndex);
	
	// get the check box element
	var TheCheckBox=document.getElementById("CheckBox_"+FeatureIndex);
	
	// if the box was checked, make the layer visible, otherwise, hide it
	if (TheCheckBox.checked)
	{
		TheLayer.SetVisible(true);
	}
	else
	{
		TheLayer.SetVisible(false);
	}
	LayerListBox.style.visible="hidden";
}