Sample HTML Viewers Setup

Several sample implementations of the HTML Viewer have been provided with ArcIMS. They demonstrate a variety of functions and graphic designs. A general set of instructions, along with a description and requirements for running each sample are provided below. You should have a working knowledge of creating ArcIMS services and browsing ArcIMS Web sites to work with the samples.

The sample viewers are set up to work with a default installation of ArcIMS. The directory structure of the sample viewers is as follows: 

Directory type

Windows

Linux or UNIX

Map configuration files (.axl)

<ArcIMS Installation Directory>\ArcIMS\Samples\TutorialData\AXL

<ArcIMS Installation Directory>/ArcIMS/Samples/TutorialData/AXL

Data

<ArcIMS Installation Directory>\ArcIMS\Samples\TutorialData

<ArcIMS Installation Directory>/ArcIMS/Samples/TutorialData

Sample viewer Web site

<Drive>:\ArcIMS\Website\htmlviewer

<Web Site Directory>/website/htmlviewer

JavaScript function file

<Drive>:\ArcIMS\Website\htmlviewer\javascript

<Web Site Directory>/website/htmlviewer/javascript

General instructions for setting up samples

Windows:

ˇ         If you did a Custom Installation of ArcIMS, the directory containing the sample viewer Web sites and the JavaScript files must be copied to the correct location.

Copy <ArcIMS Installation Directory>\ArcIMS\Samples\Viewers\htmlviewer to  <Drive>:\ArcIMS\Website\htmlviewer

Note: If you are using the Web Server root directory instead of the \Website directory, copy \htmlviewer there.

ˇ         If you changed the default directory location during the installation, you must update the map configuration files (.axl) with the new data location.

Go to <ArcIMS Installation Directory>\ArcIMS\Samples\TutorialData\AXL, open each configuration file and change the <SHAPEWORKSPACE> element to point to the correct data directory.

Linux and UNIX:

ˇ         The directory containing the sample viewer Web sites and the JavaScript files must be copied to the correct location.

Copy <ArcIMS Installation Directory>/ArcIMS/Samples/Viewers/htmlviewer to  <Web Site Directory>/website/htmlviewer

Note: If you are using the Web Server root directory instead of the \Website directory, copy \htmlviewer there.

ˇ         Update the map configuration files (*.axl) to reflect a UNIX path structure.

Go to <ArcIMS Installation Directory>/ArcIMS/Samples/TutorialData/AXL, open each configuration file and change the <SHAPEWORKSPACE> element to point to the correct data directory using UNIX path structure.

JavaScript Function Files

The following JavaScript function files are shared by all the samples. All files, with the exception of ArcIMSparam.js, are located in the \htmlviewer\javascript directory. The ArcIMSparam.js is located in each sample Web site directory.

ˇ         ArcIMSparam.js—main parameter file that configures the HTML viewer.

ˇ         AimsBuffer.js—functions to perform buffering.

ˇ         AimsClick.js—functions that respond to clicks on the map or buttons.

ˇ         AimsCommon.js—general utility functions.

ˇ         AimsCustom.js—functions and template functions for adding custom functionality.

ˇ         AimsDHTML.js—functions for creating and using Style Sheets (layers in Netscape)

ˇ         AimsGeocode.js—functions to perform address and intersection matching.

ˇ         AimsIdentify.js—functions to perform basic query including Identify and Hyperlink.

ˇ         AimsLayers.js—functions for managing map layers.

ˇ         AimsLegend.js—functions for managing the graphic legend.

ˇ         AimsMap.js—basic mapping functions.

ˇ         AimsNavigation.js—functions for interactive map navigation, such as zooming and panning.

ˇ         AimsPrint.js—functions for creating a Web page layout suitable for printouts.

ˇ         AimsQuery.js—functions to perform attribute query, for example, Query, Find, and Search tools.

ˇ         AimsResource.js—text strings for the interface

ˇ         AimsSelect.js—functions to perform spatial selection, such as selections by rectangle and circle.

ˇ         AimsXML.js—functions for basic XML communication with the servers.

Descriptions of the Samples and Setup Requirements

All ArcIMS services referenced in the sample setup requirements should be in lowercase letters.

If you want to use a different service, you need to modify ArcIMSparam.js for that sample, changing the variables imsURL and imsOVURL to reference the service you are using.

Click the sample name below to go to its description, setup requirements, and other information.

Basic Map

HyperLink

Parcels

Extract

Java Post

Thematic Map

Generic Map

MultiService

Tracker

 

Basic Map

Description:

This sample viewer demonstrates basic functions for a map, including displaying, zooming and panning. The zooming and panning are done through several different interfaces, including buttons with icons (toolbar style), buttons with text (form style), and links.

Setup requirements:

1.      Create an Image Service named BayArea (case sensitive) from sf.axl

2.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer)

