Components Tab

In this section:

You can add a variety of components to an HTML page using the command groups in the Components tab.

The Components tab contains the Reports, Generic Elements, Containers, and Objects groups, as shown in the following image.

Components tab


Top of page

x
Reports Group

How to:

From the Reports group, you can add a Report or Chart to your HTML page. The Reports group is shown in the following image.

Reports group

The commands in the Reports group are:

Report

Inserts a report object. You can add reports to the HTML canvas that will display when you run the layout. You can either embed or reference reports. Double-clicking a blank report object opens the Report canvas where you can create, and style a report to be used in the HTML page.

You can also include parameters in a report whose values can be assigned with controls that are added with the HTML canvas.

Chart

Inserts a chart object. You can add charts to the HTML canvas that will display when you run the layout. You can either embed or reference charts. Double-clicking on a blank chart object will open the Chart canvas where you can create and style a chart to be used in the HTML canvas.



x
Procedure: How to Add a New Report or Chart to an HTML Page
  1. Insert a report or chart object by doing one of the following:
    • Click the Report or Chart button from the Components group.
    • Right-click in the layout and select New Report or New Chart from the shortcut menu.

    The pointer changes into a crosshair.

  2. Drag the crosshair to create a report or chart object and adjust it to the size that you want.

    A report or chart object is created in the layout and assigned the name report(n) or chart(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or chart associated with it. Once a report or chart is associated with the object, the object displays the contents of the report or chart if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the HTML Page tab, located in the App Studio Options dialog box.

  3. Create a report or chart by doing one of the following:
    • Double-click the placeholder.

      or

    • Right-click the placeholder and select New Report for a report, or New Chart for a chart.

    The Open dialog box opens.

  4. Select the Master File you want to use and click Open.

    The Report canvas opens for reports and the Chart canvas opens for charts.

  5. Optionally, after creating the report or chart, you can change its properties by adjusting the properties displayed in the Properties tab of the Properties window.


x
Procedure: How to Add an Existing Report or Chart to a Layout
  1. Insert a report or chart object by doing one of the following:
    • On the Components tab, in the Components group, click Report or Chart.

      The pointer changes into a crosshair. Drag the crosshair to create a report or chart object and adjust it to the size you want.

      A report or chart object is created in the layout and assigned the name report(n) or chart(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or chart associated with it. Once a report or chart is associated with the object, the object displays the contents of the report or chart if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the HTML Page tab, located in the App Studio Options dialog box.

    • Right-click in the layout and select New Report or New Chart from the shortcut menu.
  2. Right-click the report or chart and select Reference existing procedure.
    • For a report, right-click the report object and select Import existing report.
    • For a chart, right-click the chart object and select Import existing chart.

    The Open dialog box opens.

  3. Enter the name of the procedure you want to add to the layout.
  4. Click Open.

    The report or chart object appears in the Design view of the HTML canvas.


Top of page

x
Generic Elements Group

In this section:

How to:

You can add a variety of basic elements. The Generic Elements group is shown in the following image.

Generic Elements group

The commands in the Generic Elements group are:

Image

Inserts an image. You can add an image to the layout. This is useful for including graphics, such as a company logo.

You can insert an image into your report layout and add a hyperlink. After you run your report and click the image, you can launch a URL or run a report the same way by clicking a hyperlink or push button.

Note: When inserting images, images must be referenced from a specific directory location.

Hyperlink

Inserts a hyperlink.

Button

Inserts a button. A push button enables you to execute a report or link to a URL or HTML file. This behavior is similar to a hyperlink.

Reset

Inserts a reset button. A reset button enables you to revert the entire page back to its initial settings.

Save Selection

Inserts a save selection button. This component is available only when you are using Managed Reporting.

Label

Inserts a label. A label is simply a piece of text. The label component enables you to create and name a label, and link it to a control by assigning the label HTML for property the same value as the Unique Identifier property for the control.

Text

Inserts a text box. You can add text to the layout. This is useful for including headings for your webpage, or adding directions or explanation for your report or chart.

Line

Inserts a line. You can add a horizontal or vertical line to the layout. This is useful for distinguishing between sections of your launch or display page.

Menu

Inserts a menu. You can add a horizontal or vertical menu to the layout. This component can be used with Maintain code.

Table

Inserts a table. You can add a horizontal or vertical line to the layout. This component can be used with Maintain code.



x
Using the Font Dialog Box

You can use the Font dialog box to style your text. The options are:

Font

Determines the type of font used. For example, Ariel, Garamond, Times New Roman. The fonts available for you to use are determined by what fonts are installed on the current machine.

Font Style

Determines whether the text is normal, bold, italic, or bold and italic.

Size

Determines how large the text is.

Color

Determines the color of the text.

Effects

Determines what effects, if any, are used for the text. You can select None, Underline, Strikethrough, Overline.



x
Procedure: How to Format Text in the Layout

You may apply various formatting and style options to words and individual text characters within the text object.

Note: Any formatting and styling that you may have applied to individual text strings within the text object will remain unchanged. Changes made to the entire text object are only applied to part of the text string that has not been formatted.

  1. Insert a text object into the layout and type text in the text object.
  2. Select the text that you wish to format:
    • To format the entire text object, single-click the text object in the layout.
    • To format an individual word or text character, highlight part of the text within the text object.
  3. Right-click on text to access the shortcut menu.
  4. Click Style, and then click Font. The Font dialog box opens.
  5. Select from the formatting options available. You can change the type, style, color, size, and effect of the font.

    Note: The Bold, Italic, Underline, Superscript, and Font Style options are available when formatting individual words or text characters. The Font Style and Alignment options are available when the entire text object is selected.

  6. Click OK to close the Font dialog box.

The format options are applied to the text selected.



x
Procedure: How to Insert a Bulleted List or Numbered List Into a Text Element

To insert a bulleted list or numbered list into a text object:

  1. Insert a text object into the layout and enter text on different lines.
  2. Highlight and right-click the text.

    The right-click shortcut menu opens.

  3. Select Bullets and then either Disc, Circle, or Square if you want a bulleted list. Select Numbering and then either Numbers, Lowercase Letters, Uppercase Letters, Small Roman numerals, or Large Roman numerals if you want a numbered list.

    Note:

    • Alternatively, you can select a bullet type before typing text to begin the list. Pressing enter will begin the next item in the list on a separate line.
    • To change the bullet or number list type of an existing list, place your pointer on the list level you want to change and reselect a bullet or number list type. Selecting None will remove the bullets or numbers for that level and move any nested lists up one level. In order to switch between bullets and numbers, you must first remove the current list option by selecting None and then applying the list option you want.



x
Procedure: How to Insert Nested Lists Into a Text Element

To insert a nested list into the text object:

  1. Insert a text object into the layout and create a list.
  2. Place your pointer after a list item.
  3. Right-click and select Nested List and then select a bulleted or numbered list option.

    A list is started within the current list, allowing you to enter text on that list level.

    Note: Pressing tab while your pointer is on the same line as a list item will move that item one level down, resulting in a nested list. The bullet or number type selected is the next list type in the right-click shortcut menu. For example, if you have a bulleted list that uses the disc bullet type, pressing tab to move an item down one level will cause that nested list to have the circle bullet type.

    You can continue to nest lists within other lists by using the same steps shown above.

    Note: You cannot skip a list level. For example, in order to insert a nested bulleted list or nested numbered list on a lower level, there must be a list one level up from it.


Top of page

x
Containers Group

How to:

You can add specific containers that group objects together on an HTML page. The Containers group is shown in the following image.

Containers group

The commands in the Containers group are:

Form

Inserts either a multi-layer or single-layer form.

Tab

Inserts a tab control. Tab controls enable you to create multiple pages in one HTML form and present a better display for viewing secondary information. You can select Top, Bottom, Left, or Right. This means you can choose to add a tab control that displays tabs at the top, bottom, left, or right on the control.

When a tab control object is added to the layout, each tab control consists of:

  • A tab item.

    A tab item is the tab label. You may edit the name of the tab item, style the tab item, and add multiple tab items. Each tab item is associated with a tab body.

  • A tab body.

    A tab body is the tab page where you associate your components, such as report and graph objects, images, and lines.

The Tab control can be displayed as a full screen or part of an HTML page.

Accordion

Inserts an Accordion styled box.

Window

Inserts a window.

Group Box

Inserts a group box. A group box can be used to create a border around a group of objects, for example, forms or reports and charts.

Panel

Inserts a panel to group objects together. The panel is invisible at runtime.



x
Procedure: How to Add Additional Tabs
  1. Select the tab control object in the layout.
  2. Right-click and select Add Page from the shortcut menu.

    A tab is added to the tab control object.

  3. To align multiple tab items, select the tab control object and click AutoArrange from the shortcut menu,

    The tab items are resized to the size of the widest tab item and they are evenly spaced.



x
Procedure: How to Enable Full Screen Mode for the Tab Control

You may resize the tab control to fit the full screen of your layout, making the tab control the full background of your window at run time. When set to full screen mode, scroll bars will not be applied to the output window. Therefore, you may have to adjust the tab control (and any items on the tab) in the layout to ensure that they appear appropriately for display at run time.

Note: It is recommended to set the tab control to full screen mode at the beginning of the development process. If there are existing components on the layout that are not part of the tab control, these components will become inaccessible if the tab control is changed to full screen mode.

  1. From the Containers group, click Tab.

    The pointer changes into a crosshair.

  2. Drag the crosshair in the layout to create the tab control object.
  3. Right-click the tab control and click the Maximize button on the tab control object.

    The tab control displays as a full screen in the layout.

    Note: This setting can be applied only to one tab control in your application. If one tab control is set to full screen mode, the full screen mode item will be unavailable for any additional tab controls.

  4. To resize the tab control, right-click and uncheck the Full screen mode option.


x
Procedure: How to Create a Pop-Up Dialog Box or Pop-Up Window From a Form Control
  1. Add a button object to your HTML page.
  2. Add a form control to your HTML page.
  3. Delete the run and back buttons created with the form control.
  4. While the form control is selected, in the Properties panel, change the Display container as property to either As popup dialog or As popup window.

    As popup dialog causes the form to display as a pop-up dialog box. When the dialog box is displayed, you must click Close to return to your HTML page.

    As popup window causes the form to display as a pop-up window. When the window is displayed, you can resize and move the window around your screen.

  5. Create a new task in the Tasks section of the Tasks and Animations panel that uses the button object to toggle the visibility of the form you created.
  6. Run your HTML page. When you click the button you added to the HTML page, the form will be displayed as either a pop-up dialog box or a pop-up window, depending on what option you selected.

Top of page

x
Objects Group

In this section:

You can add objects other than reports, charts, elements, or containers to customize your HTML page. The Objects group is shown in the following image.

Objects group

The commands in the Objects group are:

Frame

Inserts a frame. You can use a frame to embed additional web sources or run reports. You can also use a frame as the output location or target for a drill-down report. You can also use a frame to run a table of contents report, an OLAP report, a PDF report, an Excel® or a report.

ActiveX

Inserts an ActiveX control.

Flash

Inserts a Flash component. You can add SWF files that are Adobe® Flash Player compatible to accompany reports or graphs on an HTML page.

Note:

  • When inserting Flash animations, only files that are 1 MB or smaller can be run using the HTML canvas.
  • Internet Explorer® 6 does not support the use of Flash content.
Map

Inserts a map. You can add a Google™, Bing®, or ESRI map to your HTML page. Maps are services offering powerful, user-friendly mapping technology that can be customized to show points on a map with drill-down capabilities. You can customize the map properties and bind them to a report or chart.

GIS Flex Viewer

Inserts a GIS Flex Viewer. The GIS Flex Viewer contains numerous controls, a report, and a map object.



x
Using Maps

This topic describes how to integrate maps with reports generated from the HTML canvas. Google, Bing, and ESRI Maps are services offering powerful, user-friendly mapping technology that can be customized to show points on a map with drill-down capabilities. You can customize the map properties and bind them to a WebFOCUS report.

Note: Google and Bing Maps are only available if you have an API license key.

In order to present points on a map generated by a WebFOCUS report, data needs to be in geocode. In other words, data needs to be enriched with geographical data. When binding WebFOCUS to a map, the source used to bind WebFOCUS reports needs to be defined by latitude and longitude coordinates and a marker value associated to a group of data in order for the map to launch properly.



x
Configuring WebFOCUS for Maps

To use Bing or Google Maps in HTML canvas, you must first obtain an API key and then apply that key to the WebFOCUS Administration Console.



x
Procedure: How to Configure WebFOCUS to Use Maps

To integrate WebFOCUS with Maps, set the Google or Bing configuration option in the WebFOCUS Administration Console.

  1. Obtain a Bing Maps or Google Maps API Key.

    Note: You must use a Version 7 API key for Bing Maps and a Version 3 or Version 2 API key for Google Maps.

  2. Access the WebFOCUS Administration Console, using one of the following methods.
    • Enter the following URL:
      http://hostname:port/ibi_apps/welcome.jsp
    • Select WebFOCUS Administration Console from the WebFOCUS Administration Console drop-down menu in the upper-right corner of App Studio.

    The WebFOCUS Administration Console appears. You may have to log on depending on how your configuration is set.

  3. Select General from the Client Settings submenu of the Configuration menu.
  4. Scroll down to the bottom of the Client Settings - General page to see the Google Maps and Bing Maps configuration settings.
  5. In the google_maps_api_key or bing_maps_api_key input field, paste the appropriate map API license key that you saved earlier.

    Note:

    • Google Maps API Version 3 does not require a key.

    • A Version 7 API key is required for Bing maps and a Version 2 API key is required for Google Maps.

  6. Click Save and log off from the WebFOCUS Administration Console.


x
Creating WebFOCUS Procedures for Maps

Before binding maps to a WebFOCUS source, you must predefine marker fields in a source file. The source can be a URL, XML file, or external procedure.

Markers are presented at run time on the map by placing an image at specific geographical points. Clicking on the map marker can result in a drill down to a source file, and optionally, a tooltip can be presented when pausing on a map marker.

Markers are defined by the following:

  • Latitude and Longitude coordinates that are used to plot points, or the marker, on the map.
  • Marker value, usually a calculated value (COMPUTE field or DEFINE field), that associates each location to a group or a specific icon type.
  • Optionally:
    • Fields that contain tooltips or drill downs for the marker.
    • Images to represent the marker on the map.

Marker fields are displayed by an image, drill down, and/or tooltip in the map.

Note: The following procedures are applicable for using Google Maps, Bing Maps, and ESRI JavaScript API Maps.



x
Procedure: How to Create Map Latitude/Longitude Coordinates in the Source File

In order to plot points on the map, you must define each point by its latitude and longitude coordinates and associate a marker, or group assignment, to each point. The Source file must be XML format and must contain fields called LATITUDE, LONGITUDE and MARKER. Additional fields can be included for tooltips or image icon information.

Note: The following example creates a source file for a map by:

  • Using the Century Sales (centurysales.mas) Master file.
  • Joining Century Sales to the Locale data source for latitude/longitude data.
  • Grouping the location to the LINEPRICE field in the joined data source.
  1. 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 App Studio. You may copy these source files to the project directory of your choice.

    1. Create a new procedure in App Studio.
    2. In the Procedure View panel, right-click the procedure name and select Join.

      The Open File dialog box appears.

    3. Select centurysales.mas and click Open.

      The Join canvas opens.

    4. Select the Add button from the Join tab.

      The Open File dialog box appears.

    5. Select locale.mas and click Open.

      App Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join canvas displays both data sources and the default Joins.

    6. Close the Join canvas to save the Join and update the procedure.
  2. Group the location to the LINEPRICE field.
    1. From the Procedure View panel, right-click the Join and select new, then Report.

      The Open File dialog box appears.

    2. Select centurysales.mas and click Open.

      The Report canvas opens.

    3. Double-click LATITUDE and LONGITUDE from the Object Inspector, making both of them a Sort Down field.

      If fields in your source are not called Latitude, Longitude, or Marker, you can:

      • Use the SET canvas to Set ASNAMES = ON, to add AS Names in your procedure.
      • In Report canvas, right-click the field and select Column Title, to type in the correct name.
    4. Select Sum from the Columns canvas bar and double-click LINEPRICE from the Object Inspector.
    5. Rename LINEPRICE to Line Total.

    Each location (Latitude and Longitude) has been grouped to LINEPRICE for the report.

  3. Save the report, but do not close it.

The map Latitude and Longitude coordinates have been set. This source file will be selected as the source file from the HTML canvas later on.



x
Procedure: How to Create Map Marker Group Fields and Tooltip Fields in the Source File

Marker and tooltip fields can be computed fields, or any field from your data source.

Note: If you are using a field from your data source as the Marker field, the field name must be renamed Marker.

A COMPUTE field is a calculated value in the source file that is used as the Marker field in the map. A COMPUTE field uses an expression that can be used to assign a value to a field.

Note: If the HTML page where your map resides is created in the Repository area and the marker images also reside in the Repository area, then a fully qualified path to the image files (starting with /WFC) is needed, if using a DEFINE/COMPUTE to determine the marker image. For example: IMAGE/A75='/WFC/repository/images/cust_'||IMAGE_COLOR||IMAGE_SIZE;

The following example creates marker fields and canvas tips fields by:

  • Using the joined data source, Century Sales (centurysales.mas), that was created in the previous procedure (gmlayer.fex).
  • Adding a COMPUTE field to create markers, or group assignments, for each location by using LINEPRICE to group the data.
  • Adding a second COMPUTE field to associate each group to a marker.
  • Optionally, adding a COMPUTE field as a tooltip field.
  1. Create markers, or group assignments, for each location.

    The Report canvas gmlayer.fex is still open. Create a COMPUTE field to assign an integer value determined by row-based values.

    1. From Data canvas, select Summary (Compute) from the Calculation group.
    2. Type LINEPRICE_CLASS as the Field name.
    3. Add a COMPUTE field to assign an integer based on the LINEPRICE value, as indicated in the following table.

      LINEPRICE

      Integer

      Marker

      0 - 999,999

      2

      redicon

      1,000,000 - 9,999,999

      3

      yellowicon

      10,000,000 - 49,000,000

      1

      greenicon

      50,000,000 or higher

      0

      blueicon

      Enter the syntax to use LINEPRICE to group the data:

      COMPUTE LINEPRICE_CLASS/I5 = IF LINEPRICE GE 50000000
        THEN 0 ELSE IF LINEPRICE GE 10000000
        THEN 1 ELSE IF LINEPRICE LE 1000000
        THEN 2 ELSE 3
    4. Click Apply.
  2. Associate each group to a marker.

    Create a new COMPUTE field that sets the Marker field with a DECODE statement to convert the numerical grouping into icon names.

    Note: A Marker field can also be any value field from your data source, but must be renamed Marker.

    1. Click New while in the Computed Field Creator dialog box.
    2. Type MARKER as the Field name.
    3. Enter the syntax to associate each group to a marker:
      COMPUTE MARKER/A10 = DECODE LINEPRICE_CLASS( 0 'blueicon' 1 'greenicon' 2 'redicon' ELSE 'yellowicon') ;
    4. Click Apply.
  3. Assign fields as tooltips.

    Optionally, if you want to include a tooltip, create an additional COMPUTE field to assign fields as tooltips.

    Note: A tooltip field can also be any value field from your data source.

    1. Click New from the Computed Field Creator dialog box.
    2. Type REVENUE_RANGE as the Field name.
    3. Enter the syntax to include a tooltip:
      COMPUTE REVENUE_RANGE/A10 = DECODE LINEPRICE_CLASS( 0 'OVER 50M' 1 '10M to 50M' 2 'UNDER 1M' ELSE '1M TO 10M') ;
    4. Click Apply.

      The fields are added to the Computed fields folder in the Object Inspector and are automatically added to the report as LINEPRICE_CLASS, MARKER, and REVENUE_RANGE.

  4. On the Format tab, in the Output Types group, click the Output Format command and select Standard XML (XML) from the Unstyled formats list.
  5. On the Format tab, in the Output Types group, click Destination. The Output Destination dialog box opens.
  6. Select Web browser from the Destination drop-down list, then click OK to close the Output Destination dialog box.
  7. Save and close your report.


x
Procedure: How to Create the Starting Center Point of the Map

In addition to creating the Latitude or Longitude coordinates and associating markers, you must set the center view of the map to a bound geographical point at run time. Center values can be set dynamically or by a constant value.

Note: The following example creates a report that sets the starting point of your map by:

  • Joining the Century Sales to the Locale data source for the latitude/longitude data.
  • Creating the CITY value Where clause and retrieval limit in the report.
  1. 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 App Studio. You may copy these source files to the project directory of your choice.

    1. Create a new procedure in App Studio.
    2. In the Procedure View panel, right-click the procedure name and select Join.

      The Open File dialog box appears.

    3. Select centurysales.mas and click Open.

      The Join canvas opens.

    4. Select the Add button from the Join tab.

      The Open File dialog box appears.

    5. Select locale.mas and click Open.

      App Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join canvas displays both data sources and the default Joins.

    6. Close the Join canvas to save the Join and update the procedure.
  2. Create the CITY value where clause in the report.
    1. From the Procedure View panel, right-click the Join and select new, then Report.

      The Open File dialog box appears.

    2. Select centurysales.mas and click Open.
    3. Double-click LATITUDE and LONGITUDE from the Object Inspector and make sure both are a Sort Down field type.
    4. Create a Where statement.

      The Expression Builder opens.

    5. Create the following expression:
      CITY EQ 'Nashville'
    6. Click Apply.
    7. Select Filter and click Retrieval Limits.
    8. Enter 1 as the Record Limit.
    9. On the Format tab, in the Output Types group, click the Output Format command and select Standard XML (XML) from the Unstyled formats list.
    10. On the Format tab, in the Output Types group, click Destination.
    11. Select Web browser from the Destination drop-down list, then click OK to close the Output Destination dialog box.
  3. Save and close the report.

    In this example, Nashville is set as the center value starting point for your report.



x
Adding a Map

Once you have configured the map controls and created a WebFOCUS procedure to get a center value, you may add a map through the Insert menu of the HTML canvas.



x
Procedure: How to Insert Maps in the HTML Canvas
  1. Create the HTML canvas Page that contains the map.
    1. Create a new HTML page.
  2. Select which map you want to use by selecting either Google map, Bing map, or ESRI map from the Map type option in the Property panel.

    Note: When ESRI map is selected for the map type, the ArcGIS Server option is added to the Property panel of the HTML page. A server must be specified or the map will not load without it.

  3. On the Components tab, in the Objects group, click Map.

    The pointer changes into a crosshair.

  4. Drag the crosshair to create the map object and adjust it to the size you want.

    The Settings panel opens, from which you can set the map and layers properties.

    The map control also has a set of properties for the object.

The map appears as an image in the HTML canvas.

Note: Once a map has successfully been inserted into the HTML page, the COORDINATES field becomes available for use by any other components further in the chain.



x
Customizing the Map Properties

You may customize the map by using the Settings panel and the Properties panel.



x
Reference: Settings Panel for Maps

The Settings Panel for a map object contains many options for controlling how a map behaves and what information it displays.

Center Location

Sets the center view of the map to a bound geographical point at run time. The center location can be set dynamically or by a constant value.

  • Dynamic. If these values are being retrieved from an external source, the source must contain two fields called LATITUDE and LONGITUDE, or if using an Address, a field called ADDRESS.

    Select a Source Type and a Source. This binds a Source file that contains coordinates to set the center view of the map.

    An external file should only return one Latitude and Longitude value for the center point.

    You can use the ASNAME command to rename an existing field to the required names.

  • Constant value. Manually type in a center value.
Location Type

Geographical position can be defined by Latitude or Longitude, or by an address.

The default is Latitude or Longitude.

Note: A Center Location, using address as the Location Type, is not supported when using an ESRI JavaScript map.

Source Type

When using a Dynamic center value, select the source of your location data. Source Type options are URL, XML File, and External procedure.

If using an External procedure, the report output must be XML.

Source

When using a Dynamic center value, enter the source file for the source type.

The Source field provides an ellipsis button when using XML File and External procedures. Select the source file from the Open File dialog box.

Value

When using a constant value, enter the Address or Latitude and Longitude value.

If entering a Latitude or Longitude value, the value entered should be Latitude and then Longitude, separated with a comma (and/or space).

If entering a Latitude and Longitude value, it must be defined as a numeric value. For example, the following is latitude and longitude for New York, NY 10001:

40 45’ 58.73” N, 73 59” 1.48” W and converts to 40.7663277, -73.9920777.

An example of an Address value is: 2 Penn Plaza New York, NY 10001.

Layers Settings

Layers bind sources to the map in order to define map markers. Markers are presented at run time in the map, as indicated with images at specified geographical points. Clicking the map marker results in a drill down to a Source file and optionally, a tooltip when pausing on a map marker.

Select a Source Type, Source and Marker. Each Layer row will yield a designated marker in the Marker Groups box. Optionally, a selected marker can be associated with an Image, Drill Down, and tooltip.

Layers

You can rename the layers by typing in the Layers box. This name should be a unique name that is used to identify a layer in the layer control and in JavaScript calls.

Note: A default name of Layer1, Layer2, and so on, is applied when you click the Add New button. You may double-click in the field and manually type a unique name.

Source Type

Select the source of your layer. Source Type options are URL, XML File, and External procedure.

If using an External procedure, the report output must be XML.

Source Name

Enter the source file for the source type.

Note: The Source field provides an ellipsis button which enables you to select the source file from the Open File dialog box.

When the source is selected, the Marker Groups box is populated with the values from the field MARKER in the WebFOCUS procedure.

Cache run time data

When adding dynamic parameters to the HTML page, input controls retrieve data through procedures. Select this option to cache the run-time data for the selected input control. This setting is off by default. This setting overrides the Default caching option from the HTML Page tab, which is located in the App Studio Options dialog box.

Visible

Controls the initial visibility of the marker groups, from the layer control, when the map runs. The visible option is useful when you want to make selections on the map without other markers, from other layers, interfering. For example, when making selections and doing a drill down, only visible markers should be selected and passed along.

  • True shows the marker groups when the map runs. This is the default visible setting.
  • False hides the marker groups when the map runs.
Refresh (Seconds)

You can refresh the source for a layer when the map runs. You may refresh a layer on demand, or automatically at a timed interval. The default refresh time is set to 0 seconds, which indicates that the automatic refresh is disabled. The minimum automatic refresh time is 60 seconds.

Refresh is not applicable to markers in the Marker Groups.

Marker Groups

The Marker Group box lists all unique markers defined in the source of the highlighted source row. When the source is selected, the Marker Groups box changes, listing all markers in the selected Layer. Optionally, a selected marker can be associated with an Image, Drill Down, and tooltip.

The possible values for markers are generated by previously defined fields in the Layer source.

Image/tooltip

Select the Image and/or tooltip to be associated for the selected marker.

  • Select an image to be used to mark a point on the map at run time.
  • When hovering over a map marker, a tooltip containing a description of the selected map marker appears.
  • If you do not specify marker images, the default marker image (a green pin) is used.
Source Type
  • Images can be an image or a field.
  • tooltips can be a constant value or a field.
Source

Enter the source field, or constant value, for the source type.

When the Source Type is Image, the Source field provides an ellipsis button which enables you to select the image file from the Open File dialog box.



x
Reference: Properties Panel for Maps
Map: Bullseye Inner Ring

The inner ring radius is the distance between the center of the bullseye chart to the first ring, where 10 miles is the radius of distance.

Map: Bullseye Outer Ring

The outer ring radius is the distance from the center of the bullseye chart, where 100 miles is the radius of distance.

Map: Bullseye Rings

The number of rings to draw for the bullseye chart, where three rings is the default number of rings.

When you set the number of rings, the inner radius, and the outer radius, any rings between the innermost and the outermost ring, are proportionally separated.

Map: Default Type

Sets the default map rendered at run time. Select from Map/Road, Satellite/Bird’s Eye, or Hybrid/Automatic. Each option is presented as part of the map in the output, allowing you to change views.

  • Map/Road. Presents geographical borders and streets. This is the default map type.
  • Satellite/Bird’s Eye. Presents real imagery.
  • Hybrid/Automatic. Presents real imagery with borders and streets.

Note: Map, Satellite, and Hybrid are used for Google Maps while Road, Bird’s Eye, and Automatic are the equivalent for Bing Maps.

Map: dragging

Controls the ability to drag the map in order to reposition the center point to a new location. This option is set by default.

Note: This option cannot be disabled for Bing or ESRI maps. Selecting No from the drop-down list will not disable dragging.

Map: Menu Layers

The Layers menu control provides options to show or hide markers in the layers of the map, and manually refresh the layer(s).

Map: Menu Polygon

The New Polygon menu control provides options to select multiple markers on maps by creating shape selectors, such as a freehand polygon, rectangle, or bullseye chart.

You can select multiple markers on maps at run time by creating polygon shapes. Polygon features enable you to add both tooltips and actions to all polygons when you pause on them in the map.

Map: Menu Run

The Run menu control runs the drill downs for the selected markers.

Map: Polygon Action Copy

Enables copying of a polygon.

Map: Polygon Action Delete

Enables deleting of a polygon.

Map: Polygon Action Move

Enables moving of a polygon.

Map: Polygon Action Resize

Enables resizing of a polygon.

Map: Polygon tooltip Area

tooltips appear when you pause on a shape selector in the map.

All tooltip options are turned on by default.

Shows the Area tooltip.

Map: Polygon tooltip Dimensions

Shows the Dimensions tooltip.

Dimensions appears as Radius (for a circle polygon shape) in the tooltip.

Map: Polygon tooltip Markers Count

Shows the Markers Count tooltip.

Map: Selected Marker Image

Sets the icon or image associated with a marker when selected. Click the Selected Marker Image ellipsis button to open the Open File dialog box and select a marker image. If you do not specify a selected marker image, the default selected marker image (a red bulb) is used.

Map: Units

Options for the location distance are miles (mi) or kilometers (km), where miles is the default unit selection.

Map: Zoom Continuous

Enables smooth, continuous zooming for select browsers.

Map: Zoom Double Click

Enables you to double-click to zoom in and out of the map.

Note: This option cannot be disabled for Bing maps. Selecting No from the drop-down list will not disable zooming when double-clicking.

Map: Zoom Level

Sets the default zoom level of the map at run time. The levels available are 0 through 18. If the zoom level is set to 8 or higher, the initial map will have only one point visible. The default value is 10.

You may also change the zoom level in the output with the scrolling and arrow buttons on the map.

Map: Zoom Scroll Wheel

Enables you to use the scroll wheel of your mouse to zoom in and out of the map.

Note: This option cannot be disabled for Bing maps. Selecting No from the drop-down list will not disable zooming using the scroll wheel.



x
Procedure: How to Customize a Map

Customize the map by selecting the map and layer options.

  1. From the Settings panel, select the starting center point for the map in the Center Location section.
    • If you are using a Dynamic value, select the Location Type, Source Type and a Source.

      Source Type options are URL, XML File, and External procedure. If you are using an External procedure, the report output must be XML.

      For example, select Dynamic, Latitude/Longitude from the Location Type drop-down list, and External procedure from the Source Type drop-down list. Click the Source ellipsis button to open the Open File dialog box and double-click setcentervalue.fex as the external XML file.

    • If you are using a Constant value, select the Location Type and enter the Value.

      An example of an Address value is: 2 Penn Plaza New York, NY 10001.

      If entering a Latitude and Longitude value, it must be defined as a numeric value. For example, the following is latitude and longitude for New York, NY 10001: 40 45’ 58.73” N, 73 59” 1.48” W and converts to 40.7663277, -73.9920777.

  2. To set the image for a selected marker at run time, in the Map: Selected Marker Image section of the Properties panel, click the Source ellipsis button to open the Open File dialog box, and select a marker image.

    For example, click the Source ellipsis button to open the Open File dialog box and double-click purplepin.png as the marker image file.

  3. In the Properties panel, while your map is selected, change the Zoom level to 6 and keep the other Default Map Type options.
  4. From the Request section of the Settings panel, select a request to one or more WebFOCUS procedures to load data into the map by selecting the Source Type and Source Name. Optionally, you may edit the name of the layer or the Visible and Refresh options for the source layer.

    For example, click the Add new button to create a layer. Click the Request drop-down to select a request used to populate this layer. A request is created in the Tasks & Animations panel.

    When the source is selected, the Marker Groups box is populated with the values from the Field MARKERS in the WebFOCUS procedure.

  5. Double-click a group from the Marker Groups box to set the associated Image, tooltip, and Drill Downs.
  6. You may edit the Image, tooltip, or Drill Down for each marker group selected.

    Each marker group can have its own image and tooltip.

    For example, select greenicon from the Marker Groups box. Double-click greenpin.png from the Image Source section. The marker image is automatically saved. Repeat this process to apply individual images to each of the marker groups.

    Tip: To select multiple marker groups at one time:

    • Press and hold the Shift key while selecting the marker groups from the Marker Groups box.
    • Edit the tooltip and drill-down options to apply the selections to all of the marker groups selected.

    For example, apply the tooltip to all of the marker groups by selecting Field as the Source Type and REVENUE_RANGE as the Source.

  7. Select the map object from the HTML canvas and set the size and position in the Properties panel:
    • Position: Left 30 px.
    • Position: Top 30 px.
    • Size: Height 260 px.
    • Size: Width 640 px.
  8. Save and run the report.

    You may use map controls to navigate around the map, zoom in or out, drag the map to a new position, select different map types, and see marker groups. For example, click the minus icon on the map to zoom out and see all of the colored marker groups.

    Note: The Zoom In and Zoom Out slider control appears on the map since the Size: Height property is greater than 280px.

    For more information about using map controls, see the documentation from the website of each respective map.



x
Integrating WebFOCUS With Maps

You can integrate WebFOCUS reports with maps by:

  • Customizing map properties and binding them to a WebFOCUS report, enabling drill-down reports to be run from a map.
  • Updating map views based on values selected in a WebFOCUS report.

Latitude and longitude values can be passed as a parameter from a map to update a WebFOCUS procedure. Latitude and longitude are sent as a pair of values, and the HTML canvas uses a specific parameter, &COORDINATES, to parse the value pairs correctly.



x
Procedure: How to Update a WebFOCUS Report Based on a Map Location

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

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

  • Joining Century Sales to the Locale data source.
  • Creating a Revenue by Category report.
  • Creating the &COORDINATES parameter in the report.
  • Adding the report to the HTML canvas.
  • Changing the map properties to drill down to the embedded procedure.
  1. From the HTML canvas with a map and report created, use the shortcut menu for the report and click New Report.

    The Procedure View panel opens and the Open File dialog box opens.

  2. Cancel the Open File dialog box.
  3. 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 App Studio. You may copy these source files to the project directory of your choice.

    1. Create a new procedure in App Studio.
    2. In the Procedure View panel, right-click the procedure name and select Join.

      The Open File dialog box appears.

    3. Select centurysales.mas and click Open.

      The Join canvas opens.

    4. Select the Add button from the Join tab.

      The Open File dialog box appears.

    5. Select locale.mas and click Open.

      App Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join canvas displays both data sources and the default Joins.

    6. Close the Join canvas to save the Join and update the procedure.
  4. Create a Revenue by Category report.
    1. From the Procedure View panel, create a report after your Join.

      The Open File dialog box appears.

    2. Select centurysales.mas and click Open.

      The Report canvas opens.

    3. Double-click CITY, PRODUCTTYPE, REGION, STATE, and STORENAME from the Object Inspector and make sure they are the Sort Down field type.
    4. Click the mouse after the STORENAME field to add the next field.
    5. Double-click LINEPRICE from the Object Inspector and make sure it is an Aggregate.
    6. Rename the PRODUCTTYPE and LINEPRICE fields:
      • Select PRODUCTTYPE, right-click and select Column Title from the shortcut menu. Type Category in the Title dialog box and click OK.
      • Select LINEPRICE, right-click and select Column Title from the shortcut menu. Type Revenue in the Title dialog box and click OK.
    7. Type Revenue by Category in the Page Heading.
  5. Create the &COORDINATES parameter.
    1. In the Object Inspector, expand the Variables folder, right-click on Report Variables and select the New Report Variable option.

      The Variable Editor opens.

    2. Enter COORDINATES in the Name box and click OK to exit the Variable Editor.
    3. Select Where from the Filter command.

      The Expression Builder opens.

    4. In the Data pane, navigate to the Report Variables folder and drag &COORDINATES to the Criteria (WHERE) pane.
    5. Click OK.
  6. Add the report to the HTML canvas.
    1. The report and &COORDINATES parameter have been created, save and close the report.

      You are returned to the HTML canvas where the New Parameters dialog box appears.

    2. Clear the Create control check box for the parameter, and click OK.

      You will not need a control for the &COORDINATES parameter because the parameters will be passed by the map.

      The Revenue by Category report appears in the HTML canvas.

    3. Select the report object to view the associated properties in the Properties panel.
    4. Select False from the Auto Execute drop-down list in the Properties panel.
  7. Change the map properties to drill down to an embedded procedure.
    1. Select the Settings panel.
    2. Click the mouse and hold the Shift key and select all marker groups.
    3. From the Drill Down section, select:
      • Existing request as the Drill Down Action.
      • report1 from the Source drop-down list.
  8. Select the Parameters tab.
  9. Bind the map control to the &COORDINATES parameter.
  10. Save and run the layout.

Click the markers on the map to update the report based on the location selected.



x
Using the Maps Functionality

This section describes how to use maps with the custom functionality provided by Information Builders. You can select multiple markers on maps at run time and drill down to WebFOCUS procedures filtered by the marker locations selected.

Note: For Google and Bing maps, the functions in this section can be accessed by right-clicking on a map during run time. To access the same functions for ESRI JavaScript API maps, you must click on the canvass button at the top of the map during run time.

There are several ways of selecting markers, such as:

  • Manual Selection.
  • Shape Selection.
  • Combination Selection.

Note: Selected markers are indicated by the Selected Marker Image that you supply on the map Properties panel.



x
Procedure: How to Use Manual Selection in a Map

Manual selection is the act of clicking on one or more individual markers in succession.

  1. To initiate a manual selection, click on a marker while pressing and holding the Ctrl key from your keyboard.
  2. To clear a selected marker, press and hold the Ctrl key and click the marker again.
  3. To make selections without the risk of clearing a marker, press and hold the Shift key rather than the Ctrl Key.

    Note: The Shift key does not clear the selected markers.

When the green and blue markers are selected, they become purple markers.



x
Procedure: How to Use Shape Selection in a Map

Shape selection is the act of clicking in a specific location on the map and then drawing an area with the mouse on the map to form a shape. This shape enables you to select all markers within the drawn area. The map provides various selector shapes to choose from.

Tip: The shape selection options are available from the right-click shortcut menu on Google and Bing maps and through the canvass menu for ESRI JavaScript API maps. You may also customize these options from the map Properties panel.

  1. To initiate a shape selection, right-click anywhere on the map or click the canvass button if you are using an ESRI JavaScript API map.

    The canvass menu appears.

    You may create a new polygon shape, change the polygon settings, show or hide markers from a layer, and refresh a layer.

  2. To create a shape selection, select an option from the New Polygon menu, drag your mouse from the shape selection point on the map.

    Note: The method by which selections are made depends on the selector shape used.

    The shape selector is created with the selected markers, and a tooltip indicating the details of the shape selector.

  3. To clear the markers in the shape selection, unselect Select Markers from the Update Polygon menu.

    Note: Selecting Clear Selection clears all of the selected markers from the map.

  4. To remove the shape selection from the map, select Remove from the Update Polygon menu.

    Note: Selecting Remove Polygons removes all the shape selectors from the map.

  5. Optionally, to reposition any of the selector shapes to a different location on the map:
    • Pause the mouse over the center of the selector shape to be repositioned.
    • Drag from the middle of the shape to the new location.

    The selector shape is repositioned over the new location.



x
Procedure: How to Use Combination Selection in Maps

Combination selection is the act of using both the manual selection method and the shape selection method separately, or in coordination with one another, to make marker selections. Multiple selections can be made by using any of the above procedures prior to drilling down to WebFOCUS procedures.



x
Procedure: How to Show and Hide Markers in Maps

All layer marker groups are visible in a map by default. You may edit the visibility option to hide the markers in a map at run time.

  1. To edit the visibility option from the map output:
    • Right-click anywhere on the map if you are using a Google or Bing map or click the canvass button for ESRI JavaScript API maps.

      The menu appears.

    • Select the layer name from the Layer menu.

      Note: The layer name is the unique name for the layer created in the Map Properties dialog box.

    • From the unique name layer menu, you may select the markers to hide from the selected layer.

    The selected markers are not visible on the map.

    Tip: To show all marker groups from all layers on the map, select Show All from the Layers menu.

  2. To edit the visibility option from the Settings panel:
    • From the HTML canvas with a map created, go to the Settings panel.
    • Clear the Visible option.

    Note: Only layers have a visibility option on the Settings panel. You may hide individual markers from a layer in the map output, as described in the first step of this procedure.

    When you run the map, all of the layer markers are not visible.



x
Procedure: How to Refresh the Map Output

You may refresh the map output on demand or by setting up an automatic refresh at a timed interval.

  1. To refresh a map on demand:
    • From the map output, right-click anywhere on the map or click the canvass button if you are using an ESRI JavaScript API map.

      The menu appears.

    • To refresh all layers on the map, select Refresh All from the Layers menu.
    • To refresh individual layers on a map, select Refresh Layer from the layer name of the Layer menu.

    Note: The layer name is the unique name for the layer created in the Map Properties dialog box.

  2. To automatically refresh the map output at a timed interval:
    • From the HTML canvas with a map created, go to the Settings panel.
    • Select the refresh time, in seconds, by using the Refresh (Seconds) option.

      Note: The default refresh time is set to 0 seconds, which indicates that the automatic refresh is disabled. The minimum automatic refresh time is 60 seconds.

    • Close the Settings panel.

    Refresh is not applicable to markers in the Marker Groups.

    The source for the layer refreshes on the map at the set timed interval.



x
Procedure: How to Create Polygons in the Map Output

The available shape selections from the New Polygon menu are Freehand, N-sided Polygon, Rectangle, Bullseye Fixed, and Bullseye Freehand.

Note: Polygons created when using ESRI maps are unable to be moved, copied, or resized.

  1. Create a freehand polygon.

    A freehand polygon shows the selector shape as a series of lines that you mark at specific points on the map.

    • For Google and Bing maps, right-click anywhere on the map and select Freehand from the New Polygon menu. For ESRI JavaScript API maps, click the canvass button and select Freehand from the New Polygon menu.

      A cross is indicated on the map.

    • Left-click to indicate the starting point and create the crosshair on the map.
    • Drag and release to drag a line from one point to the next. Repeat left-click, drag, and release. These clicks will represent the corners of the shape to be drawn.
    • When you close the connector lines, the selected markers are indicated within the polygon shape.

      Note: You can also use the Freehand Close option to close the polygon. The Freehand Close option is found in the New Polygon menu. This option is unavailable unless you are using the Freehand option. The Freehand Close options is best used on an iPad device.

  2. Create an N-sided polygon.

    An N-sided polygon shows the selector shape as a continuous line you draw around the markers to be selected. N-sided indicates that you can select the number of sides for the polygon.

    Note: The default polygon is a circle.

    • For Google and Bing maps, right-click anywhere on the map and select N-sided Polygon from the New Polygon menu. For ESRI JavaScript API maps, click the canvass button and select N-sided Polygon from the New Polygon menu.

      A cross is indicated on the map.

    • Left-click to indicate the starting point and create the crosshair on the map.
    • Drag the crosshair to a different point on the map and around the markers to be selected.
    • Left-click to close the polygon. The selected markers are indicated within the polygon shape.

    To change the number of sides for the polygon:

    • Select Number of Sides from the Polygon Settings menu.

      Note: The default polygon is a 12-sided polygon. You may change the number of sides for a polygon by using the Polygon Settings menu on the map.

    • Select the number of sides you wish to create. Options are 6 sided, 8 sided, 12 sided, 16 sided, or Circle (this is the default).

      Optionally, you may select to Show tooltips for the polygons on the map.

    • Select N-sided Polygon from the New Polygon menu and drag the object on the map.

      The polygon shape has the number of sides that you indicated from the Polygon Settings.

  3. Create a rectangle.
    • For Google and Bing maps, right-click anywhere on the map and select Rectangle from the New Polygon menu. For ESRI JavaScript API maps, click the canvass button and then select Rectangle from the New Polygon menu.

      A cross is indicated on the map.

    • Left-click to indicate the starting point and create the crosshair on the map.
    • Drag the crosshair to a different point on the map and around the markers to be selected.
    • Left-click to close the polygon. The selected markers are indicated within the rectangle shape.


x
Procedure: How to Create Bullseye Charts in the Map Output

You may create a fixed or freehand bullseye chart in the map output. A bullseye chart is used to show radius distance from a location using three rings of increasing size. The bullseye options are available from the New Polygon shortcut menu on the map.

Note: You may customize the ring and radius options of the bullseye chart from the Map Properties dialog box.

  1. Create a fixed bullseye chart.

    A fixed bullseye chart applies a predetermined size at the selected location.

    • For Google and Bing maps, right-click anywhere on the map and select Bullseye: Fixed from the New Polygon menu. For ESRI JavaScript API maps, click the canvass button and select Bullseye: Fixed from the New Polygon menu.

      A cross is indicated on the map.

    • Left-click to insert the fixed bullseye chart in the map.

      The bullseye chart is inserted in the selected location with a randomly generated color.

    • Optionally, you may drag the bullseye to another point on the map. The selected markers and tooltip for the bullseye chart are indicated.
  2. Create a freehand bullseye chart.

    A freehand bullseye chart enables you to create the size and location of the initial bullseye chart.

    • For Google and Bing maps, right-click anywhere on the map and select Bullseye: Freehand from the New Polygon menu. For ESRI JavaScript API maps, click the canvass button and select Bullseye: Freehand from the New Polygon menu.

      A cross is indicated on the map.

    • Left-click to insert the freehand bullseye chart in the map.
    • Drag the bullseye chart to the desired size and release the mouse.

      The bullseye chart is inserted in the selected location with a randomly generated color.

    • Optionally, you may drag the bullseye to another point on the map. The selected markers, and tooltip for the bullseye chart are indicated.
  3. Resize the bullseye chart.
    • Select the bullseye chart. Right-click if you are using a Google or Bing map, and choose Resize from the Update Polygon menu. For ESRI JavaScript API maps, click the canvass button and choose Resize from the Update Polygon menu.

      A white box appears in the center of the bullseye and on the outer ring.

    • Drag the box to the desired location.
    • Release the mouse to resize the bullseye.

    Optionally, you may select Freehand Resize to manually resize the bullseye chart.



x
Reference: Clearing and Removing Shape Selectors on Maps
  • To show or clear selected markers within an individual shape selector, select the shape selector, then right-click and choose Select Markers from the Update Polygon menu.
  • To remove individual shape selectors from map, select the shape selector, then right-click and choose Remove from the Update Polygon menu.
  • To clear all selected markers on the map, right-click anywhere on the map and select Clear Selection from the shortcut menu.

    The polygon shapes will remain on the map when the markers are cleared.

  • To remove all shape selectors from the map, right-click anywhere on the map and select Remove Polygons from the shortcut menu.

    The polygon shapes are removed from the map but the markers remain selected.



x
Reference: Running Maps Against a Secured Server

Whenever maps are run against a secured server (SSL configuration), the user is prompted with a message for display of secured and unsecured content on the HTML page. This message originates from map provider and is shown because they establish a link to an unsecured server to present the map.



x
Reference: Enabling Actions for Shape Selectors on Maps

When actions are enabled from the map Properties panel, you may Copy, Delete, Move, and Resize the polygon shape selectors on the map.

All action options are selected by default.

  • To copy a shape selector, left-click in the center of the polygon, press the Shift key, drag the polygon and release it to create a copy of the polygon.
  • To delete the shape selector, left-click in the center of the polygon, and press the Delete key.
  • To move the shape selector, left-click and hold in the center of the polygon and drag the polygon to move it.
  • To resize the shape selector, drag the edge of the polygon shape to resize the polygon.


x
Chaining for Maps

When chaining maps with other controls in the HTML canvas, you are able to pass fields that are not displayed by the map. These fields can be passed from one control to the map and then from the map to another control, where those undisplayed fields will then be used.



Example: Map Chaining

The following example shows how a map can be chained with other controls and how it can pass fields through the map for use later in the chain. For this example, the centurystores Master File was used.

This example contains an HTML page that has two listboxes and one map control.

The Parameters tab view shows that these controls are chained together.

Listbox1 is populated with a list of store names from the centurystores Master File. When one of the stores on the list is selected, the store location is shown on the map.

When the store marker image is selected on the map, the store address is displayed in listbox2.

Listbox1 passes the necessary fields to mapcontrol1 so that it can display the store location on the map. In this case, it passes the STORENAME field.

The layer procedures include BY STORENAME to filter the layer to show only the markers for the selected store in listbox1. The layer procedures also include a BY STOREID reference, which the map does not display, but is used in listbox2 to retrieve the correct store address for the selected map marker.

Mapcontrol1 does not use this field. However, when the store marker is selected on the map, the STOREID field is passed from mapcontrol1 to listbox2.

STOREID is passed to listbox2 where it is used to filter out the store address from the selected marker.

Maps can pass fields that they do not display. They can then pass those unused fields to another control, down the chain, which can use the passed fields.



x
Using JavaScript Code With Maps



x
Function: toggleLayer('mapId', 'layerName')

The toggleLayer(‘mapId’, ‘layerName’) function toggles the visibility of the specified layer.



x
Syntax: How to Toggle Layer Visibility
function button1_onclick(ctrl) {
toggleLayer('mapId', 'layerName');
}

where:

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

layerName

Alphanumeric

Is the unique identifier of a layer within the map. For example, Layer1.



x
Function: toggleMarker('mapId', 'layerName', 'markerName')

The toggleLayer(‘mapId’, ‘layerName’, ‘markerName’) function toggles the visibility of the specified marker.



x
Syntax: How to Toggle Marker Visibility
function button2_onclick(ctrl) {
toggleLayer('mapId', 'layerName', 'markerName');
}

where:

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

layerName

Alphanumeric

Is the unique identifier of a layer within the map. For example, Layer1.

markerName

Alphanumeric

Is the unique identifier of a marker within the map. For example, redpin.



x
Function: refreshLayer('mapId', 'layerName')

The refreshLayer(‘mapId’, ‘layerName’) function refreshes the specified layer.



x
Syntax: How to Refresh a Layer
function button3_onclick(ctrl) {
refreshLayer('mapId', 'layerName');
}

where:

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

layerName

Alphanumeric

Is the unique identifier of a layer within the map. For example, Layer1.



x
Function: panToAddress('address', 'mapId', 'zoom')

The panToAddress(‘address’, ‘mapId’, ‘zoom’) function pans to a designated address.



x
Syntax: How to Pan to an Address
function button4_onclick(ctrl) {
panToAddress('address', 'mapId', 'zoom');
}

where:

address

Alphanumeric

Is the address you want to pan to. For example, 2 Penn Plaza New York NY 10001.

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

zoom

Integer

Is how much you wish to zoom. For example, 7.



x
Function: panToPoint('lat', 'long', 'mapId', 'zoom')

The panToPoint(‘lat’, ‘long’, ‘mapId’, ‘zoom’) function pans to a designated point based on latitude and longitude coordinates the user enters.



x
Syntax: How to Pan to a Point
function button5_onclick(ctrl) {
panToPoint('lat', 'long', 'mapId', 'zoom');
}

where:

lat

Integer

Is the latitude coordinate of the point you want to pan to. For example, 40.7663277.

long

Integer

Is the longitude coordinate of the point you want to pan to. For example, -73.9920777.

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

zoom

Integer

Is how much you wish to zoom . For example, 7.



x
Function: showAllMarkers('mapId')

The showAllMarkers(‘mapId’) function displays all map markers, even if previously hidden.



x
Syntax: How to Show All Map Markers
function button6_onclick(ctrl) {
panToAddress('mapId');
}

where:

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.



x
Function: drawBullseye('mapId', 'lat', 'long', 'selectmarkers', 'units', 'rings', '(list-of-sizes)', '(list-of-colors)')

The drawBullseye('mapId', 'lat', 'long', 'selectmarkers', 'units', 'rings', '(list-of-sizes)', '(list-of-colors)') function draws a bullseye at a point on the map. This function has optional parameters to select whether to display markers, the units of measure used for the bullseye, the number of rings, the size of the rings, and the color of the rings.



x
Syntax: How to Draw a Bullseye
function button5_onclick(ctrl) {
drawBullseye('mapId', 'lat', 'long', 'selectmarkers', 'units', 'rings', '(list-of-sizes)', '(list-of-colors)');
}

where:

mapId

Alphanumeric

Is the unique identifier of the map control. For example, mapcontrol1.

lat

Integer

Is the latitude coordinate of the point you want to pan to. For example, 40.7663277.

long

Integer

Is the longitude coordinate of the point you want to pan to. For example, -73.9920777.

selectmarkers

Boolean

Is an operator that, when set to true, selects all markers within the Bullseye.

units

Alphanumeric

The unit of measure for the Bullseye rings For example, mi for miles.

rings

Integer

The number of rings the bullseye uses. For example, 3.

list-of-sizes

Integer

A comma separated list of sizes for the bullseye rings. For example, 1, 3, 5.

list-of-colors

Alphanumeric

A comma separated list of colors for the bullseye rings. The colors can be RGB values or hexadecimal values. For example, Blue or #FFFF.



x
ESRI Flex Viewer Integration

The ESRI Flex Viewer creates a component that adds numerous controls, a report, and a map object when used.

The ESRI Flex Viewer component can be accessed from the Insert menu, by selecting Components and clicking ESRI Components. You can then drag the crosshair to the desired size for the ESRI Flex Viewer controls and report. The ESRI Flex Viewer component will contain a number of controls, a report, and a map object. It is recommended that the ESRI Flex Viewer component be drawn big enough to accommodate all of these items.

You will then choose the esriinfo XML file to use with the ESRI Flex Viewer component.

Note: The following line must be present in your esriinfo XML file for you to pass parameters from the controls to the map object and from the map object to the report.

<callback identify="parmcollect" map="IBI_GetLayoutPainterParameters" report="IBI_GetLayoutPainterParameters"/>

The New Parameter dialog box will open and you will be able to change the options for the parameters contained within the ESRI Flex Viewer component.

The ESRI Flex Viewer component will then be inserted into the HTML page.

Note: Controls and reports within the ESRI Flex Viewer can be chained. Maps within the ESRI Flex Viewer component cannot be chained.


WebFOCUS