Nowadays, AJAX has become one of the coolest features for
building interactive browser-based client applications. The famous Google Maps
show a distinct advantage over traditional map service systems in availability
and response speed. In this article I will show you how to build an Ajax.NET
based map viewer in ASP.NET 2.0.
First, let us take a look at the final result of the map
view sample, as shown in Figure 1.
Figure 1 –The final result of the map viewer
sample.
The sample in this article provides the following functions:
1. When the user moves the “eagle-eye” in upper-left small
map, he can see a corresponding detailed/magnified bigger one on the right side
of the web page.
2. Obtain the real-time coordinates of the mouse so as to
easily locate the destination.
3. Show detailed information of destination location by
clicking the corresponding position in the map.
Hint: This article assumes that you
understand JavaScript and basic AJAX programming. And to debug the sample
provided here, you should have installed Visual Studio 2005 and SQL Server 2005
(or SQL Server 2005 Express Edition) on your machine. Also, you will need to
download the open source project-AjaxPro.NET.
In this map view sample, there are three key techniques to
be solved: 1. how to achieve the eagle-eye effect, 2. how to update the partial
image dynamically and 3. how to popup the corresponding tips when clicking the
destination in the map.
