MODIFYING THE HTML VIEWER USING ARCIMSPARAM.JS

From Exercise 10 in the ESRI exercise book Customizing ArcIMS  using HTML and Javascript.

The ArcIMSParam.js file is a place to make many modifications to the HTML Viewer just by changing variables and populating some arrays.  Many of the more common customizations can be done in this file.

Step 1:  Start a New Service and Create a New HTML Viewer

You will be customizing a new HTML viewer in this exercise.  The new viewer will use a new Service called Brazil.

1. Start a new Service with the following properties:

2. Using ArcIS+MS Designer, create a new HTML Viewer with the following properties:

3. Open your browser and view your website at http://localhost/website/Brazil

4.  Leave your browser open

Step 2 - Implement a Hyperlink Tool

A hyperlink tool allows the user to click on a feature on the map and open a new window that navigates to a URI defined by the value in a field from that feature's attribute table.  The field containing the link information can contain a complete URL or a partial URI.  If the field only contains a partial URI, you can specify the other parts of the URI in the ArcIMSParam.js.  This example contains a complete URI.  Hyperlinking is easy to implement with ArcIMSParam.js but cannot be done through the Designer interface.

1.  In your HTML editor (Cooktop) open the ArcIMSParam.js file from your Brazil website.

2. Find the line reading useHyperlink = false; and change it to read "true."

3. Save your changes to ArcIMSParam.js

4. Refresh your browser (Ctrl + F5)

5. Make the cities layer active.

6. Use the Identify tool to identify one of the cities on the map.
Questions 1:  Which field appears to contain a URI? _________________________

Setting the useHyperlink variable to true will put the hyperlink tool on the toolbar but you still need to define the layer(s) and field(s) containing hyperlink information.

7.  In the ArcIMSParam.js file, scroll down until you find the code:

/*
hyperLinkLayers[0] = "Image";
hyperLinkFields[0] = "HOT";
hyperLinkPrefix[0] = "/gisdata/world/images/";
hyperLinkSuffix[0] = ".jpg";
*/
8.  Aflter the code above add the following code to define a hyperlink for the cities layer:

hyperLinkLayers[0] = "Cities";
hyperLinkFields[0] = "<answer to Question 1>"; 
hyperLinkPrefix[0] = "";
hyperLinkSuffix[0] = "";
 

Note: in the <answer to Question 1> replacement, remember java is case sensitive. Also be sure to remove the /* and */ text from the beginning and end of the code; this marks it as comment and changes will not be read.

9.  Save your changes to ArcIMSParam.js

10. Refresh your browser

The hyperlink tool (looks like a lightning bolt) should be visible on the toobar.

11.  Use the hyperlink tool to click on any city on the map (Hint: change var pixelTolerance=2; this line in the ArcIMSParam.js file to a large number, e.g. 5, to increase the search radius around a point;  the default value of 2 means you have to be right on the point to activate the hyperlink tool.  Don't forget to refresh your website after making this change.)

You should see a new browser window open with a web site define by the URI in the HYPERLINK field of the city you clicked on - some are no longer active.

Step 3 - Implement Identify All

You might want to implement an identify tool that identifies all layers at the user's click rather than just the active layer.  The HTML Viewer has an Identify All tool that you can enable in the ArcIMSParam.js file but you should give some thought as to whether or not to use it.  The functionality of identifying all layers works by querying the server once for each layer (one round trip per layer).  If you have many layers these multiple trips to the server and back can take some time.

1.  In the ArcIMSParam.js turn off the standard identify functionality by setting the useIdentify variable to false.

2. Find the useIdentifyAll variable and set it to true to enable the identify all functionality.

3.  Save the changes to ArcIMSParam.js

4. Refresh your browser (Ctrl + F5)

You should notice that the identify tool (black circle with an "i") has been replaced by the identifyAll tool (red circle with an "i").

5. Use the identifyAll tool and click on the map.  You should see the attributes all all layers under the tool displayed in the text frame.

6. Leave your browser open.

Step 4 - Hide Fields and Alias Names

You may have noticed that some field names in the identify or identifyAll results are somewhat unnecessary to display or somewhat cryptic.  There are several variables and arrays in ArcIMSParam.js that allow you to hide fields or use alias field names in the identify results.

As you know, the Shape and ID fields are critical for GIS to uniquely identify each feature and hold geometry information but you might want to hide them in the identify results in the HTML Viewer.

1. Find the hideIDFieldData variable in the ArcIMSParam.js and set it to true.

2. Find the hideShapeFieldData variable and set it to true.

To hide other fields in the identify results, you can set the swapSelectFields variable to true and populate the selFieldList array.  Using selFieldList actually results in the Viewer requesting that the fields not listed in the array not be returned in the ArcXML response from a <GET_FEATURES) request.  When specifying which fields to return with selFieldList, you must still have the #SHAPE# and #ID# fields returned in the ArcXML response.  They just will not be displayed.

