Stanley’s Tech Chat

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

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/.

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.

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

Web .NET, ajax, api, asynchronous, database, google, map, microsoft, ole, visual studio, web service

One can enumerate hundreds of difference between software from open source community and companies like Microsoft.  There are fundamental things that cause the difference - the paradigm of programming, the architecture of software family, and development productivity, etc.

On the server side development platform for example, popular open source tools are the well known LAMP.  Four pieces are done by totally different groups of people, on different time schedule, and with different design style.  They are all good products without doubt.  They work together very well for sure too.  Coding something on LAMP feels super geeky, because you control everything from top to the bottom.  Commercial software makers like Microsoft have some different considerations.  For good manageability, installation, configuration, migration, and so on mostly have easy to use (at least try to) GUI.  For productivity, many of the routines are abstracted and hidden away from the application developers.  For example, in ASP.NET, post backs, event handler registration, page templating and all those kind of wiring work is hidden.  Writing server side code feels more straight forward like writing desktop application.  ASP.NET really evolves from a programming language up to a server side framework.  With the Visual Studio .NET’s help like IntelliSense, debug tracing on both server and client side, visualized server control customization with sample data, and so on, developers are more free to focus on the business logic of the software, which is critical for business.

Talking about the hot AJAX.  Interestingly this technology was started by Microsoft when building the outlook web access.  Because it is majorly for business rather than the consumers on the Internet, it didn’t surface that much until Google Suggest and Maps made the splash with it.  To code in AJAX there are a lot of plumbing work underneath to wire up the connections between the client side scripts and the server side handler, AJAX for ASP.NET wraps all these up and provide a few straight forward abstract controls to improve the productivity of the application developers.

There are debates in many companies and organizations about Wiki and SharePoint too.  Again like the comparison between PHP and ASP.NET, SharePoint is more of a platform that contains Wiki features and many other capabilities.  Wiki starts out to do collaborative web content editing, while SharePoint is designed to be the collaboration platform which integrates with Office suites, workflow, enterprise search engine, content management, SharePoint Designer (visual design tool), etc.

Open source software products are simple, developer-enjoyable, and inexpensive upfront.  Commercial products are more business friendly, enterprise infrastructure oriented, productiviey oriented (sometimes productivity and developer-enjoyable are not well aligned ), and more expensive upfront.  They have much difference in the fundamental design paradigm.  Comparing the two different types of products really depends on the specific requirements rather than a religious belief.

Tech .NET, ajax, asp.net, microsoft, open source, php, sharepoint

Zimbra Goes Offline With Zimbra Desktop

The history is once again recurring. Off-line application, then online application, and then "off-line application" again. But rather than circling, this is an evolution in a rising spiral style. When Google online web applications take on Microsoft Office and there is heated discussion about their comparison, this third approach is emerging. Although Google enjoys the buzz of its branding and pricing, web apps still has many limitations like rich UI, performance, security, difficult admin maintenance due to frequent incremental software change, and so on. Off-line ajax solution answered some very important challenges of web apps. For example, the not yet pervasive and stable Internet connection, page latency, and UI responsiveness. This helps narrowing the gap between the web apps and traditional desktop apps.

From server client model’s point of view. The same recurring phenomenon is going on. Single machines, main frame, distributed systems, peer to peer systems, web applications running on central servers, and now off-line web applications. The big difference is the placement of software components and the global computing environments and infrastructure - majorly Internet.

From hierarchical architecture’s point of view, the off-line web application is a more sophisticated caching model which involves not only static data like web pages and cookies but also software components and application states that run independently on the client machine without any help from the mother ship - servers. This has a load of benefits. For example, performance will improve a lot. "Off-line" is not only used when the network connection is off. Software components and state is cached locally and reduced a large portion of the server-client interaction round trips, especially those bulky post backs. Users data are better maintained locally and is immune to page load failure due to temporary connection problems.

Off-line mode is a significant innovation, but most of the rest of the system is more or less copy from Microsoft Office and/or Google Apps. But it’s always like that, new startups who come up with a product, 10% of which are new ideas, are regarded innovative, but the big guys who come up with a similar product are still regarded as copy cats The expectations for them are quite different. The world is flattening and so does the computer software industry. These emerging new products are pushing the software moving forward faster.

Web ajax, google, microsoft, office, offline, zimbra