Custom Coordinate Element

This tutorial will show you how to create a custom HTML DIV element and then update it's contents dynamically as the user moves the mouse pointer over the map.

Add the Custom Element

First, add the custom element to the "CanvasContainerID". The code below shows how to do this and set the coordinats to DMS.

//****************************************************************************
// setup the DIV for the coordinates

var TheCanvasElement=TheMainContainer.GetElement("CanvasContainerID");
CoordinateBox=document.createElement("DIV");
CoordinateBox.className="CM_CoordinateBox"
TheCanvasElement.appendChild(CoordinateBox);

CMUtilities.AbsolutePosition(CoordinateBox,350,10,180,16);

Notice that we are setting a variable "CoordinateBox" to hold the coordinate box's element. You'll need to add this variable as a global so the MouseOver function can find it.

Override Mouse Move

JavaScript is very flexible in that you can "override" a function in a JavaScript object after the object has been created. This allows us to replace existing functions with new functions and take control of interactions with the user. The code below overrides the "MouseMove" function for one of your layers. This is called for each layer each time the mouse changes position over your map. Here, we'll use it to update our coordinate box element as the mouse moves.

TheMainCountryLayer.MouseMove=function(TheView,RefX,RefY)
{
	// get the DMS text from CanvasMap and put it into our coordinate box

	var TheProjector=TheMainContainer.GetProjector();
	Text=CMUtilities.GetCoordinateString(RefX,RefY,CMUtilities.COORDINATE_UNITS_DMS,TheProjector,TheView);
	
	TheHTML=""+Text;
	
	CoordinateBox.innerHTML=TheHTML;

	return(false); // return false so other elements get the event
};