3. Find the swapSelectField variable and set it to true.

Once you set the swapSelectFields variable to true, your selFieldList array must have an entry for each layer.  If you do not want to limit the fields displayed from a particular layer, you can use #ALL#.  For this exercise you will just be limiting the fields from the countries layer.  The array element number of selFieldList is determined by each layer's position in the map configuration file counting from the bottom up.  The countries layer is the fourth layer from the bottom so its element number would be three.

4. Populate the selFieldList array as follows:  (Note: there is some sample code already in the file.  You can modify that.

selFieldList[0] = "#ALL#";
selFieldList[1] = "#ALL#";
selFieldList[2] = "#ALL#";
selFieldList[3] = "CNTRY_NAME  #ID#  #SHAPE#";;
 

The next thing you might want to do is use alias field names to display in the HTML Viewer.  Often organizations have cryptic field name that adhere to an internal naming convention.  This works well within the organization but may be difficult for people not familiar with the data.  AN array called FieldAliasList allows you to use alias field name for display.

5. Enable field aliasing by setting the UseFieldAlias variable to true.

6. Populate the fieldAliasList array as follows:

fieldAliasList[0]="";
fieldAliasList[1]="";
fieldAliasList[2]="";
fieldAliasList[3]="CNTRY_NAME:Country Name";
 

You must provide an entry in fieldAliasList for each layer.  If you do not want to alias field name for a particular layer, use and empty string ("").

7. Save your changes

8. Refresh your browser (Ctrl + F5)

9.  Use the identify tool (it will actually be the identifyAll tool)

You should notice that the countries layer only displays the CNTRY_NAME field and the name is aliased to Country Name.  None of the layers should display the SHAPE or ID fields.

10 Leave your browser open

Step 5 - Modify the Map Image Background

Many other variables exist in ArcIMSParam.js to control different aspects of the HTML Viewer.  Among them, is the possibility to make the back ground of the map transparent so you can see things below the map image.  In this step, you will add an interesting texture to the map frame below the map image and make the map image transparent so you can see the texture.

The texture you will use is a .jpg image.  You will need to copy this image into your web site.

1. Copy the image  bluebackground.jpg from n:\int_gis_map\labs  to the images folder in your website folder (c:\arcims\website\Brazil\images)

2. In your HTML editor, open the MapFrame.htm file from your Brazil website.

3. In the <BODY> element remove the bgcolor attribute and value.

4.  Add a background attribute referencing the new .jpg image:

<BODY background = "./images/bluebackground.jpg" TEXT = "Black" ...

Map background transparency is available only when the output image type is .gif or 8 bit .png.

5. In your ArcIMSParam.js file, find the mapTransparent variable and set it to true.

6. Save your changes in both the MapFrame.htm and ArcIMSParam.js files.

7. Refresh your browser

8.  You should see the blue background image wherever the map is not and as you drag the map with the pan tool the blue image will stay in place.

Step 6 - Experiment with other ArcIMSParam.js variables.

The ArcIMSParam.js file contains many other variables.  Acetate layer ojects such as the north arrow, scalebar, copyright text, and geocode marker are controlled by variables.  If you would like to hide a certain layer in the layer and legend list the noListLayer array can be used.

1. Scroll through the ArcIMSParam.js file and experiment with any of the variables you are interested in.

2. Refresh your browser to see the effects of any change.