Creating Layer Overlays for Google Maps and WebFOCUS



Over the past several years WebFOCUS mapping functionality has come a long way down a darkly lit, sometimes hopeless hallway. I recall in my early years of learning the focexec ropes receiving a request for me to plot call center information on a map to visualize relationships in call types and their geography.


Not having the current Google Map integration available to me, I began my journey towards what today is a fully functional mapping tool. The solution consisted of XML output from WebFOCUS being consumed by what by today’s standards is considered to be a rather primitive Yahoo map. The data, displayed as pins on the map was determined by the user’s selection of criteria via an HTML form.


Today mapping has spread throughout the Enterprise and is used in a multitude of ways. From call center applications used to visualize the location of clients and providers to managerial visualization of trending, mapping has become as popular as charting and trending.




Recently, I was tasked with the requirement of pushing mapping further into the daily lives of the executive and management teams within our organization. As we know, the style of reporting required at this level is different than at the operational level, dealing more with summarizations and high level data than with individual clients.


I recalled a presentation I had been in with a colleague of mine at a previous Summit conference. In it Mr. Dirk Kuerbig, all around IBI genius and good guy, presented a solution for presenting data in layers overlaid on a Google Map. This was to be the basis point of my solution.




  • WebFOCUS 7.7.2
  • Google Map Integration
  • Application must allow for the selection of the following basic criteria
    • The statistic the user wished to see (Total Dollars, Total Clients, etc)
    • The overlay (City, Constituency, Province, etc)
    • The application must then prompt for subsequent parameters according to the statistic selected
    • The map would be presented based the selected layers. The layer color would be shown as a heat map (lower value =lighter color, higher value = higher colors)





Looking at the solution requirements it became immediately clear that the built in Google Integration with WebFOCUS would not be sufficient. The following list of issues were identified:

  • Current to 7.7.2, Google map integration only allows for layers based on individual points, not a layer based on a zone or region or series of points.
  • No capability to do heat mapping (Although you can have dynamic pin colors based on a defined field)



Once the build began we quickly found that in simple cases, where shapes being drawn as a layer only included a few points there were no issues. We also noted that in the case of complex shapes, like those of city or constituency boundaries, Google Maps would crash and cause serious performance issues.



Out of the box, WebFOCUS best option for consuming data from a webpage is XML. I don’t like XML. JSON was the preferred option for this project.





Thanks to a tip and some code from Mr. Darin Lee, and a properly configured XSL template provided by my colleague, Mr. Nathan Wong of Abstractive, we were able to extend WebFOCUS allowing us to specify JSON output. This data is dynamically served through WebFOCUS based on the selected layer overlay and criteria.



This was the big time-muncher! To properly configure the overlay information to be able to display it on a Google Map I had followed the process outlined below. It is important to note that I began with a shape file in the .shp file extension (Typically ArcGIS). If you have the shape file in KML format, you may skip the initial steps.


Convert File to KML

*Owning a licence to ArcGIS client tools I utilized the tools available to me.

  1. Open ArcMap
  2. Import the desired layer
  3. Using the “Export to KML” Extension ( export the file to XML


Encode the Layer Information

Open the KML document in a text editor. Review its structure and notice the boundary information included. Each boundary may include thousands of points which make up the shape. Eack boundary was encoded in order to aid Google Maps in their timely creation.


*I am sure that someone smarter than I will think of a way to automate this, but I encoded each boundary manually.


  1. Copy each coordinate within a boundary “<coordinates>” to “</coordinates>”, keeping in mind that there may be inner and outer rings as well.
  2. Copy latitude and longitude comma delimited values into the form at
  3. Run the Form and save the results.


Build JavaScript Object to Display the Layers and Heat Map

Once we had collected all the necessary information I was then able to begin the fun part, painting the picture including:


  • Dynamic display of layer based on selection
  • Dynamic display of background color based on predefined color ranges (mine are yellow to blue), minimum and maximum data values (based on the data) and the value of the given boundary.
  • Dynamic tooltips and popup messages based on area of the map the user is viewing




Today, within our enterprise we have another WebFOCUS based application ready to visualize data geographically. Whether it is a program manager wanting to know where his client base resides or an executive wanting to know the average age of his cliental within a specific geographic location, information is available and ready to aid in vital business decisions.


Please contact me at any time should you have any questions or corrections.