WebFOCUS for Google Maps
Rapid Mashup Development
Matthew Lerner
Information Builders
Information Builders Summit 2008 User Conference
June 2008
Author: Matthew Lerner
Company: Information Builders
Presentation Title: WebFOCUS for Google Maps: Rapid Mashup Development
Presentation Abstract:
Today’s global and national enterprises operate businesses that are
geographically dispersed and influenced. The relationships that arise from this
can be complex and difficult to interpret. However, by overlaying maps with
operational data and reports, you gain a clear indication of your global
performance and quickly identify local and regional trends.
Teaming WebFOCUS with Google Maps gives you flexibility to enrich
maps with analytic content. You can use WebFOCUS to drive what is displayed
on a map, conditionally style location indicators to visually convey operational
trends, and navigate the map from a related report to zoom in and out of critical
areas. You can also use Google Maps to pre-filter and drill down to your
WebFOCUS reports containing all the details on one or more locations of
interest.
Copyright © 2008 Information Builders
Scenario:
Using WebFOCUS for Google Maps, the Century Electronics Corporation
can visualize sales revenue of their stores on a map. The store markers are
color coded by a revenue range making it easy to see stores that perform poorly
and those that perform well. Groupings of similar performing stores may show us
that some stores need to be closed or that an area can handle more stores.
In this session you will create a mashup of WebFOCUS and Google
Maps. We will start by using the HTML Layout Painter to rapidly develop a
mashup that can be used to make effective business decisions based on the
combination of location and data. Then you will learn how the procedures that
populated, interacted with, and received data from the map were created using
Developer Studio’s Report Painter.
Create the Mashup
Page 2 of 57
Copyright © 2008 Information Builders
Table of Contents
Create the Mashup .............................................................................................................. 4
Create a new HTML Layout Page .................................................................................. 4
Add a Google Map .......................................................................................................... 5
Set the Map Options........................................................................................................ 5
Add a Layer & Marker Groups ....................................................................................... 8
Add an Active Report ................................................................................................... 13
Interact with WebFOCUS for Google Maps .................................................................... 16
Create the Reports ............................................................................................................. 20
Populate a Map Layer ................................................................................................... 20
Set Center Value Report ............................................................................................... 24
Drill Down Report ........................................................................................................ 28
Embedded Active Report .............................................................................................. 29
Bonus Lab – Extend WebFOCUS for Google Maps ........................................................ 32
Running this Lab at Summit 2008 ................................................................................ 32
Find Census Data .......................................................................................................... 32
Edit the HTML Layout Page......................................................................................... 32
Add HTML Controls................................................................................................. 33
Add the JavaScript .................................................................................................... 35
Understanding the JavaScript ................................................................................... 36
Bonus Lab - Filtering WebFOCUS for Google Maps ...................................................... 39
Getting Started .............................................................................................................. 39
Create the Google Map HTML Layout Page ................................................................ 39
Create a Wrapper Procedure ......................................................................................... 42
Filter Enable your Google Maps Procedures ................................................................ 42
Filter Enable Your Center Value Procedure ............................................................. 42
Filter enable your Layer Procedure........................................................................... 43
Drill Down Enable your Embedded Report .................................................................. 46
Create the Mashup ........................................................................................................ 50
Using the Mashup ......................................................................................................... 54
Report to Map Drilldown .............................................................................................. 54
Appendix A - Configure WebFOCUS for Google Maps.................................................. 57
Create the Mashup
Page 3 of 57
Copyright © 2008 Information Builders
Create the Mashup
In this section you will create a mashup containing a Google Map and a
WebFOCUS Active Report. All necessary procedures have been created for you.
Create a new HTML Layout Page
In this section you will create a new HTML Layout Page.
1. Expand the Google Maps project.
2. Right click on the HTML files folder and click New->HTML File
3. Enter GoogleMaps as the File Name
4. Click Open
Create the Mashup
Page 4 of 57
Copyright © 2008 Information Builders
Add a Google Map
In this section you will add a Google Map Control to the HTML Layout page.
1. Insert a new Google Map via Insert->Google Map on the Menu Bar as shown in
the following image or by clicking the
icon on the Components Bar.
The cursor will switch to crosshairs when you mouse over the canvas. Left click
on the canvas, draw a box, and release the mouse button.
Set the Map Options
In this section you will learn how to set the options on the main tab of the Map
Properties dialog window, shown in the following image.
1.
In the Set Center Value box change Source Type to External Procedure
Create the Mashup
Page 5 of 57
Copyright © 2008 Information Builders
2. Click the
button to the right of the Source: textbox
3. Double click SetCenterValue.fex
4. Set Default Map Type to any map type you desire.
The options are:

Map (default) – Presents geographical borders and streets.
 Satellite – Presents real imagery.
 Hybrid – Presents real imagery with borders and streets.
They correspond to the buttons shown on any standard Google Map.
Create the Mashup
Page 6 of 57
Copyright © 2008 Information Builders
5. Click the
button to the right of the Selected Marker Image textbox
6. Double click purplepin.png
7. Set the Zoom Level and the Check Box options as desired. Each option is
explained below.

Zoom Level – Controls the initial zoom level of the Google Map. Zoom
level indices start with 0 at the coarsest level, not at the finest. This allows
maps to be introduced to high resolution imagery in the future.

Dragging – Controls the ability to drag the map in order to reposition the
center point to a new location. The default setting is enabled.

