Geomapping Technology and the Internet

One of the advantages of web application development is that you can easily integrate or mashup your organizational data with the large array of detailed information made freely available on the internet. A good example of this is geographical mapping data. The uses of having geo mapping data within your business application are virtually endless. For example:

• Provide your customers with interactive directions to your facilities.
• Incorporate directional mapping into routing applications, e.g. customer deliveries, repair/installation, or home health care visits.
• Show analytic data points overlaid on a map view, for example to clearly show management where your best customers are located.

In the past in order to run your own private map server and software, IT management had to budget a rather sizeable investment in servers, maps, application software, and integration programming. However, to make appropriate use of today’s freely available map data from google, yahoo, mapquest, and many others it is a completely different ball game – you just need a little JavaScript and a developer’s API key (usually free for most uses, but check out the license agreement).

Google Maps

Google Maps (accessed googlemaps.com) is one of the classic examples of a useful and impressive Ajax application. The smooth scrolling and interactivity of the map (point to point directions, pushpin pop-ups with shadows, traffic, street view, etc.) is reminiscent of a sophisticated desktop application. However, Google actually accomplishes all this working within a standard browser without special plug-ins or add-on software.

Google Maps is one of the best examples of how RIA (Rich Internet Application) techniques are revolutionizing business application development. Yes, I’m sure that the code involved to render the complex maps in a browser is non-trivial – but you can leave that to Google’s team to write and maintain in JavaScript. However, the code necessary to integrate maps into your CA Plex WebClient i+ application IS trivial, and even better we have written the technical parts of it for you.

Create your own Geo-map pattern

The easiest way to start with geo-mapping is simply to try the example in the rest of the blog. Most developers find they can create their own WebClient i+ pattern and get an example running in less than 30 minutes.

Step 1

Create your own pattern or function that contains the address data on standard CA Plex panel with standard CA Plex fields. Feel free to download our WebClient sample model for an example of this.

To follow our example, create a pattern called ~MapUrlPopop which inherits from WEBCLIEN/~DetailPopup, and pass in the appropriate address fields as input parameters. Give the pattern function an implementation name of MapUrlPopup, which corresponds to the html template file name in the next step.

The panel field edit controls should contain the following control names to match up with our mapurlpopup-root:

• AddressLine1
• AddressLine2
• City
• State
• Zip

Step 2

Copy the attached mapurlpopup-root to your templates directory in Eclipse. Note the following section of code.

Template attachment 

function() {

            /(!AttachPoint:name=JSOnLoad)

            var fAddLine1 = /(AddressLine1);

            var fAddLine2 = /(AddressLine2);

            var fCity = /(City);

            var fState = /(State);

            var fZip = /(Zip);

            var fStreetAdd = fAddLine1 + " " + fAddLine2 + " " +  fCity + " " + fState + " " + fZip

            if (GBrowserIsCompatible()) {

            var map = new GMap2(document.getElementById("map"));

                  var geocoder = new GClientGeocoder();

                  geocoder.getLatLng(fStreetAdd, function(point){

                        var p = point;

                        map.setCenter(p, 13);

                  })

Also make note of the Google API site key at the start of the file. If you are planning to implement this example, please replace the API key with one you obtain directly from Google Maps website: http://code.google.com/apis/maps/signup.html.

Step 3

Inherit from or call your new pattern directly, generating and building as normal for WebClient, and view the results. It is really that simple!

Want to learn more? This simple templating example shows some of the power of WebClient Ajax templates, but the possibilities are endless. Visit http://wiki.webclientiplus.com for complete documentation on WebClient i+ templating.