Print   Add To Favorites     Email To Friend   Rate This Article Build an AJAX Based Map Viewer in ASP.NET 2.0
 page 4 of 7
by
Feedback
Views (Total / Last 10 Days): 31704/ 127
Article Contents:

View the detailed information

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 = "";

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();
{
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});
}
}```

 « (Page 3) View Entire Article (Page 5) »