Info Window – Enables the end-user’s ability to render a Google Map
Info Window if one is available. This would be used to prevent an end-
Create the Mashup
Page 7 of 57
Copyright © 2008 Information Builders
user from clicking on the map and viewing a drill down within the Google
Map’s Info Window. The default setting is enabled.

Double Click Zoom – Allows the end-user to use the double-click feature
to zoom in and out of the map. This setting is disabled by default.

Continuous Zoom – Enables smooth zooming for only select browsers.
The default setting is disabled.

Scroll Wheel Zoom – Allows the end-user to use their mouse’s scroll
wheel to zoom in and out of the map.
Note: If the zoom level is set at 8 or higher the initial map will only have one
point visible.
Your Map Properties window should resemble the following image.
Add a Layer & Marker Groups
In this section you will learn how to add a Layer to your Google Map and setup
the image, tooltip, and drill down for each Marker Group.
1. Click Layers to switch to the Layers tab.
Create the Mashup
Page 8 of 57
Copyright © 2008 Information Builders
2. Click the icon.
3. Leave Source Type as External Procedure
4. Click the
button in the Source column
Step 2
Step 3
Step 4
5. Double click gmlayer.fex
You will now see the Markers box populated with the values from the MARKER
field in the gmlayer focexec.
6. Select all 4 markers by holding down SHIFT and clicking on the first and last
marker in the Markers box.
Create the Mashup
Page 9 of 57
Copyright © 2008 Information Builders
7. In the Tooltip section do the following
a. Source Type: Field
b. Source: REVENUE_RANGE
8. Apply the following settings in the Drill Down section.
a. Action: External Procedure
b. Source
i. Click the
button
ii. Double click gmdrilldown.fex
iii. Leave Target Type and Target/Template Name as is.
c. Click
before moving on to the next marker.
9. Select one marker at a time by clicking on it in the Markers box and do the
following.
Create the Mashup
Page 10 of 57
Copyright © 2008 Information Builders
a. In the Image section leave Source Type as image and click the
to the right of the Source box.
button
b. Choose the image file that corresponds to the selected marker class and
click Open.
i. yellowicon = yellowpin.png
ii. redicon = redpin.png
iii. greenicon = greenpin.png
iv. blueicon = bluepin.png
c. Click
Create the Mashup
before moving on to the next marker.
Page 11 of 57
Copyright © 2008 Information Builders
Your Map Properties dialog should resemble the one above.
10. Click OK
11. Select the Google Map object and set the size and position it using the Properties
palette to the following:
a.
b.
c.
d.
Position: Left – 30px
Position:Top – 30px
Size: Height –260px
Size: Width – 640px
12. Save
You may wish to run your application to see your Google Map populated with the
stores from the Century Sales database. Later on in the lab we will learn how to
select points and activate the drill downs.
Your Layers tab of the Map Properties window should resemble the following
image
Create the Mashup
Page 12 of 57
Copyright © 2008 Information Builders
Add an Active Report
In this section you will learn how to add a report to the HTML Layout that can
change the location shown on the map.
1. Insert the Active Report via Insert->New Report on the Menu Bar or by right
clicking on the canvas and choosing New Report
2. The cursor will switch to crosshairs when you mouse over the canvas. Below the
map left click on the canvas, draw a box, and release the mouse button.
Create the Mashup
Page 13 of 57
Copyright © 2008 Information Builders
3. Right click on the report object and click Reference existing Procedure
4. Double click EmbeddedActiveReport.fex
5. Select the Report object
6. Set the position and size as follows using the Properties palette:
Create the Mashup
Page 14 of 57
Copyright © 2008 Information Builders
a.
b.
c.
d.
Position: Left – 30px
Position: Top – 300px
Size: Height – 290px
Size: Width – 640px
7. Save
Your HTML Layout Page should resemble the following image
Create the Mashup
Page 15 of 57
Copyright © 2008 Information Builders
Interact with WebFOCUS for Google Maps
In this section you will learn how to interact with WebFOCUS for Google Maps.
Interactions include different selection mechanisms, tooltips, drill downs, and panning.
1. Run the HTML Layout page via File->Run or the
icon
The initial page will resemble the following image.
Note: The map shown in the image above uses zoom level 6
2. Zoom out using the
button or any other method, until you can see at least one marker
represented by each of the four colors (yellow, red, green, and blue).
3. Mouse over points on the map to see the tooltip based on revenue range. Different
colored markers will give you a different tooltip.
4. Right Click on the map to start a selection. You will see the
this point.
5. Draw a free hand selection area by left clicking on the map.
marker on the map at
6. Right click on the
marker to complete the selection area. Notice how the selected
markers changed to purple as defined in our map options.
Interact with WebFOCUS for Google Maps Page 16 of 57
Copyright © 2008 Information Builders
The image below is an example of a free hand selection
7. Left click in the selection area to run the drill down report with the coordinates of the
selected stores as a filter.
Note: You can also click on an individual point that is not part of a selection group to run
a report on just that single store.
8. Left click outside the selection area to remove the selection.
9. Right click on the map to start a selection. You will see the
this point.
marker on the map at
10. Hold CTRL and left click the circle in the
marker
You can remember this as both circle and CTRL start with a C.
11. Drag the mouse to select stores using a circular selection.
12. Release the left mouse button when you are done selecting stores.
The following image is an example of circle selection.
Interact with WebFOCUS for Google Maps Page 17 of 57
Copyright © 2008 Information Builders
13. To perform a square selection repeat steps 9 – 12. In step 10, do not hold CTRL.
Notice how in the image below there is both a square and circle selection. This is
because we did not clear the selection (step 8)
14. Move either existing selection area by left clicking on the
icon and dragging the
object. Release the left mouse button when you are done moving the selection area.
The
icon will appear at the center of the selection when your mouse is within the
selection.
15. You can also do manual selection. This is accomplished by clicking on a marker, while
holding the CTRL or SHIFT key. You can click on a selected marker, even one you
selected using a shape, to unselect it. Try out manual selection.
16. To use the panning feature click on a drill down link in the Country column of the Active
Report located below the map.
Interact with WebFOCUS for Google Maps Page 18 of 57
Copyright © 2008 Information Builders
This will center the map on the coordinates of the store represented by that row of data
with a zoom at the country level (Zoom level 3).
17. Click on the drill down link for the same store in the State column of the Active Report
located below the map.
This will center the map on the coordinates of the store represented by that row of data
with a zoom at the state level (Zoom level 6).
Interact with WebFOCUS for Google Maps Page 19 of 57
Copyright © 2008 Information Builders
Create the Reports
In this section of the lab you will create the reports necessary to create a Google Map in
WebFOCUS as well as the reports that will interact with the map. In order for the mashup that
we created previously to work, all of the reports created in this section were provided for you.
Populate a Map Layer
In this section you will create a report that will be used to create a single layer on your Google
Map and place markers on the map that are grouped by LINEPRICE.
1. Open the Procedures folder of the Google Maps Reports project.
2. Open gmlayer.fex in the Procedure Viewer
3. Create a new report by clicking on the diamond to the right of the Join object and then
clicking Report.
4. Choose (double click or select and click open) the centurysales.mas
Create the Reports
Page 20 of 57
Copyright © 2008 Information Builders
5. Click
to enter the Report Options screen
6. Set the output format to Standard XML using the Select Format Drop-down list.
Standard XML is found under Unstyled formats
7. In the Output tab below, set the Destination found in Output Result to Web browser
Create the Reports
Page 21 of 57
Copyright © 2008 Information Builders
8. Switch to the Computes tab.
Note: The content for the Computes created in the following steps is found in
computes.txt. Feel free to copy and paste from that file.
9. Create a new Computed field with the following settings
a. Field: LINEPRICE_CLASS
b. Format: I5
c. In the box for the actual computation type, paste, or use the buttons to generate
the following statement:
IF LINEPRICE GE 50000000 THEN 0 ELSE IF LINEPRICE GE 10000000 THEN 1 ELSE IF
LINEPRICE LE 1000000 THEN 2 ELSE 3
10. Click New
11. Create another Computed field with the following settings
a. Field: MARKER
b. Format: A10
c. In the box for the actual computation type:
Create the Reports
Page 22 of 57
Copyright © 2008 Information Builders
DECODE LINEPRICE_CLASS( 0 'blueicon' 1 'greenicon' 2 'redicon' ELSE 'yellowicon' )
Note: MARKER is a required field name used to create Marker Groups
12. Click New
13. Create another Computed field with the following settings
a. Field: REVENUE_RANGE
b. Format: A10
c. In the box for the actual computation type:
DECODE LINEPRICE_CLASS( 0 'OVER 50M' 1 '10M TO 50M' 2 'UNDER 1M' ELSE '1M TO
10M’ )
14. Click OK
Your report should resemble the above image.
15. Select the field LINEPRICE_CLASS and click the
button
16. Double click the field LATITUDE in the Object Inspector to add it to the report
17. Make LATITUDE a sort field by clicking
18. Repeat steps 16 & 17 for the field LONGITUDE
Create the Reports
Page 23 of 57
Copyright © 2008 Information Builders
Your Report should now resemble the above image.
19. Save and Exit the Report Painter
20. Exit the Procedure Viewer
Set Center Value Report
In this section you will create a report that will set the starting center point of your
Google Map.
1. Open SetCenterValue.fex
2. Add a new report by clicking on the diamond to the right of the Join Component and
selecting Report
3. Choose the centurysales.mas file
Create the Reports
Page 24 of 57
Copyright © 2008 Information Builders
4. Add LATITUDE and LONGITUDE to the report by selecting each field and either
dragging them onto the report canvas or double clicking on the field name.
5. Click the
button
6. Click the
button
7. Double click the CITY field
8. Set the Logical Relation to equals
9. Set Compare Type to Value
10. Double click on <Please Specify> in the Compare Value column
Create the Reports
Page 25 of 57
Copyright © 2008 Information Builders
Step 8
Step 9
Step 10
Step 7
11. Click the
button
12. Click OK
13. Double click on Nashville in the newly populated list
14. Click OK
Create the Reports
Page 26 of 57
Copyright © 2008 Information Builders
Step 14
Step 13
15. Click OK
16. Click the Retrieval Limits tab
17. Enter 1 in the Record Limit: box
Step 16
Step 17
18. Set the Output Format to Standard XML and the Destination to Web Browser
Note: See steps 6 & 7 of the previous report for detailed instructions.
19. Click OK
20. Run the report to see the sample XML output that will be used to set the center point of
the map.
Create the Reports
Page 27 of 57
Copyright © 2008 Information Builders
21. Save and Exit the Report Painter
22. Exit the Procedure Viewer
Drill Down Report
In this section you will take a prebuilt Active Dashboard and add filters to it. When the
application is complete the filter will be populated with the coordinates of the points you selected
on your Google Map.
1. Open drill1.fex
2. Double click on the Report Component
3. Click the
button
4. In the text area type &COORDINATES
5. Click OK
Create the Reports
Page 28 of 57
Copyright © 2008 Information Builders
Step 4
Step 5
6. Save and Exit the Report Painter
7. Exit the Procedure Viewer
8. Repeat steps 2 – 7 for drill2.fex, drill3.fex, and drill4.fex
Embedded Active Report
In this section you will take a prebuilt Active Report and add JavaScript drill down links
that will change the display location of your Google Map.
1. Open EmbeddedActiveReport.fex
2. Double click on the Report Component
3. On the Report Canvas right click on the COUNTRY field and choose Options.
Create the Reports
Page 29 of 57
Copyright © 2008 Information Builders
4.
5.
6.
7.
8.
Switch to the Drill Down tab.
Set Active Object to Column Data
In Drill Down Definition set Drill Down Type to Javascript
In the Javascript box set type parent.panToPoint
In the With Parameters box click the Add… button
Step 4
Step 5
Step 6
Step 7
Step 8
9. In the Parameter Value box make the following selections
a. Leave the Field radio button selected
b. Select Latitude in the drop down list.
Create the Reports
Page 30 of 57
Copyright © 2008 Information Builders
10. Click OK
11. In the With Parameters box click the Add… button
12. In the Parameter Value box make the following selections
a. Leave the Field radio button selected
b. Select Longitude in the drop down list.
13. Click OK
14. In the With Parameters box click the Add… button
15. In the Parameter Value box make the following selections
a. Select the Constant Value radio button
b. Enter googlemap1 in the textbox
16. Click OK
17. In the With Parameters box click the Add… button
18. In the Parameter Value box make the following selections
a. Select the Constant Value radio button
b. Enter 3 in the textbox
19. Click OK
The With Parameters section should resemble the image above.
20. Repeat steps 3 – 19 for the STATE field. In Step 18b, enter 6 instead of 3
21. Save and Exit Report Painter
22. Exit the Procedure Viewer
Create the Reports
Page 31 of 57
Copyright © 2008 Information Builders
Bonus Lab – Extend WebFOCUS for Google Maps
WebFOCUS for Google Maps can be extended using the Google Maps API. In this
section you will learn how you can use this API to display KML files on the map, which provide
background information such as population density.
Documentation on this API can be found online at:
http://code.google.com/apis/maps/documentation/reference.html
Running this Lab at Summit 2008
This lab may only run properly on the Sand Box machines located in the Expert Room or
on your own PC after creating the HTML Layout page in the main portion of the lab above. The
reason for this is that the Google Maps API key used on all other machines at Summit is for the
host http://localhost. The portions of the Google Maps API used in this lab have been found to
fail at times when using localhost. In order for this lab to work you should use either an IP
Address or machine name when generating your API Key. Please note that when running the
HTML file you must use the name or IP Address that was used to generate the Google Maps API
key.
Find Census Data
KML files with background information can be found on a variety websites. Juice
Analytics provides KML files containing US Census Data. They provide the following US
Census information.



