For now, we have succeeded in viewing the map itself. That
is, however, not enough and we should provide the corresponding auxiliary
information for users to obtain more useful information from the map. As is
seen from Figure 1 above, when users click any part of the map, the system will
indicate some explanation. To achieve this goal, the first matter to be solved
is to supply a data source. Since the image itself can not hold explaining
information, we need to use data from the database to index the map information.
In this sample, indexed data are persisted in the table MapInfo
and we can create it with the following SQL clause.
Listing 9- SQL clause for creating the Mapinfo
table.
Create table [MapInfo] (
[xPos] [int] NTO NULL,
[yPos] [int] NTO NULL,
[description] [varchar] (255) COLLATE dfsdf NOT NULL,
CONSTRAINT [IX_MapInfo] UNIQUE NONCLUSTERED
(
[xPos],
[yPos],
) on [PRIMARY]
) ON [PRIMARY]
GO
Here, fields xPos and yPos represent x and y coordinates
respectively, while description represents info for point (xPos, yPos).
Server side:
To get the nearest indexing information when clicking the
map, we should add another server side method named GetPosInfo(int x, int y).
From middle school algebra, we know the “nearest” distance equals the linear
distance between the clicking point and the corresponding point. Thus, to
locate the points whose linear distances from point (300,300) are less than 30,
we can use the following SQL clause.
Listing 10
SELECT TOP 1 description FROM MapInfo
WHERE (xPos-300)*((xPos-300)+ (yPos-300)*((yPos -300)<30*30
ORDER BY (xPos-300)*((xPos-300)+ (yPos-300)*( (yPos -300)
Now, look into the code for GetPosInfo(int x,int y), as
listed below.
Listing 11
///Obtain detailed information of the map position
/// <param name="x">x coordination of mouse-clicking site </param>
/// <param name="y">y coordination of mouse-clicking site </param>
/// <returns> Info for the nearest mark
///point, while if the distance is greater than 30 an empty string is
///returned</returns>
[AjaxMethod]
public string GetPosInfo(int x, int y)
{
//the max distance from the mark point
int iR = 30;
//to store the returned detailed info
string strRet = "";
//Get ready for connection
SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);
// SQL command
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = string.Format(
"SELECT TOP 1 description FROM MapInfo " +
"WHERE ((xPos-{0})*(xPos-{0}) + (yPos-{1})*(yPos-{1})) < {2} " +
"ORDER BY ((xPos-{0})*(xPos-{0}) + (yPos-{1})*(yPos-{1}))",
x, y, iR * iR
);
try
{
//start connecting…
conn.Open();
//DataReader object
SqlDataReader dr = cmd.ExecuteReader();
//read description information
if (dr.Read())
{
strRet = dr.GetString(0);
}
}
catch (SqlException)
{
}
finally
{
//close the connection
conn.Close();
}
return strRet;
}Client side:
To view the detailed information of the map, the onmouseup
event handler should be added to the <img> object on the web page in
client-side code. In this response function we obtain the corresponding
detailed map info for the mouse clicking position with asynchronous Ajax methods.
Listing 12
//response function for mouse clicking
img.onmouseup = function ()
{
//calculate the mouse position in the big image
//here we must allow for page scrolling
var x = event.x + document.body.scrollLeft - 400 + 5 * oldX;
var y = event.y + document.body.scrollTop - 80 + 5 * oldY;
//record the mouse pos
mouseX = event.x;
mouseY = event.y;
//Get the position info
GetPosInfo(x, y);
}
//Call AJAX method to obtain postion info
function GetPosInfo(x, y)
{
//show position info via a ballon-like tip box
ball = new JSBalloon();
ball.autoHide = true;
ball.autoAway = false;
ball.showCloseBox = true;
//asychronously invoke GetPosInfo method
MapViewer.Maps.GetPosInfo(x, y, GetPosInfo_callback);
}
//Callback for showing returned info
function GetPosInfo_callback(response)
{
var strInfo = response.value;
if (strInfo != undefined && strInfo != "" && strInfo != null)
{
//position info inside the tip box obtained by AJAX method
ball.Show({title:'Map Info',icon:'Info',message:strInfo,top:mouseY - 100,left:mouseX});
}
} 