3.      Click Basic Map, then click any link across the top bar. The BayArea service is displayed.

Web site files:

In \htmlviewer\BasicMap, most of the functions are defined in the MapFrame.htm and Toolbar.htm. The MapFrame file names are organized from zero to four. Each represents one of the five links across the top bar of the application, starting from the left. For example, MapFrame_zero.htm defines the first link across the top bar. The Toolbar.htm defines the buttons in the form style layout.

The Basic Map sample uses the following four files from the JavaScript Function Files list above.

ˇ         ArcIMSparam.js—the main parameter file that the viewer uses to set up its functionality.

ˇ         AimsCommon.js—many generic functions used by many of the other functions in the library.

ˇ         AimsMap.js—functions that provide basic mapping functions for the viewer.

ˇ         AimsXML.js—functions that provide the basic XML communication with the servers.

Extract

Description:

This sample viewer demonstrates the use of Extract Server to extract layers into shapefile based on a user-defined extent.

Setup requirements:

1.      Create an Image Service named BayArea (case sensitive) from sf.axl

2.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer)

3.      Click Extract, and the BayArea service is displayed. To test the extract function, make a layer active, and use the Select by Rectangle to select features. Click the Extract tool, click Extract, then click Download and choose a location for the zip file.

Web site files:

In Viewer.htm notice the Overview map is in a frame separate from the main map, and there is a frameset within a frameset. Functions to support a drill-down identify tool and to buffer around a user-defined shape, using the Select by Shape tool, are demonstrated.

The Extract sample uses the following JavaScript files:

ˇ         All the files in the JavaScript Function Files list except, aimsBuffer.js, aimsGeocode.js, and aimsPrint.js.

ˇ         AimsExtract.js—functions that create the dropdown list for the options.

ˇ         AimsExtractResource.js—text strings for interface.

Generic Map

Description:

This sample viewer presents a dropdown list of all Image Services running on a server, and allows the user to choose one. It also has an Options tool that allows the user to set a variety of properties including zoom and pan factors, color for zoom box outline and map background, selection and highlight color, north arrow style, style of the layer list, and map coordinate display.

Setup requirements:

1.      No specific ArcIMS service needs be defined in ArcIMSparam.js, but you want to have at least one Image Service running.

2.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer)

3.      Click Generic Map. Choose a service for the main map and overview map, if desired, then click Load. Try out the Options button at the bottom of the toolbar.

Web site files:

In \htmlviewer\Generic, there is an HTML page that defines each option, with a name that is similar to the function name in the options list. For example, setHighlightColor.htm defines the Set Highlight Color function page.

The Generic Map sample the following JavaScript files:

ˇ         All the files in the JavaScript Function Files list.

ˇ         AimsOptions.js—functions that create the dropdown list for the options.

ˇ         AimsGeneric.js—functions that create the dropdown lists for loading the requested the services.

ˇ         AimsGenericResource.js—text strings for interface.

HyperLink

Description:

This sample viewer demonstrates a hyperlink function. It shows how to turn map features into hyperlinks that display another Web page. The sample presents a custom graphic look for the area surrounding the map, and includes many of the tools from BasicMap (described above).

Setup requirements:

1.      Create an Image Service named BayArea (case sensitive) from sf.axl

2.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).

3.      Click HyperLink and a map of cultural features is displayed. Click Query or Queries on the side bar, click HyperLink, then click on an art gallery to link to its home page. Note:  Not all art galleries have valid links.

Web site files:

In \htmlviewer\Hyperlink, the black custom interface is defined in viewer.htm.

The HyperLink sample uses all the files in the JavaScript Function Files list above. Also look at ArcIMSparam.js for the parameters UseHyperLink, hyperLinkLayers, and hyperLinkFields.

Java Post

Description:

This sample viewer demonstrates the use of a Java applet inside the HTML viewer. The applet communicates through ArcXML to the ArcIMS Application Server instead of to the ArcIMS Servlet Connector. The applet uses Java 1.1 instead of Java 2, and therefore does not require the JRE Plug-in. The sample supports the same functions as the HTML viewer created by ArcIMS Designer, but can be extended with Java 1.1. This sample does not work in Netscape 6 due to changes in Java security.

Setup requirements:

1.      No specific service needs be defined in ArcIMSparam.js, but you want to have at least one Image Service running.

2.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).

3.      Click Java Post, and try out the tools on the viewer. The functions work the same as the standard HTML viewer, but the communication is different based on a different implementation of the sendToServer function.

Web site files:

In this sample, the file \htmlviewer\JavaPost\AppletFrame.htm loads the applet, instead of jsForm.htm which is used by the standard HTML viewer and the other samples. The MapFrame.htm contains the sendToServer function. The sendToServer calls the Java applet to handle the communication instead of the standard posting in HTML. The directory named \java includes the Java applet and source code.

