Integrating WebFOCUS With Google Maps

How to:

You can integrate WebFOCUS reports with Google Maps by:

Latitude and longitude values can be passed as a parameter from a Google Map to update a WebFOCUS procedure. Latitude and longitude are sent as a pair of values, and the HTML Composer uses a specific parameter, &COORDINATES, to parse the value pairs correctly.
Top of page
x
Procedure: How to Update a WebFOCUS Report Based on a Google Map Location

By adding a drill down to a Google Map, you can filter a WebFOCUS report by the latitude and longitude coordinates of the selected marker(s). The parameter to pass the longitude/latitude values must be called &COORDINATES. This HTML Composer parameter will parse the Latitude and Longitude as paired data sets.

The following example updates a WebFOCUS report based on a Google Map location by:

  1. From the HTML Composer with a Google Map created, select New Report from the Insert menu.

    The cursor changes into a crosshair.

  2. Click and drag the crosshair to create the report object and adjust it to the size you want.
  3. Right-click on the report object and select Open procedure viewer from the context menu.

    The Procedure Viewer opens.

  4. Join the Century Sales and Locale data sources.

    Tip: The Century Sales and Locale data sources are available from the Master Files folder in the IBI Demonstration project of Developer Studio. You may copy these source files to the project directory of your choice.

    1. Click and hold a component connector (yellow diamond) and select Join.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Join dialog box opens.

    3. Select the Add File button from the Join toolbar.

      The File Description List for the Join dialog box opens.

    4. Select locale.mas and click Open.

      Developer Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join tool displays both data sources and, the default Joins, as shown in the example image below.

      For more information about using the Join tool, see the Creating Reporting Applications With Developer Studio manual.

    5. Close the Join tool to save the Join and update the procedure.

      The Join is added to the Procedure Viewer.

  5. Create a Revenue by Category report.
    1. From the Procedure Viewer, click and hold a component connector (yellow diamond) and select Report.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Report Painter opens.

    3. Select By from the Columns toolbar and double-click CITY, PRODUCTTYPE, REGION, STATE, and STORENAME from the Object Inspector.
    4. Click the mouse after the STORENAME field to add the next field.
    5. Select Sum from the Columns toolbar and double-click LINEPRICE from the Object Inspector.
    6. Rename the PRODUCTTYPE and LINEPRICE fields:
      • Select PRODUCTTYPE, right-click and select Column Title from the context menu. Type Category in the Title dialog box and click OK.
      • Select LINEPRICE, right-click and select Column Title from the context menu. Type Revenue in the Title dialog box and click OK.
    7. Type Revenue by Category in the Page Heading.
  6. Create the &COORDINATES parameter in the report for the WHERE clause.
    1. Select Where/If from the Report menu.

      The Report Options dialog box opens at the Where tab.

    2. Type &COORDINATES in the text area, as shown in the example image below.

    3. Click OK to close the Report Options dialog box.

      &COORDINATES is added to the Object Inspector in the Report Variables folder.

  7. Add the report to the HTML Composer.
    1. The report and &COORDINATES parameter have been created, save and close the report. You are returned to the HTML Composer where the New Parameters dialog box appears.
    2. Clear the Create control check box for the parameter, and click OK.

      The parameters will be passed by the Google Map so you can delete the parameter dialogs here.

      The Revenue by Category report appears in the HTML Composer.

    3. Select the report object to view the associated properties in the Properties window.
    4. Select False from the Auto Execute drop-down list in the Properties window.
  8. Change the Google Map properties to drill down to an embedded procedure.
    1. Double-click the Google Map object to open the Map Properties dialog box.

      The Map Properties dialog box opens at the Map tab.

    2. Select the Layers tab.
    3. Click the mouse and hold the Shift key and select all markers.
    4. From the Drill Down section, select:
      • Embedded procedure as the Drill Down Action.
      • report1 from the Source drop-down list.
      • Keep the default selections for Target Type and Target/Template Name.
    5. Click Update Selected Layer.

      The following image is an example of the Map Properties dialog box with these drill-down options selected.

    6. Click OK to close the Map Properties dialog box.
  9. Save and run the layout.

Click the markers on the Google Map to update the report based on the location selected, as shown in the image below.
Top of page
x
Procedure: How to Update the Google Map Based on Data in a Report

A JavaScript command is used in a WebFOCUS report to update a Google Map. The JavaScript action parent.panToPoint automatically scrolls the Google Map to a specified Latitude and Longitude. In addition, the zoom level of the Google Map can be specified. This will overwrite the zoom level set by default.

Note: If an Active Report is in a dashboard block and uses panToPoint, you should omit parent.