Population Density – By County & By Census Block Group
Median Age – By County & By Census Block Group
Male Female Ratio – By County & By Census Block Group
The file naming convention used on this site is
twoLetterStateAbbreviation_dataGranularity_dataType.kmz.



twoLetterStateAbbreviation – Standard US two letter State Abbreviations
dataGranularity
o co – County
o bg – Block Group
dataType
o pd – Population Density
o ma – Median Age
o mf – Male Female Ratio
Edit the HTML Layout Page
In this section you will edit the HTML Layout page created in the prior lab to allow you
to display the Census data on the map.
Configure WebFOCUS for Google Maps
Page 32 of 57
Copyright © 2008 Information Builders
1. Make a copy of the GoogleMaps.htm file
2. Name the new copy GoogleMapsCensus.htm
3. Open GoogleMapsCensus.htm in the HTML Layout Painter
Add HTML Controls
In this section you will add the controls that will be used to turn on/off the Census data.
1. Insert a group box using the
icon or via the Insert menu
2. The cursor will switch to crosshairs when you mouse over the canvas. To the right of the
map left click on the canvas, draw a box, and release the mouse button.
3. Set the text of the group box to Census Data by clicking on the text and typing.
4. Within this group box add three more group boxes as shown in the screenshot below.
Please note that you will not see crosshairs when you go to draw instead you will see the
cursor, which is associated with moving objects.
5. In the Type group box insert a radio button control using the
menu
6. Switch to the Parameters palette (tab) by clicking on the
7. Add the static values as shown in the following image:
Configure WebFOCUS for Google Maps
Page 33 of 57
icon or via the Insert
icon
Copyright © 2008 Information Builders
8. In the Detail group box add a radio button control with static values as shown
9. In the States group box add a check box control via the
icon or via the Insert menu
10. Add static values for each state you wish to include using the following format
a. Value – two letter state abbreviation in lower case
b. Display – Full text state name
c. Selected – Unchecked for all
The two letter state abbreviations can found be on the USPS website at:
http://www.usps.com/ncsc/lookups/usps_abbreviations.html
Configure WebFOCUS for Google Maps
Page 34 of 57
Copyright © 2008 Information Builders
You may wish to limit your states to save time. It is recommended that you include
Tennessee (tn) as that is the starting point of the map.
11. If you include a lot of states you will need to do the following to fit them
a. Set columns to 2 using the Properties palette
b. Set Overflow: to Use scrollbars if needed. This option is in the Layout section of
the Style Composer. To access the Style Composer click the
button in the
Styling: Advance (CSS)… column of the Properties palette. The
button will
not be present until you click into the text box.
12. At this point resize and position your group boxes and controls as needed. The top of the
Census Data group box should line up with the top of the map and the bottom of it with
the bottom of the report.
13. Save
If you were to run the page at this point your page should resemble the following image.
Add the JavaScript
In this section you will add the necessary JavaScript needed to turn on/off the Census
data.
1. Switch to the HTML view using the tab at the bottom
2. For all input tags of type=checkbox add onclick=’checkbox1(“id”)’, where id is the value
of the tags id. For example:
<INPUT id=checkbox1_0 onclick='checkbox1("checkbox1_0")' type=checkbox value=al name=checkbox1
displaytext="Alabama">
Configure WebFOCUS for Google Maps
Page 35 of 57
Copyright © 2008 Information Builders
3. For all input tags of type=radio add onclick=’radioChange(“id”)’, where id is the value
of the tags id. For example:
<INPUT id=radio1_0 onclick='radioChange("radio1_0")' type=radio CHECKED value=pd name=radio1
displaytext="Population Density">
4.
5.
6.
7.
8.
9.
Switch back to the Design view.
Link to the census.js file by via the menu bar option Insert->CSS/Scripts …
Click the icon to the right of the Script Files: box
Select census.js
Click Open
Run the map and play around with turning on/off Census data for each group. Change
the radio buttons to see the map reload the data for the selected states to match the new
radio button selections.
Understanding the JavaScript
Below the line is the JavaScript code found in census.js. Review the code, which is
heavily commented to see what is going on.
The following line of code is a key line in the JavaScript file.
getMapObject('googlemap1').map.addOverlay(gx);
The function getMapObject is a JavaScript function written by Information Builders.
googlemap1 is the id of the div on your HTML page that contains the Google Map.
The rest of the line is Google Map API specific code.
So in order to use any of the Google Map API methods that are part of the GMap2 class you
need to do getMapObject(id).map.method
GMap2 documentation can be found online at:
http://code.google.com/apis/maps/documentation/reference.html#GMap2
GMap2 is the main class in the Google Maps API.
//Census.js
//Array used to keep track of active Census Layers
var layersArray = new Array();
//This structure stores the GGeoXml object in gx.
//gx is a pointer to the layer data.
//checked is the id associated with the state checkbox
function layer(gx,checkid){
this.gx = gx;
this.checkid = checkid;
}
Configure WebFOCUS for Google Maps
Page 36 of 57
Copyright © 2008 Information Builders
//This function is called when you click on a radio button
function radioChange(checkid){
var len = layersArray.length;
var ids = new Array();
//In this loop, we turn off all the existing Census layers and remove them from the active
//array. At the same time we build another array containing the ids of the checked boxes.
for(var i = 0; i < len; i++) {
getMapObject('googlemap1').map.removeOverlay(layersArray[0].gx);
ids[i] = layersArray[0].checkid;
layersArray.splice(0,1);
}
//In this loop we turn on each of the Census layers based on the new radio button settings.
for(var x = 0; x < ids.length; x++) {
addLayer(ids[x]);
}
}
//This function is called when a checkbox is checked. It turns on/off Census layers for
//the associated state
function checkbox1(checkid) {
//Check if the box is checked. If it is turn on that layer. If not turn it off.
if (document.getElementById(checkid).checked){
addLayer(checkid)
}
else{
//Line below makes sure the unchecked layer existed in the layersArray
var rlayer = searchLayers(checkid);
if (rlayer != -1){
//The line below is how you remove the layer
getMapObject('googlemap1').map.removeOverlay(layersArray[rlayer].gx);
layersArray.splice(1,rlayer);
}
}
}
//This function adds the layer both to the display and to the layersArray
function addLayer(checkid){
var geoXML = geoString(checkid);
var gx = new GGeoXml(geoXML);
getMapObject('googlemap1').map.addOverlay(gx);
var currentlayer = new layer(gx,checkid);
layersArray.push(currentlayer);
}
//This function builds the url that is turned into a GGeoXml object.
//The string combines the path on juiceanalytics.com with
Configure WebFOCUS for Google Maps
Page 37 of 57
Copyright © 2008 Information Builders
//the value of the checkbox (2 letter state abbreviation in lowercase)
//the value of the detail radio button, and the value of the type radio button.
function geoString(checkid){
return "http://media.juiceanalytics.com/downloads/" + document.getElementById(checkid).value + "_" +
getDetail() + "_" + getType() + ".kmz";
}
//searches layersArray for the id of a checkbox. Returns -1 if not found.
function searchLayers(checkid){
for(var i = 0; i < layersArray.length; i++) {
if (layersArray[i].checkid == checkid)
return i;
}
return -1;
}
//get the value of the detail radio button
function getDetail(){
return getCheckedValue('radio2',2);
}
//gets the value of the type radio button
function getType(){
return getCheckedValue('radio1',3);
}
//gets the value of the radio button.
function getCheckedValue(radio,num) {
for(var i = 0; i < num; i++) {
var currentid = radio + "_" + i;
var currentradio = document.getElementById(currentid);
if(currentradio.checked) {
return currentradio.value;
}
}
return "";
}
Configure WebFOCUS for Google Maps
Page 38 of 57
Copyright © 2008 Information Builders
Bonus Lab - Filtering WebFOCUS for Google Maps
The following will show you how to filter a WebFOCUS for Google Maps map both
from a control on an HTML Layout Page and via a drill down. The technique will be presented
through an example that lets you filter on COUNTRY from a HTML Layout control and drill
down on either COUNTRY or STATE.
Getting Started
Prior to attempting this you should go through the process of creating a normal
WebFOCUS for Google Maps Application. This demonstration we will use the IBI provided
Google Maps sample procedures contained in the ibidemo application. The HTML Layout pages
will be created from scratch.
1. Create a new project named GM Drill
2. Copy the following procedures from the ibidemo app into the GM Drill project
a. ibidemo_gmap_activedashboard.fex
b. ibidemo_gmap_activereport.fex
c. ibidemo_gmap_marker.fex
d. ibidemo_gmap_setcentervalue.fex
3. Rename all files so that ibidemo_gmap_ is no longer part of the file name.
4. Copy the following images from the ibidemo app into the GM Drill project
a. bluepin.png
b. greenpin.png
c. purplepin.png
d. redpin.png
e. yellowpin.png
5. Copy both the Master (.mas) and Focus (.foc) file with the following names from ibidemo
into the GM Drill Project.
a. centurysales
b. invento
c. locale
d. plants
e. stores
Create the Google Map HTML Layout Page
In this section you will create an HTML Layout Page that contains just the Google Map.
This must be done first as the changes we make in the following section will make it impossible
to do this step.
1. Create a new HTML Layout page called centurymap
2. Insert a Google Map.
3. Set the following on the Map tab
Configure WebFOCUS for Google Maps
Page 39 of 57
Copyright © 2008 Information Builders
a. Set Center Value
i. Change Source Type to External Procedure
ii. Click the ellipse next to Source
iii. Double click setcentervalue.fex
b. Selected Marker Image
i. Click the ellipse to the right of the Select Marker Image box
ii. Double click purplepin.png
c. Set the rest of the options shown in the image below as desired.
Configure WebFOCUS for Google Maps
Page 40 of 57
Copyright © 2008 Information Builders
4. Switch to the Layers Tab
5. Add a new layer as follows
a. Source Type: External Procedure
b. Source: marker.fex
6. Select all markers
7. Set the Tooltip as follows
a. Source Type: Field
b. Source: REVENUE_RANGE
8. Set the Drill Down as follows
a. Action: External Procedure
b. Source: activedashboard.fex
c. Leave Target Type and Target/Template Name as is.
9. Click Update Selected Markers
10. Select one marker at a time by clicking on it in the Markers box and do the following.
a. In the Image section leave Source Type as image and click the ellipse button to
the right of the Source box.
b. Choose the image file that corresponds to the selected marker class and click
Open.
i. yellowicon = yellowpin.png
ii. redicon = redpin.png
iii. greenicon = greenpin.png
iv. blueicon = bluepin.png
c. Click Update Selected Markers before moving on to the next marker.
11. Click OK
12. Run the HTML Layout Page to ensure Markers are appearing
Configure WebFOCUS for Google Maps
Page 41 of 57
Copyright © 2008 Information Builders
Note: Sizing was not given for the Google Maps control. This will be a trial and error process
after we create the mashup later in the lab.
Create a Wrapper Procedure
This wrapper procedure will setup the necessary Global Variable prior to calling the Map.
This will be used in drill downs.
1) Create a new procedure. It is recommended that the procedure name match the name of
the HTML file that contains the Google Map. In this example we will call both the
HTML file and procedure centurymap.
2) Place the following code in centurymap.fex
-DEFAULT &STATE=''
-SET &&STATE=&STATE;
-SET &&COUNTRY2 = &COUNTRY2;
-SET &&LAT=&LAT;
-SET &&LONG=&LONG;
-RUN
-HTMLFORM centurymap.htm
Filter Enable your Google Maps Procedures
In this section you will learn how to filter enable your Google Maps Procedures. You
will make use of Global Amper variables in order to pass information from HTML controls and
drill downs into the Google Map procedures
Filter Enable Your Center Value Procedure
1. Open setcentervalue.fex in the procedure viewer
2. Switch to text view using the tabs at the bottom
3. Add the following code at the top:
-DEFAULT &&COUNTRY='';
-DEFAULT &&LAT='';
-DEFAULT &&LONG='';
-SET &WHEREC=IF &&LAT NE '' AND &&LONG NE '' THEN 'LATITUDE EQ ' |&&LAT | ' AND
LONGITUDE EQ '| &&LONG ELSE IF &&COUNTRY NE '' AND &&COUNTRY NE 'FOC_NONE'
THEN 'COUNTRY EQ ' | &&COUNTRY ELSE 'STATE EQ ' | '''New York''';
The first three lines of code set default values for the Global Amper Variable &&COUNTRY, &&LAT and
&&LONG respectively. The fourth line then looks at these values to dynamically create an amper variable
(WHEREC for WHERE COUNTRY) that is used in the WHERE clause in step 8 below. The logic is as
follows.
1.
2.
If both &&LAT and &&LONG have values the center point will be at that location.
If they do not and &&COUNTRY has a value other than all filter center on the first point in that
Country.
Configure WebFOCUS for Google Maps
Page 42 of 57
Copyright © 2008 Information Builders
3.
If 1 and 2 fail center on the first point in New York
4. Place the following at the bottom of the report:
-SET &&LAT='';
-SET &&LONG='';
These two lines just blank out the Global variables &&LAT and &&LONG.
5. Switch back to Physical View
6. Double click on the Report Component
7. Click the Where/If button
8. Change the existing WHERE clause to &WHEREC.
New Where Clause
Original WHERE Clause
9. Click OK
10. Save
11. Exit Report Painter
12. Exit the Procedure Viewer
Filter enable your Layer Procedure
1. Open marker.fex in the procedure viewer
2. Switch to text view using the tabs at the bottom
3. Add the following code at the top:
-DEFAULT &&COUNTRY=FOC_NONE;
-DEFAULT &&COUNTRY2='';
-DEFAULT &&STATE='';
-SET &WHEREC=IF &&COUNTRY2 NE '' THEN ''''|&&COUNTRY2 |'''' ELSE
&&COUNTRY;
-SET &WHERES=IF &&STATE NE '' THEN ''''|&&STATE |'''' ELSE 'FOC_NONE';
Configure WebFOCUS for Google Maps
Page 43 of 57
Copyright © 2008 Information Builders
The first three lines of code set default values for the Global Amper Variable &&COUNTRY,
&&COUNTRY2 and &&STATE respectively. The fourth line then looks at &&COUNTRY and
&&COUNTRY2 to dynamically create an amper variable (WHEREC for WHERE COUNTRY)
that is used in a WHERE clause in below. The logic is as follows.
1.
2.
3.
If &&COUNTRY2 has a value filter on it.
If &&COUNTRY2 does not have a value filter on &&COUNTRY.
As &&COUNTRY defaults to ‘FOC_NONE’ the filter will be skipped if both
&&COUNTRY2 and &&COUNTRY have no value.
The last line then looks at &&STATE dynamically create an amper variable (WHERES for
WHERE STATE) that is used in a WHERE clause below. The logic is as follows.
1. If &&STATE has a value then filter on it.
2. If it does not have a value no filter is applied on the STATE column.
4. Place the following at the bottom of the report:
-SET &&COUNTRY2='';
-SET &&STATE='';
These two lines just blank out the Global variables &&COUNTRY2 and &&STATE.
5.
6.
7.
8.
Switch back to Physical View
Double click on the Report Component
Click the Where/If button
Click the Assist button
9. Create the WHERE clause as follows
a. Double click COUNTRY in the field list
b. Logical Relation: equals
c. Compare Type: Parameter
d. Compare Value
i. Double Click on <Please Specify>
ii. Set Name to WHEREC
Configure WebFOCUS for Google Maps
Page 44 of 57
Copyright © 2008 Information Builders
10. Click OK
11. Click OK
12. Remove the single quotes found around &WHEREC
13. Click New
14. Click Assist
15. Create the WHERE clause as follows
a. Double click STATE in the field list
b. Logical Relation: equals
c. Compare Type: Parameter
d. Compare Value
i. Double Click on <Please Specify>
ii. Set Name to WHERES
16. Click OK
17. Click OK
18. Remove the single quotes found around &WHERES
19. Click OK
20. Save
21. Exit Report Painter
22. Exit the Procedure Viewer
Configure WebFOCUS for Google Maps
Page 45 of 57
Copyright © 2008 Information Builders
Drill Down Enable your Embedded Report
In this section you will enable the embedded report to filter the map via a drill
down in addition to the already existing drill down for panning.
1. Rename activereport to embeddedreport
2. Open embeddedreport.fex in the procedure viewer
3. Switch to text view using the tabs at the bottom
4. Add the following code at the top:
-SET &&COUNTRY=&COUNTRY;
This sets up the Global Amper variable &&COUNTRY that is used in your layer and center value
procedures.
5. Switch back to Physical View
6. Double click on the Report Component
7. Provide any value when prompted and click OK.
8. Change the report format from ‘HTML Active Report’ to HTML using the drop
down list on the tool bar.
9. Click the Where/If button
10. Click the Assist button
Configure WebFOCUS for Google Maps
Page 46 of 57
Copyright © 2008 Information Builders
11. Create the WHERE clause as follows
a. Double click COUNTRY in the field list
b. Logical Relation: equals
c. Compare Type: Parameter
d. Compare Value
i. Double Click on <Please Specify>
ii. Change Variable type to Multiselect OR
iii. Set Accept List to Dynamic List
12. Click OK
13. Click OK
14. Click OK
15. Right click on Country and choose Options
Configure WebFOCUS for Google Maps
Page 47 of 57
Copyright © 2008 Information Builders
16. Switch to the Drill Down tab
17. Click the Mutilple Drill Downs check box
18. In Drill Menu Items change DrillDown 1 to Pan
19. With Pan selected change the Javascript from parent.panToPoint to
parent.iframe1.panToPoint
Original
New
20. Click the New Drill menu item icon
21. Type Filter
22. Complete the second drill down as follows
a. Drill Down Type: Execute Procedure
b. Procedure Name
i. Click Browse
ii. Double click centurymap
c. Set Target Frame to iframe1
Configure WebFOCUS for Google Maps
Page 48 of 57
Copyright © 2008 Information Builders
d. With Parameters
i. First Parameter
1. Click Add
2. Set Parameter Name to COUNTRY2
3. Leave Parameter Value as is Field=COUNTRY
4. Click OK
ii. Create another parameter with the following settings
1. Name: LAT
2. Value: Field = LATITUDE
iii. Create a third parameter as follows:
1. Name: LONG
2. Value: Field =LONGITUDE
e. Click OK
23. Repeat steps 15 -22 on the STATE column. In addition to the three drilldown
parameters on the Filter item created above, add an additional one as follows:
a. Name: STATE
b. Value: Field = STATE
24. Save
25. Exit Report Painter
26. Exit the Procedure Viewer
Configure WebFOCUS for Google Maps
Page 49 of 57
Copyright © 2008 Information Builders
Create the Mashup
In this section, you will create the final mashup that contains filter controls, the
Google Map HTML Layout Page, and the Embedded Report.
1. Create a new HTML Layout Page named GoogleMapsDrill
2. Insert a New Report via the Insert->New Report menu option
3. Draw the report on the right side of the canvas.
4. Right click on the report and choose Reference existing procedure
5. Double click embeddedreport.fex
6. On the New Parameters Dialog change the drop-down ‘Parameter grouping
options’ from ‘New form element’ to ‘Do not create a form’
7. Click OK
8. Move the drop down list and its label to the top left of the screen.
9. Place the button that currently reads ‘Run report 1’ to the right of the drop down
list.
10. Move the report up.
Configure WebFOCUS for Google Maps
Page 50 of 57
Copyright © 2008 Information Builders
Your canvas should currently resemble the image above.
11. Right click on the button ‘Run report1’ and click Hyperlink Properties…
12. Change the Display Text to ‘Filter’
13. Add a second request by clicking the new request icon
14. Setup the request as follows
Configure WebFOCUS for Google Maps
Page 51 of 57
Copyright © 2008 Information Builders
a. Action: HTML File
b. Source: centurymap.htm
c. Target Type: Frame
d. Target/Template Name: iframe1
15. Click OK
16. Move iframe1 up to the left of the report and size accordingly.
17. Right click iframe1 and choose Frame Properties
18. Add a new request by clicking the new request icon.
19. Setup the request as follows
a. Action: HTML File
b. Source: centurymap.htm
20. Click OK
21. Select the report object and set Auto Execute to True in the Properties Palette
22. Set the Frame border to NO for both iframe1 and report1 using the Properties
palette.
23. Save
Configure WebFOCUS for Google Maps
Page 52 of 57
Copyright © 2008 Information Builders
Your canvas will resemble the one above. You may need to resize iframe1, report1, and
even the googlemap1 objects (in centurymap.htm) until you are happy with the sizing and
positioning. The easiest way to size the googlemap1 object in centurymap.htm is to place
it all the way at the top and left (0,0) and set the height and width equal to those of
iframe1.
Configure WebFOCUS for Google Maps
Page 53 of 57
Copyright © 2008 Information Builders
Using the Mashup
In this section you will learn how to filter the map.
1.
Run GoogleMapDrill.htm. The image should resemble what you see in your
browser
2.
You can filter both the report and the map by choosing one or more countries in
the Country list box and then clicking Filter. Give this a try.
3. Reset the Country list to ALL and click Filter.
4. The Country and State columns of the report have the multiple drill downs that we
created. Try panning and filtering using these.
When you filter from the report, only the map is filtered. This allows you to
quickly change the map to another area using the report.
Report to Map Drilldown
You can also create a plain report to map drill down. This means you first run a
report. Then you click a drill down link and get a map.
Configure WebFOCUS for Google Maps
Page 54 of 57
Copyright © 2008 Information Builders
1. Make a copy of embeddedreport.fex
2. Rename the copy to startReport.fex
3. Open the Report Component in the Report Painter
4. On both the COUNTRY and the STATE columns remove the Drill Menu Item
‘Pan’ and uncheck the Multiple Drill Down box
5. If you’d like you can change it back to an Active Report as we are no longer
doing multiple drill downs.
6. Save
7. Exit Report Painter
8. Exit the Procedure Viewer
9. Run startReport
10. The WebFOCUS Auto-prompting screen will prompt you for a value(s) for
Country. Choose the desired value(s).
Note: As this section uses Auto-Prompting, parameter prompting must be set to
XMLRUN in the WebFOCUS Administration Console. If it is not you will
receive the following error:
(FOC295) A VALUE IS MISSING FOR: &COUNTRY
Steps for enabling Auto-Prompting can be found at:
http://techsupport.informationbuilders.com/tech/wbf/wbf_dia_070.html
11. Click on a value in the Country column to drill down to a map filtered by
Country.
Configure WebFOCUS for Google Maps
Page 55 of 57
Copyright © 2008 Information Builders
12. Choose another value(s) from the auto-prompt.
13. Click on a value in the State column to drill down to a map filtered by State.
Configure WebFOCUS for Google Maps
Page 56 of 57
Copyright © 2008 Information Builders
Appendix A - Configure WebFOCUS for Google Maps
This section will take you through the process of generating a Google Maps API
Key and providing it to WebFOCUS. Please note that localhost should be replaced with
the host name or IP address of your installation.
1. http://code.google.com/apis/maps/signup.html
2. After reading the Google Maps API Terms of use click the checkbox labeled “I
have read and agree with terms and conditions”
3. In the textbox labeled “My web site URL:” type http://localhost
4. Sign into your Google Account or create one if you do not have one.
5. Copy the key found below the text “Your key is;”
6. Open the WebFOCUS Administration Console via
Start Menu->Programs->WebFOCUS 76->WebFOCUS Administration Console
or by using the URL http://localhost:8080/ibi_apps/console/webfocusconsole.jsp
7. If prompted logon with a User ID of admin with a blank password.
8. Click Configuration
9. Click General
10. Scroll to the bottom
11. Paste your Google Maps API Key in the last textbox, which is labeled
google_maps_api_key
12. Click Save
Configure WebFOCUS for Google Maps
Page 57 of 57
Copyright © 2008 Information Builders