x

There is no limit to the number of keys you may obtain under a single Google Account. It is recommend that you register your domain name. Your key will be valid for that domain, its subdomains, all URLs on hosts in those domains, and all ports on those hosts. Make sure it is registered for the domain from which the SWF is being served, not for the domain on which the SWF is embedded.

Note: You must have a Google Account to get a license key. If you do not have an account, create one from http://www.google.com.

1. Log into your Google Account.
2. Access the following site from your browser: http://code.google.com/apis/maps/signup.html
3. The Sign Up for the Google Maps API page appears.
4. Read the Google Maps API Terms of Use and select the check box to agree with the terms and conditions.
5. Enter your base URL in the My web site URL: input field.

   http://machine_name.ibi.com

   This will work for any URL that starts with machine_name.ibi.com even if the Flex application with the Google Maps will be running under a different port number, for example machine_name.ibi.com:8080.

   Note: Do not use localhost.

6. Click Generate API Key.

   

   The Google Map API License key is generated.

7. Copy the license key and save it to a text file.

x

1. In Components pane inside Flex Builder, expand the WebFOCUSEnable Maps folder.
2. Drag and drop an ibiMap001 component into your Flex application.

   Note: ibiCanvas is always required in order to use WebFOCUS Enable components in your Flex application.

   You will see gray box with a message indicating there is no Google Maps API Key assigned to the map.

   

3. With the ibiMap001 component selected, go to the Properties pane and expand the IBI Maps category. Locate the apiKey property and paste your Google Maps API Key there.

   