The following example updates a Google Map based on data in a report by:

  1. From the HTML Composer with a Google Map created, select New Report from the Insert menu.

    The cursor changes into a crosshair.

  2. Click and drag the crosshair to create the report object and adjust it to the size you want.
  3. Right-click the report object and select Open procedure viewer from the context menu.

    The Procedure Viewer opens.

  4. Join the Century Sales and Locale data sources.

    Tip: The Century Sales and Locale data sources are available from the Master Files folder in the IBI Demonstration project of Developer Studio. You may copy these source files to the project directory of your choice.

    1. Click and hold a component connector (yellow diamond) and select Join.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Join dialog box opens.

    3. Select the Add File button from the Join toolbar.

      The File Description List for Join dialog box opens.

    4. Select locale.mas and click Open.

      Developer Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join tool displays both data sources and the default Joins, as shown in the example image below.

      For more information about using the Join tool, see the Creating Reporting Applications With Developer Studio manual.

    5. Close the Join tool to save the Join and update the procedure.

      The Join is added to the Procedure Viewer.

  5. Create a Regional Revenue Results report.
    1. From the Procedure Viewer, click and hold a component connector (yellow diamond) and select Report.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Report Painter opens.

    3. Select By from the Columns toolbar and double-click COUNTRY, REGION, STATE, STORENAME, LATITUDE, and LONGITUDE from the Object Inspector.
    4. Hide the Latitude and Longitude fields:
      • Select LATITUDE, right-click and select Visible from the context menu.
      • Select LONGITUDE, right-click and select Visible from the context menu.
    5. Click the mouse after the LONGITUDE field to add the next field.
    6. Select Sum from the Columns toolbar and double-click LINEPRICE from the Object Inspector.
    7. Rename the LINEPRICE field:
      • Select LINEPRICE, right-click and select Column Title from the context menu.
      • Type Revenue in the Title dialog box and click OK.
    8. Type Regional Revenue Results in the Page Heading.
    9. Add a Style Sheet to the report:
      • Select Styling from the Report menu.

        The Report Options dialog box opens at the Style tab.

      • Select Style File Selection, located on the bottom right of the tab.

        The StyleSheet Selection box opens.

      • Click the Add new item button and select problue.sty from the StyleSheet File Selection dialog box.
      • Click OK.

        The selected Style Sheet is added to the Include StyleSheet File section.

      • Click Finish to close the StyleSheet Selection box.
      • Click OK to close the Report Options dialog box.

        The Style Sheet is applied to the report.

  6. Add JavaScript drill-down parameters for the (By) COUNTRY field.
    1. Select COUNTRY, right-click and choose Options from the context menu.

      The Field Properties dialog box opens at the Style tab.

    2. Click the Drill Down tab.
    3. Select Column Data from the active object drop-down list.
    4. Select Javascript from the Drill Down Type drop-down list.
    5. Type parent.panToPoint in the Javascript input field.
    6. Click Add from the With Parameters section to add each required drill down parameter.

      The Drill Down Parameter dialog box opens.

    7. Add the following Drill Down Parameters:
      • With the Field Parameter value selected, select LATITUDE from the drop-down list and click OK.
      • Click Add to add the longitude parameter: With the Field Parameter value selected, select LONGITUDE from the drop-down list and click OK.
      • Click Add to add the unique identifier parameter: With the Constant Parameter value selected, type googlemapcontrol1 in the input field and click OK.

        Note: googlemapcontrol1 is the name of the Google Map object in the HTML Composer.

      • Click Add to add the zoom level parameter: With the Constant Parameter value selected, type 3 in the input field and click OK.

      The following image is an example of the Field Properties Drill Down tab with these options added.

    8. Click OK to close the Field Properties dialog box.
  7. Add JavaScript drill-down parameters for the (By) STATE field.
    1. Select STATE, right-click and choose Options from the context menu.

      The Field Properties dialog box opens at the Style tab.

    2. Click the Drill Down tab.
    3. Select Column Data from the active object drop-down list.
    4. Select Javascript from the Drill Down Type drop-down list.
    5. Type parent.panToPoint in the Javascript input field.
    6. Click Add from the With Parameters section to add each required drill down parameter.

      The Drill Down Parameter dialog box opens.

      • With the Field Parameter value selected, select LATITUDE from the drop-down list and click OK.
      • Click Add to add the longitude parameter: With the Field Parameter value selected, select LONGITUDE from the drop-down list and click OK.
      • Click Add to add the unique identifier parameter: With the Constant Parameter value selected, type googlemapcontrol1 in the input field and click OK.

        Note: googlemapcontrol1 is the name of the Google Map object in the HTML Composer.

      • Click Add to add the zoom level parameter: With the Constant Parameter value selected, type 6 in the input field and click OK.
      • Click OK to close the Field Properties dialog box.
  8. Save and close the report and Procedure Viewer.

    The report appears in the HTML Composer.

  9. Save and run the layout.

The Google Map and the report appear in the output. Click a drill-down link from the report. The Google Map updates according to the location selected from the report.

For example, click on a link in the Country column to zoom and navigate to the selected country at the zoom level illustrated. Or click on a link in the State column to zoom and navigate to the selected state at the zoom level specified.

WebFOCUS