Google Maps Polygon overlay with IBM Cognos 8

Sometimes customers are interested to display a map of regions or countries with conditional coloring applied. But those map extensions and programs are quite expensive… I want to present you a way where you can do the same - for no money - with all the advantages of a public and open map engine.

The requirements:

• an existing internet connection
• a version of the epoly.js file
• the coordinates preferably in xml format.

First of all we need to generate a key to authenticate our site properly to google. Using a key generated for a different site than our will fail with an error message.

The signup can be done at:

 http://code.google.com/intl/de-CH/apis/maps/signup.html

Then we need a placeholder in our report like this

<div id="map_canvas"   style="position:relative;width: 700px; height: 300px;"></div>

The map gets initialized by

<script type="text/javascript">
google.load("jquery", "1");
google.load("maps", "2.x");

function resizeMapContainer(w,h)
    {
        $("#map_canvas").width(w).height(h);
        map.checkResize();
    }

</script>

If the browser is ready and compatible we start

$(document).ready(function () {
if (GBrowserIsCompatible()) {
    var polys = [];
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(42.16,-100.72),4);
        map.addControl(new GScaleControl()); 
        mapOv = new GOverviewMapControl();   
        map.enableScrollWheelZoom();
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        map.setUIToDefault();
        // Workaround resize Issue with Google Maps (API 2.x)
        window.resizeBy(-1, -1);

Now we want to make the polygons…. We read the coordinates from the states.xml file and put an overlay on the map….

// Read the data from states.xml
      var request = GXmlHttp.create();
      request.open("GET", "states.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // ========= Now process the polylines ===========
          var states = xmlDoc.documentElement.getElementsByTagName("state");

          // read each line
          for (var a = 0; a < states.length; a++) {
            // get any state attributes
            var label  = states[a].getAttribute("name");
            // read each point on that line
            var points = states[a].getElementsByTagName("point");
            var pts = [];
              for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),parseFloat(points[i].getAttribute("lng")));
             } 
                             if (states[a].getAttribute("name")==labels[a])
            {
            var poly = new GPolygon(pts,"#000000",1,1,colours[a],0.5,{clickable:false});
                polys.push(poly);
               map.addOverlay(poly);
            }
            }
                   // ================================================          
        }
      }
      request.send(null);
          }
        });

In my case the overlay result looks like this. States are colored by a revenue rank based on the Gosales DW Model. „Pretty cool!“

and even movable and zoomable !

Since the rendering and applying of the polygons is done on client side you should not do this for reports which are running on an old machines and / or slow internet connections.

You should somehow make sure that your report data matches the appropiate data in the xml. Best would be a matching id in the xml file according to the id to the data in the report. In my example I helped myself out by just checking the name of the state

if (states[a].getAttribute("name")==labels[a])

(labels[a] holds the report result name and colours[a] the suitable color for that region – if those match the state can be colored)

If you have questions do not hesitate to contact me.

Hv fun!