Building database and web service driven asynchronous google map application
Map API could help build very cool mashup websites. Often times a back end database is the source of the objects to be drawn on the map and querying for those objects from the database based on the parameters the users choose on the website (e.g., state, city, search criteria) gets complex. Also to improve the user experience, asynchronous map loading is desired so that while the next batch of objects is being retrieved from the server, the current ones on the map could continue functioning. To address all these challenges and build a smooth database driven asynchronous loading map application, web service can serve as the bridge between the server side complex data model and the client side map drawing logic. The following describes the steps of implementing such architecture and a sample code project created in Visual Studio (free version could be downloaded here). This time, I played with Google Maps API.
Firstly, set up a basic ASP.NET AJAX-enabled web site through the Visual Studio wizard. You may need to download the AJAX extension from http://ajax.asp.net/. Inside Default.aspx, add a div in the body like the following to host the map
| <div id="map" style="width: 90%; height: 600px; margin-left:auto; margin-right:auto"></div> |
Reference the google api javascript source and your own javascript file (e.g., gmap.js where the client side mapping code is located) in the head section.
Next is to prepare the data on the server side. It is actually much easier to set up a relational database in Visual Studio by a just few clicks and there are tons of such examples on the web. So here let’s try a slightly trickier scenario where we only have a static plain text CSV data file (e.g., exported from an legacy system or Excel spreadsheet) that contains various cities and the fun places in them to be drawn on the map. Add that data file (e.g., mapdata.csv) under the App_Data/ folder in the solution explore. Assume the data file has 3 columns State, City, and FunPlace. Now create a web service (e.g., MapDataWebService) to extract the data from the CSV file and serve to the client side mapping code. To add this web service, right click the project in the solution explore, select "Add New Item…", select "Web Service", and then rename the file name into "MapDataWebService.asmx". The web service skeleton is automatically added under App_Code/. Open it and add 2 web methods getAllStates() and getFunPlacesByState(string state). The former is used to populate the dropdown on the web page to select a state and the latter is to get the fun places of the selected state. Both methods connect to the data file through OLE DB and query the data using convenient SQL syntax. To quickly unit test the web method, you could open MapDataWebService.asmx and press F5 to run the web service alone.
The return value of getFunPlacesByState(string state) would be an array of objects (type of class Place), each of which contains the latitude and longitude of the city and the name of the fun place in that city. The class Place is the object oriented representation of this information. The web service will return the objects to the JavaScript caller. In order for the caller to get the consistent objects and dereference them the same way as in C#, the following directive should be added to the top of the web service code and a reference to the assembly System.Web.Extensions.dll needs to be added to the solution too. If you don’t have this assembly already installed on your machine, you could download and install "ASP.NET Ajax" from http://ajax.asp.net/.
| … using System.Web.Script.Services; … [ScriptService] [GenerateScriptType(typeof(Place))] public class MapDataWebService : System.Web.Services.WebService { …. } public class Place { …. } |
After the data service is created, the getAllStates() web method could be used to build a data source to populate the dropdown list. Drag and drop a dropdown list onto the Default.aspx, select to create a new data source from its context menu, choose object as the type, MapDataWebService as the business object, and getAllStates() as the SELECT method. The data binding is automatically done. Add an onchange event handler to this control to trigger the mapping function (e.g., drawMarkers) and we are almost done.
The last step is to implement the mapping method drawMarkers() in gmap.js. It retrieves the state that the user chose in the dropdown and use it as the parameter to call the web service method getFunPlacesByState(state) asynchronously. The callback function will receive the resulting list of Place objects and then use the Google maps API to draw them on the map. To successfully make the web service call from JavaScript, it has to be registered in the Default.aspx like the following.
| <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/MapDataWebService.asmx" /> </Services> </asp:ScriptManager> |
To make it more fun and improve the user experience, during the async web service call, a spinning progress icon could be display indicating that the data is being loaded. Overall, no whole page loading is done and web page looks better. If you are interested the sample solution and code can be downloaded GMapExample.zip. Before you can compile and run this web site, go to http://www.google.com/apis/maps/ to register your API key and replace the place holder "YOUR_API_KEY" in file Default.aspx and App_Code/MapDataWebService.cs.
By the way, a comment about Google Maps API. The markers manager is a convenient way of aggregating all the markers, but removing objects from the manager seems buggy. Whenever the map zoom level is changed, all the removed markers come back on the map. The markers in the manager are not controlled by the map.removeOverlay() either. Other than that, the API works pretty well.
Sample code download: GMapExample.zip