The Java Post sample uses all the files in the JavaScript Function Files list.

MultiService

Description:

This sample viewer demonstrates the ability to load multiple ArcIMS services. It also shows you how to set up the HTML viewer to access services from more than one host.

Setup requirements:

Create an Image Service named BayArea (case sensitive) from sf.axl, setting the image type to either GIF or PNG8.   Start a second service named SantaClara (case sensitive) from SantaClara.axl, setting the image type to GIF or PNG8.
While most samples only show ArcIMS services on your local host, this sample allows you to choose services from other hosts. If you wish to do this, you must complete Steps 1 and 2. If not, continue to Step 3.

1.      Search for the file Esrimap_prop (it's location depends on your Web server). Open the file and add the following lines, replacing &lthostname#> with the name of the host you want to get services from. This is known as Redirection, because you are redirecting the URL path to another host:
   redirect=true
   redirectableHosts=&lthostname1>,&lthostname2>...

2.      In \htmlviewer\multiservice find and open aimsMultiServiceParam.js and update the variable availableHostsList with the same host names you included in Esrimap_prop above.

3.      In the browser, type in the URL to your host Web site htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).

4.      Click MultiService, and try adding more than one service using the Add Service button in the lower-right corner. Try selecting a second host if you have set your properties to do so.

Web site files:

In this sample, many ArcIMS services can be put into one viewer. The image output file type for the services must be GIF or PNG8, because a transparent background is necessary to show one service displayed underneath another service. No projection of services is performed in this sample, so your services must be in the same coordinate space to appear correctly, or you could add your own projection code.

The MultiService sample uses all the files in the JavaScript Function Files list except aimsBuffer.js, aimsGeocode.js, and aimsPrint.js.

Parcels

Description:

This sample viewer demonstrates linking features to data in an external database. A layer of land parcels with matching parcel information found in an Access database is provided. This sample uses either Active Server Pages (ASP) or ColdFusion.

Setup requirements:

ˇ         For ASP:

1.      An ODBC connection to external data is required. Go to Start menu| Settings|Control Panel and choose ODBC Data Sources. Click the System DSN tab, click Add, and select the Microsoft Access Driver(.mdb). Set the Data Source Name to Downtown, and for the database select downtown.mdb in the C:\Program Files\ArcGIS\ArcIMS\Samples\TutorialData\downtown directory. 

2.      In the \htmlviewer\Parcels directory, copy asp.htm to default.htm.

3.      Proceed to For all implementations.

ˇ         For ColdFusion:

1.      If not already running, start the ColdFusion Server.

2.      An ODBC connection to external data is required. Go to Start menu| Settings|Control Panel and choose ODBC Data Sources. Click the System DSN tab, click Add, and select the Microsoft Access Driver(.mdb). Set the Data Source Name to Downtown, and for the database select downtown.mdb in the C:\Program Files\ArcGIS\ArcIMS\Samples\TutorialData\downtown directory. 

3.      In the \htmlviewer\Parcels directory, copy cf.htm to default.htm.

4.      Proceed to For all implementations.

ˇ         For all implementations:

1.      Create an Image Service named parcels from parcels.axl

2.      In the browser, type in the URL to your host Web site \htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).

3.      Click Parcels, then Zoom in, and try out the Identify, the Search by Address, and Search by Owner tools. The data returned is from the downtown.mdb database.

Web site files:

In \htmlviewer\Parcels, the HTML files typically appear in sets, one for each of the development environments supported. ColdFusion files have a .CFM extension and ASP files have a .ASP extension.

The Parcels sample uses all the files in the JavaScript Function Files list above, plus the following:

ˇ         AimsDB.js—functions that perform the linking of the layer to the external table.

ˇ         AimsDBParam.js—defines fields and tables for linking.

ˇ         AimsDBResource.js—text strings for interface.

Thematic Map

Description:

This sample viewer shows thematic rendering of layers and generating statistics on a field.

Setup requirements:

1.      Create an Image Service named demog from demog.axl

2.      In the browser, type in the URL to your host Web site \htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).

3.      Click Thematic Map, and try out the Classify Layers tool and Field Statistics tools.

Web site files:

The Thematic sample uses the following JavaScript files:

ˇ         All the files in the JavaScript Function Files list except, aimsBuffer.js, aimsPrint.js, and aimsSelect.js

ˇ         AimsClassRender.js—functions that perform the classification and rendering of layers and field statistics.

ˇ         AimsClassRenderParam.js—defines layers and fields for the rendering. In this sample, layers and fields are from data found in the provided \Data\SanFrancisco directory. If you experiment with other data layers, you need to update this file with the layers and fields from your data.

ˇ         AimsClassRenderResource.js—text strings for interface.

ˇ         MiniDHTML.js—defines the DHTML needed to position the graphics in the top frame of the custom graphic interface.