4. With the application in Design View, click the Refresh button.

   

   You should now see the Google Maps in your application.

   

   Note: The Debug Mode watermark may appear on the map because while you are developing on a local drive (file://), the Google Maps API Key check is skipped. Once you compile the application and run the SWF file that is Adobe Flash Player compatible under the application or web server where your API Key is registered, the map will run without the Debug Mode message. You may need to register a separate key for your development server machine name while developing the application.

x

In order to plot points on the Google Map, you must define each point by its latitude and longitude coordinates geographically and associate a marker, or group assignment, to each point. The Source file must be XML format and must contain fields for LATITUDE and LONGITUDE. Additional fields can be included for tooltips or drill down reports in the info window.

Note: The following example creates a source file for a Google 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 COSTOFGOODSSOLD and PROFIT fields in the joined data source.

Once the Latitude and Longitude coordinates for Google Maps have been set, this procedure will be selected as the source file for your application from Flex Builder.

1. Join the Century Sales and Locale data sources.

   For further instructions on joining the data sources, see How to Join the Century Sales and Locale Data Sources .

2. Group COSTOFGOODSSOLD and PROFIT fields.

   For further instructions on how to group fields, see How to Group the COSTOFGOODSSOLD and PROFIT Fields.

3. Add a filter to easily show the data in the map with a more manageable number of records.

   For further instructions on adding a filter, see How to Add a Filter to the Report.

4. With the Report created and modified following How to Add a Filter to the Report open, select Output from the Report menu.
5. Select Standard XML (XML) from the Select Format drop-down list.

   Note: The XML output format is available from the Unstyled formats folder.

6. Select Web browser from the Destination drop-down list.
7. Click OK to close the Report Options dialog box.
8. Save and close your report. It should appear in Report Painter in Developer Studio, as shown in the following image.

   

x

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

1. Open Developer Studio.
2. With the Procedures folder selected, select File, then New/Procedure. The Add Procedure dialog box appears.
3. Name the procedure flexgmap and select Open. The Procedure Viewer opens.
4. Click and hold a component connector (yellow diamond) and select Join. The Open dialog box appears.
5. Select centurysales.mas and click Open. The Join dialog box appears.
6. Select the Add File button from the Join toolbar.
7. From the File Description List, 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 following example image.

   

   For more information about using the Join tool, see the Creating Reports with Graphical Tools manual.

8. Close the Join tool to save the Join and update the procedure. The Join will be added to the Procedure Viewer.

x

1. Open the Join created in How to Join the Century Sales and Locale Data Sources.
2. From the Procedure Viewer, click and hold a component connector (yellow diamond) after the Join icon and select Report. The Open dialog box appears.
3. Select centurysales.mas and select Open.
4. Select By from the Columns toolbar and double click YEAR from the Object Inspector.
5. Select By from the Columns toolbar and double click PLANTREGION, STATE, and CITY from the Object Inspector.

   Note: The LATITUDE and LONGITUDE data are based on CITY so you will assign the CITY field at the tooltips.

6. Select By from the Columns toolbar and double click LATITUDE and LONGITUDE from the Object Inspector.
7. Select By from the Columns toolbar and double click PRODUCTTYPE and PRODUCTCATEGORY from the Object Inspector.

   Note: You will drill down into PRODUCTTYPE and PRODUCTCATEGORY data in the info window.

8. Select Sum from the Columns toolbar and double click COSTOFGOODSSOLD and PROFIT from the Object Inspector.
9. Save the report. It should appear as shown in the following image.

   

x

1. Open the Report created in How to Group the COSTOFGOODSSOLD and PROFIT Fields.
2. Select Where/If from the Report menu. The Report Options window will appear.
3. Select the Where tab.
4. Enter COUNTRY EQ 'United States' in the Expressions window.
5. Click OK.

x

1. With Adobe Flex Builder open, select File, New, Flex Project.
2. Name the project My_GoogleMap and add the WebFOCUS Enable engine, following the procedure in How to Create a Flex Project, be sure to use the name My_GoogleMap, instead of the sample name in the procedure.
3. Select the Design tab to switch to layout view, where you can drag and drop components onto the Flex Builder canvas.
4. From the WebFOCUSEnable Controls folder in the Components pane, drag and drop the ibiCanvas component onto the My_GoogleMap.mxml canvas.

   Adjust the size and position of the canvas as desired.

5. Drag and drop ibiDataGrid component from WebFOCUSEnable Controls folder into the canvas.

   Adjust the size and position of the data grid as desired.

6. With the ibiDataGrid selected, expand the Common tree on the Flex Properties pane, and set id to MAIN01.
7. With ibiDataGrid selected, expand the IBI Data tree on the Flex Properties pane, and set seturl to the following url:

   http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=flexgmap&IBIAPP_app=ibidemo

   Note: The above URL points to the flexgmap.fex procedure created in How to Join the Century Sales and Locale Data Sources.

8. Click the Run button. If prompted, select OK to save and run the project.
9. Verify that latitude and longitude are retrieved back into the data grid and close the page to return to the dashboard.
10. Drag and drop ibiMap001 component from WebFOCUSEnable Maps folder onto the canvas.

    Adjust the size and position of the data grid as desired.

11. With ibiMap001 selected, expand the IBI Maps tree on the Flex Properties pane, and set apiKey as described in How to Generate a Google Maps API License Key.
12. Save and click the Refresh button to refresh your Design canvas.

    The Google Map appears, as shown below.

    

13. Switch to the Source view.

    Your code should look similar to the following.

    

14. Add the following code after <ibi:apiKey> element inside ibiMap001 to populate the marker using LATITUDE and LONGITUDE data in the data grid MAIN01. ibiMarkerColor sets the color of the marker and ibiToolTip binds the data to show in the data tips as you mouse over the marker.

    <ibi:markerSets>
    <![CDATA[
    {
    ibiMarkersParent: MAIN01;
    ibiMarkerColor: #8F8FBC;
    ibiLatColumn: LATITUDE;
    ibiLongColumn: LONGITUDE;
    ibiToolTip: CITY;
    }
    ]]>
    </ibi:markerSets>

15. Click the Run button. If prompted, select OK to save and run the project.

    The markers are populated on the map and data tips show the CITY name, as shown below.

    

16. Close the page and return to the dashboard.
17. To populate the data inside info window and set the zoom levels for the map so the markers will stay on the map as you zoom in and out for 3 levels, add the following code to the codeblock you wrote in step 14.

    Note: The new code is bold.

    <ibi:markerSets>
      <![CDATA[
        {
          ibiMarkersParent: MAIN01;
          ibiMarkerColor: #8F8FBC;
          ibiLatColumn: LATITUDE;
          ibiLongColumn: LONGITUDE;
          ibiToolTip: CITY; 
          ibiMinZoom: 4;
          ibiMaxZoom: 6;
          ibiInfoWindowColumns: PRODUCTTYPE,Sum.COSTOFGOODSSOLD;
          ibiInfoWindowGroupBy: PRODUCTTYPE;
          ibiInfoWindowSize: 350,150;
        }
      ]]>
    </ibi:markerSets>

18. Click the Run button. If prompted, select OK to save and run the project.
19. Zoom in one level and click the marker to drill down to the Product data displayed inside info window.

    

20. Close the page and return to the dashboard.

x

You can customize the Google Map views by setting default values and add controls for the users to change settings at runtime.

1. With My_GoogleMap.mxml open and ibiMap001 selected, expand the IBI Maps tree of the Flex Properties pane and set the following properties:
   • defaultMapCenter: 2 Penn Plaza, New York, NY
   • defaultMapType: hybrid
   • defaultMapZoom: 4

   

2. Click the Run button. If prompted, select OK to save and run the project.

   The map is now centered on New York.

   

3. Close the page and return to the dashboard.
4. Switch to the Source view.
5. Place your cursor after the ending </ibi:markerSets> tag and before the </ibi:ibiMap001> tag.

   

6. To add icons that will allow users to switch the map types and set the alignment of the icons to vertical, add the following code:

   <ibi:mapTypeControl>
     <![CDATA[
       {
         buttonAlignment: vertical;
       }
     ]]>
   </ibi:mapTypeControl>

7. To add Google Maps arrow icons that will allow users to navigate the map and position them under mapTypeControl icons, add the following code directly after the code added in step 6.

   <ibi:positionControl>
     <![CDATA[
       {
         controlPosition: TR;
         paddingX: 15;
         paddingY: 90;
       }
     ]]>
   </ibi:positionControl>

8. To add a flex slider as a zoom level bar and to position it in the top left corner of the map, add the following code directly after the code added in step 7.

   <ibi:flexZoomControl>
     <![CDATA[
       {
         top: 10;
         left: 10;
       }
     ]]>
   </ibi:flexZoomControl>

9. Click the Run button. If prompted, select OK to save and run the project.

   The map will have the new controls added in their specified positions.

   

   Click different types of maps to change the map view or use the arrow icons and the slider to navigate and zoom in and out of the map.

10. Close the page and return to the dashboard.

x

The enableCrosshairs property in the ibiMap001 component, when set to true, places crosshairs (plus sign) on a Google map to mark its center. The default value for the enableCrosshairs property is false.

Property	Description
enableCrosshairs	True adds crosshairs (plus sign) to a map, marking its center. The default value is False.

The following image shows the use of the enableCrosshairs property on a Google map.

x

By default, the map display does not reset when data is reloaded in the ibiMarkersParent grid of the ibiMap001 component. You can use the refreshMapDisplay method of the ibiMap001 component to refresh the map display back to the default settings in the ibiMap001 component properties that were originally specified.

The ibiMap001 component properties reset by calling the refreshMapDisplay method are:

• defaultMapCenter
• defaultMapType
• defaultMapZoom
• enableContinuousZoom
• enableControlByKeyboard
• enableCrosshairs
• enableDragging
• enableScrollWheelZoom

Top of page

Example: Using the refreshMapDisplay Method

In this example, the map is zoomed to zoom level 15, the map type is set to Hybrid, and NY is set as the map center. At run time, you can change the zoom level and map type, and move the map around within the viewer to change the location of the map.

Clicking the Refresh Map Display button, calls the refreshMapDisplay method and resets the map to its original default view (zoomed to level 15, Hybrid map type, and map centered on NY).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:ibi="http://www.informationbuilders.com" >
  <ibi:ibiCanvas width="100%" height="100%" id="mycanvas" >
    <ibi:ibiDataGrid id="mainGrid" visible="false" width="0" height="0"
         seturl="http://localhost:8080/ibi_apps/WFServlet?
         IBIF_ex=flexgmall&amp;IBIAPP_app=ibiflexdemo" />
    <ibi:ibiMap001
         apiKey="ABQIAAAAgfsVoONjutQ6GCJ5tFZjQBQwp_g_
           yVhnk3bKMhLuJQbGXMeO3BSLE02tVxsE6RZyZmjjkbrjHH4v6A"
         id="map1"
         defaultMapZoom="15"
         defaultMapCenter="2 Penn Plaza, New York, NY"
         defaultMapType="hybrid"
         enableContinuousZoom="true"
         enableControlByKeyboard="true"
         enableScrollWheelZoom="true"
         enableCrosshairs="true"
         color="#000000" x="53" y="69" width="911" height="613" >
      <ibi:markerSets>
        <![CDATA[
          {
            ibiMarkersParent: mainGrid;
            ibiMarkerColor: #FF0000;
            ibiLatColumn: LATITUDE;
            ibiLongColumn: LONGITUDE;
            ibiToolTip: STATE;
            ibiMinZoom: 1;
            ibiMaxZoom: 17;
          }
        ]]>
      </ibi:markerSets>

      <ibi:mapTypeControl>
        <![CDATA[
          {
          }
        ]]>
      </ibi:mapTypeControl>
      <ibi:flexZoomControl>
        <![CDATA[
          {
          }
        ]]>
      </ibi:flexZoomControl>
    </ibi:ibiMap001>
    <mx:Button x="53" y="28" label="Refresh Map Display" 
        click="map1.refreshMapDisplay()" />
  </ibi:ibiCanvas>
</mx:Application>

x

You can apply filters to the map to add interactivity to the map dashboard.

1. With My_GoogleMap.mxml open switch to the Design view.
2. From the Layout folder of the Components pane, drag and drop an ApplicationControlBar onto ibiCanvas, above ibiMap001. You may have to resize ibiMap001 so that the ApplicationControlBar can fit above it on ibiCanvas.
3. From the Controls folder of the Components pane, drag and drop a Label onto the ApplicationControlBar.
4. Double-click the Label and add the text Select Region To Filter.
5. From the WebFOCUSEnable Controls folder of the Components pane, drag and drop an ibiComboBox onto the ApplicationControlBar.

   Notice that the ApplicationControlBar resizes automatically.

6. With the ibiComboBox selected, expand the Common and IBI Data trees in the Flex Properties pane and set the following properties:

   • id: comboReg

   • ibiColumn: PLANTREGION
   • ibiParent: MAIN01
   • ibiFilterAble: true
7. From the WebFOCUSEnable Controls folder of the Components pane, drag and drop a ibiDataGrid onto the ibiCanvas.

   This ibiDataGrid will be used for the filter.

8. With the ibiDataGrid selected, expand the Common and IBI Data trees in the Flex Properties pane and set the following properties:

   • id: data01

   • ibiParent: MAIN01
   • ibiUseColumns: STATE,CITY,LATITUDE,LONGITUDE,PROFIT
   • ibiUseFiltered: true
9. Set visibility to false in the ibiDataGrid, MAIN01.
10. With ibiMap001 selected, expand the IBI Maps tree in the Flex Properties pane.
11. Locate the markerSets property and change the parent to data01 by locating ibiMarkersParent: MAIN01; and changing it to ibiMarkersParent: data01;.

    

12. To hide LATITUDE and LONGITUDE from the data grid so that those columns will not be visible, directly after the semicolon of ibiMarkersParent: data01; add another property to markerSets called ibiHideLatLngCols and set it to true by inserting the following code:

     ibiHideLatLngCols: true;

13. To set the combo box to be used as a map filter, locate the ibiMapFilters property and add the following value:

    {['comboReg']}

    Note: The property expects an array so that multiple filters can be specified. The following is an example of the syntax for more than one filter:

     {['comboReg','combo_2','combo_3']}

14. Click the Run button. If prompted, select OK to save and run the project.
15. Select South Atlantic from the combo box. Only the markers for South Atlantic region appear on the map. The data in the data grid under map is also filtered.

    

16. Close the page and return to the dashboard.
17. From the WebFOCUSEnable Charts folder of the Components pane, drag and drop an ibiBarChart onto ibiCanvas below ibiMap001.
18. With the ibiBarChart expand the Common, Data, IBI Data, and IBI General trees of the Flex Properties pane and set the following properties:

    • id: bar01

    • ibiParent: MAIN01
    • ibiGroupBy: PRODUCTTYPE
    • ibiUseFiltered: true
    • showDataTips: true
    • ibiXField: Sum.PROFIT
    • ibiYField: PRODUCTTYPE
19. With My_GoogleMap.mxml in plain text view, locate <ibi:ibiBarChart>, as shown in the following image.

    

20. The <ibi:ibiBarChart> tag in step 14 is an empty element. In order to add a specialized chart style tag an end tag must be added. The code must be altered as follows:

    <ibi:ibiBarChart x="341" y="28" id="bar01" ibiParent="MAIN01"
         ibiGroupBy="PRODUCTTYPE" ibiUseFiltered="true" showDataTips="true"
         ibiXField="Sum.PROFIT" ibiYField="PRODUCTTYPE"/>

    must be changed to:

    <ibi:ibiBarChart x="341" y="28" id="bar01" ibiParent="MAIN01"
         ibiGroupBy="PRODUCTTYPE" ibiUseFiltered="true" showDataTips="true"
         ibiXField="Sum.PROFIT" ibiYField="PRODUCTTYPE"> 
     </ibi:ibiBarChart>

21. Place your cursor in between the opening and closing <ibi:ibiBarChart> tags, as shown in the following image.

    

22. Add the following code to that section:

     <ibi:ibiBarStyle>
      <![CDATA[
        {
          fillAlphas: 1, 1, 1, 1,1;
          fillRatios: 0,.2,.4,.75,1;
          fillColors: #5a40bc,#c9bbfc,#4930a5,#917ae9,#2b147e;
          fillAngle: 90;
          showDataEffect: zoom;
        }
      ]]>
    </ibi:ibiBarStyle>

23. Place your cursor in between the closing ibiCanvas and Application tags, as shown in the following image.

    

24. Add the following flex data effect class code for zoom animation to that section:

    <mx:Zoom id="zoom" duration="1000"/>

25. Click the Run button. If prompted, select OK to save and run the project.

    The markers, data grid, and the bar chart are now all filterable.

    

26. Close the page and return to the dashboard.

x

Scale Dependency means only certain layers are visible on the map, depending on the scale or the zoom level at which the map is being displayed. You can populate the markers for different zoom levels based on each aggregation level of the data so that the markers appear and reappear as the user changes the zoom level on the map. You can also add conditions on each aggregated set of data so that the markers appear in different colors based on the condition set.

Note: For this procedure, use locale2.mas and locale2.foc files included in the product download.

The locale2 master and focus files contain individual geocode data for each State, City in a specific state, and Zip code for the specific address in centurysales data. Each geocode value is generated by using free internet service to demonstrate the scale dependent layers of the markers in this example. The fields called ST_LAT and ST_LONG contain corresponding latitude and longitude data for the STATE, CT_LAT and CT_LONG for CITY, and PS_LAT and PS_LONG for POSTALCODE.

1. Create a WebFOCUS procedure called localeall that joins the data in centurysales and locale2. For more information on creating the procedure, see How to Join the Century Sales and Locale Data Sources.
2. Add BY and SUM columns as desired. For more information on adding columns, see How to Group the COSTOFGOODSSOLD and PROFIT Fields.
3. Limit the amount of data retrieved by adding a condition to the procedure. For more information on how to add conditions, see How to Add Filters to the Google Map.
4. The procedure should look similar to the following:

   JOIN
    CENTURYSALES.STORESEG.POSTALCODE IN centurysales TO MULTIPLE
   LOCALE2.SEG01.POSTALCODE
    IN locale2 AS J0
    END
   DEFINE FILE CENTURYSALES
   MONTHNAME/A20=IF MONTH EQ '01' THEN 'January'
   ELSE IF MONTH EQ '02' THEN 'February'
   ELSE IF MONTH EQ '03' THEN 'March'
   ELSE IF MONTH EQ '04' THEN 'April'
   ELSE IF MONTH EQ '05' THEN 'May'
   ELSE IF MONTH EQ '06' THEN 'June'
   ELSE IF MONTH EQ '07' THEN 'July'
   ELSE IF MONTH EQ '08' THEN 'August'

   ELSE IF MONTH EQ '09' THEN 'September'
   ELSE IF MONTH EQ '10' THEN 'October'
   ELSE IF MONTH EQ '11' THEN 'November'
   ELSE IF MONTH EQ '12' THEN 'December'
   ;
   END
   TABLE FILE CENTURYSALES
   SUM
     PRODUCTCATEGORY
     COST
     PRICE
     COSTOFGOODSSOLD
     PROFIT
   BY YEAR
   BY QUARTER
   BY MONTH
   BY MONTHNAME
   BY PLANTREGION
   BY STATE
   BY ST_LAT
   BY ST_LONG
   BY CITY
   BY CT_LAT
   BY CT_LONG
   BY POSTALCODE
   BY PS_LAT
   BY PS_LONG
   BY STORENAME
   BY ADDRESS
   BY PRODUCTTYPE
   WHERE ( COUNTRY EQ 'United States' ) AND ( REGION NE 'Web(R)' )
     AND ( POSTALCODE NE '065208332' OR '672033296' OR '941033185' );
   ON TABLE SET PAGE-NUM OFF
   ON TABLE NOTOTAL
   ON TABLE PCHOLD FORMAT XML
   ON TABLE SET HTMLCSS ON
   END

5. With Adobe Flex Builder open select File, New, Flex Project.
6. Name the project GoogleMap_Scale and add the WebFOCUS Enable engine, following the procedure in How to Create a Flex Project, be sure to use the name GoogleMap_Scale, instead of the sample name in the procedure.
7. Select the Design tab to switch to layout view, where you can drag and drop components onto the Flex Builder canvas.
8. From the WebFOCUSEnable Controls folder in the Components pane, drag and drop the ibiCanvas component onto the GoogleMap_Scale.mxml canvas.

   Adjust the size and position of the canvas as desired.

9. Drag and drop ibiDataGrid component from WebFOCUSEnable Controls folder into the canvas.

   Adjust the size and position of the data grid as desired.

10. With the ibiDataGrid selected, expand the Common tree on the Flex Properties pane, and set id to MAIN01.
11. With ibiDataGrid selected, expand the IBI Data tree on the Flex Properties pane, and set seturl to the following url:

    http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=localeall&IBIAPP_app=ibidemo

    Note: The above URL points to the localeall.fex procedure created in step 1 through step 4.

12. Insert an ibiMap001 component onto the canvas. See How to Add the Google Maps API Key to the ibiMap001 Component.
13. With ibiMap001 selected, expand the IBI Maps tree on the Flex Properties pane and set the following properties to true: enableScrollWheelZoom, enableContinuousZoom, enableDragging, enableControlByKeyboard.

    

14. To create markers that will be populated based on the aggregated data by STATE at the highest zoom level, then by CITY, and the lowest zoom level should display the markers based on the detailed data by POSTALCODE as the user zooms into the map, expand WebFOCUSEnable Controls on the Components pane and drag an ibiDataGrid onto the canvas.
15. With the ibiDataGrid created in step 14 selected, expand the Common and IBI Data trees on the Flex Properties pane and set the following properties:
    • id: stateAgg
    • ibiParent: mainGrid
    • ibiGroupBy: STATE,ST_LAT,ST_LONG
    • ibiUseColumns: STATE,ST_LAT,ST_LONG,Sum.PROFIT
16. Copy and paste the stateAgg data grid, and change the following properties:
    • id: cityAgg
    • ibiGroupBy: CITY,CT_LAT,CT_LONG
    • ibiUseColumns: CITY,CT_LAT,CITY_LONG,Sum.PROFIT
17. Copy and paste the stateAgg data grid again (make sure you are copying stateAgg not cityAgg) and change the following properties:
    • id: postData
    • ibiUseColumns: POSTALCODE,PS_LAT,PS_LONG,PROFIT
18. Switch to the Source view.
19. Add the following code after <ibi:apiKey> element inside ibiMap001 to populate the first marker using the stateAgg data grid.

    <ibi:markerSets>
      <![CDATA[
        {
          ibiMarkersParent: stateAgg;
          ibiLatColumn: ST_LAT;
          ibiLongColumn: ST_LONG;
          ibiToolTip: STATE;
          ibiMinZoom: 3;
          ibiMaxZoom: 4;
          ibiInfoWindowColumns: PRODUCTTYPE,Sum.PROFIT;
          ibiInfoWindowGroupBy: PRODUCTTYPE;
          ibiInfoWindowSize: 250,150;
          ibiMarkerCenter: true;
          ibiHideLatLngCols: true; 
          ibiVisRanges: 1000000.00,5000000.00,10000000.00;
          ibiVisColors: red,yellow,blue,green;
          ibiVisColumn: Sum.PROFIT;
        }
      ]]>
    </ibi:markerSets>

    Instead of setting marker color using the ibiMarkerColor property, it is set using the ibiVisRanges, ibiVisColors, and ibiVisColumn properties (bold above). For more information on these properties, see Mapping Components.

20. Click the Run button. If prompted, select OK to save and run the project.

    

    The map is now populated by red, blue, yellow, and green markers with the data tip for STATE.

21. Close the page and return to the dashboard.
22. In Source View, locate the block of code added in step 19 and add the following code for city markers directly after it:

    Note: Each marker set inside the CDATA section of <ibi:markerSets> should be separated by a comma after the brackets { } of the previous marker set.

    {
      ibiMarkersParent: cityAgg;
      ibiLatColumn: CT_LAT;
      ibiLongColumn: CT_LONG;
      ibiToolTip: CITY;
      ibiMinZoom: 5;
      ibiMaxZoom: 6;
      ibiInfoWindowColumns: PRODUCTTYPE,PRODUCTCATEGORY,Sum.PROFIT;
      ibiInfoWindowGroupBy: PRODUCTTYPE,PRODUCTCATEGORY;
      ibiInfoWindowSize: 400,300;
      ibiVisRanges: 1000000.00,5000000.00,10000000.00;
      ibiVisColors: #CA226B,#FDD017,#6960EC,#4E9258;
      ibiVisColumn: Sum.PROFIT;
      ibiMarkerCenter: true;
      ibiHideLatLngCols: true;
    }

23. Click the Run button. If prompted, select OK to save and run the project.
24. Zoom into the map five or six levels to see the markers populated with the CITY name in the data tip.

    

25. Close the page and return to the dashboard.
26. In Source View, locate the block of code added in step 22 and add the following code for post data directly after it:

    Note: Each marker set inside the CDATA section of <ibi:markerSets> should be separated by a comma after the brackets { } of the previous marker set.

    {
      ibiMarkersParent: postData;
      ibiLatColumn: PS_LAT;
      ibiLongColumn: PS_LONG;
      ibiToolTip: POSTALCODE;
      ibiMinZoom: 7;
      ibiMaxZoom: 8;
      ibiInfoWindowColumns: PRODUCTCATEGORY,PROFIT;
      ibiInfoWindowSize: 400,300;
      ibiVisRanges: 10000.00,50000.00,100000.00;
      ibiVisColors: #F5A9A9,#F4FA58,#58ACFA,#01DF74;
      ibiVisColumn: PROFIT;
      ibiMarkerCenter: true;
      ibiHideLatLngCols: true;
    }

27. Click the Run button. If prompted, select OK to save and run the project.
28. Zoom into the map seven or eight levels to see the markers populated with the POSTALCODE name in the data tip.

    

Top of page

Example: Code for a Map With Scale Dependent Layers, Visualizations, Map Controls, and Combo Boxes

Below is the sample code for the map with scale dependent layers and visualizations created in How to Add Scale Dependent Layers and Visualizations to Markers using ibiMap001, with additional map controls and combo boxes for filtering data on the map.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:ibi="http://www.informationbuilders.com" backgroundColor="#ffffff">
  <ibi:ibiCanvas width="100%" height="100%" id="mycanvas" y="10" x="10" >
    <ibi:ibiDataGrid x="0" y="448" width="800" height="133"
         id="mainGrid"
         seturl="http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=localeall" 
         visible="false"/>
    <mx:Label text="Region: " fontSize="12" width="57" x="10" y="11"/>
    <ibi:ibiComboBox x="66" y="11" width="180"
         id="combo1"
         ibiParent="mainGrid"
         ibiColumn="PLANTREGION"
         ibiFilterAble="true" />
    <mx:Label text="State: " fontSize="12" width="50" x="320" y="11"/>

    <ibi:ibiComboBox width="180" x="368" y="11"
         id="combo2"
         ibiParent="mainGrid"
         ibiColumn="STATE"
         ibiFilterAble="true"
         ibiFilterParent="combo1"
         ibiSortValues="true" />
    <ibi:ibiDataGrid width="257" height="134" y="505" x="10"		
         id="stateAgg"
         ibiParent="mainGrid"
         ibiGroupBy="STATE,ST_LAT,ST_LONG"
         ibiUseColumns="STATE,ST_LAT,ST_LONG,Sum.PROFIT"
         ibiUseFiltered="true" />
    <ibi:ibiDataGrid x="275" y="505" width="257" height="133"
         id="cityAgg"
         ibiParent="mainGrid"
         ibiGroupBy="CITY,CT_LAT,CT_LONG"
         ibiUseColumns="CITY,CT_LAT,CT_LONG,Sum.PROFIT"
         ibiUseFiltered="true" />

    <ibi:ibiDataGrid x="540" y="505" width="260" height="133"
         id="postData"
         ibiParent="mainGrid"
         ibiUseColumns="POSTALCODE,PS_LAT,PS_LONG,PROFIT"
         ibiUseFiltered="true"
         visible="true" />
    <ibi:ibiMap001 id="map1" width="790" height="456" left="10" top="41"
         apiKey="ABQIAAAAgfsVoONjutQ6GCJ5tFZjQBQe-mT3FM9t9C2z5-
            I8tFxEuXyfiRQ-Eeq88w-OvcjjE71W2bn3F6Megg"
         enableScrollWheelZoom="true"
         enableContinuousZoom="true"
         enableDragging="true"
        enableControlByKeyboard="true"
        ibiMapFilters="{['combo1','combo2']}" >
      <ibi:markerSets>
        <![CDATA[
          {
            ibiMarkersParent: stateAgg;
            ibiMarkerColor: ;
            ibiLatColumn: ST_LAT;
            ibiLongColumn: ST_LONG;
            ibiToolTip: STATE;
            ibiMinZoom: 3;
            ibiMaxZoom: 4;
            ibiInfoWindowColumns: PRODUCTTYPE,Sum.PROFIT;
            ibiInfoWindowGroupBy: PRODUCTTYPE;
            ibiInfoWindowSize: 250,150;
            ibiVisRanges: 1000000.00,5000000.00,10000000.00;
            ibiVisColors: red,yellow,blue,green;
            ibiVisColumn: Sum.PROFIT;
            ibiMarkerCenter: true;
            ibiHideLatLngCols: true;
          },
          {
            ibiMarkersParent: cityAgg;
            ibiMarkerColor: ;
            ibiLatColumn: CT_LAT;
            ibiLongColumn: CT_LONG;
            ibiToolTip: CITY;
            ibiMinZoom: 5;
            ibiMaxZoom: 6;
            ibiInfoWindowColumns: PRODUCTTYPE,PRODUCTCATEGORY,Sum.PROFIT;
            ibiInfoWindowGroupBy: PRODUCTTYPE,PRODUCTCATEGORY;
            ibiInfoWindowSize: 400,300;
            ibiVisRanges: 1000000.00,5000000.00,10000000.00;
            ibiVisColors: #CA226B,#FDD017,#6960EC,#4E9258;
            ibiVisColumn: Sum.PROFIT;
            ibiMarkerCenter: true;
            ibiHideLatLngCols: true;
          },
          {
            ibiMarkersParent: postData;
            ibiMarkerColor: ;
            ibiLatColumn: PS_LAT;
            ibiLongColumn: PS_LONG;
            ibiToolTip: POSTALCODE;
            ibiMinZoom: 7;
            ibiMaxZoom: 8;
            ibiInfoWindowColumns: PRODUCTCATEGORY,PROFIT;
            ibiInfoWindowGroupBy: ;
            ibiInfoWindowSize: 400,300;
            ibiVisRanges: 10000.00,50000.00,100000.00;
            ibiVisColors: #F5A9A9,#F4FA58,#58ACFA,#01DF74;
            ibiVisColumn: PROFIT;
            ibiMarkerCenter: true;
            ibiHideLatLngCols: true;
          }
        ]]>
      </ibi:markerSets>
      <ibi:flexZoomControl>
        <![CDATA[
          {
            top: ;
            bottom: 35;
            right: ;
            left: 10;
            animate: false;
          }
        ]]>
      </ibi:flexZoomControl>
      <ibi:positionControl>
        <![CDATA[
          {
            controlPosition: BR;
            paddingX: 10;
            paddingY: 110;
           }
        ]]>
      </ibi:positionControl>
      <ibi:mapTypeControl>
        <![CDATA[
          {
            hybrid: false;
            normal: true;
            physical: false;
            satellite: true;
            controlPosition: TR;
            paddingX: 10;
            paddingY: 10; 
            buttonAlignment: vertical;
            buttonSizeWidth: 67;
            buttonSizeHeight: 19;
          }
        ]]>
     </ibi:mapTypeControl>
     <ibi:overviewMapControl>
       <![CDATA[
         {
           controlPosition: BR;
           paddingX: 0;
           paddingY: 0;
         }
       ]]>
     </ibi:overviewMapControl>		
   </ibi:ibiMap001>
  </ibi:ibiCanvas>
</mx:Application>