Build an AJAX Based Map Viewer in ASP.NET 2.0
page 4 of 7
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32780/ 70

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 = "";
 
      //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});
      }
}

View Entire Article

User Comments

Title: ImageInfo   
Name: sliptnock
Date: 2008-10-08 10:45:34 AM
Comment:
In the listing 7 in public " ImageInfo [] " getmapinfo{} gives me a mistake " The type or the name of the space of names 'imageinfo' does not exist in the space of names 'MapViewer' (is reference absent of ensamblado?). To which it owes?






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-04-16 9:19:01 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search