Sample HTML Viewers Setup

Several sample implementations of the HTML Viewer have been provided with ArcIMS 4.0. 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.

General instructions for setting up samples

Map configuration file(.axl) directory—C:\Program Files\ArcGIS\ArcIMS\Samples\Viewers\AXL
Data directory—C:\Program Files\ArcGIS\ArcIMS\Samples\Viewers\Data
Sample viewer web site directory—C:\ArcIMS\Website\htmlviewer
JavaScript function file directory—C:\ArcIMS\Website\htmlviewer\javascript

C:\Program Files\ArcGIS\ArcIMS\Samples\Viewers\htmlviewer  to  C:\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>\Samples\Viewers\AXL, open each AXL file and change the <SHAPEWORKSPACE> element to point to the correct data directory.

·         UNIX users must update the map configuration files (*.axl) to reflect a UNIX path structure.

Go to <ArcIMS Installation Directory>/aims40exe/Samples/Viewers/AXL, open each AXL 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.

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.

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 sanfrancisco from sf.axl
  2. In the browser, type in the URL to your host website htmlviewer directory
    (e.g. http:\\<ArcIMS host>\website\htmlviewer)
  3. Click Basic Map, then click any link across the top bar. The sanfrancisco 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.

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 sanfrancisco from sf.axl
  2. In the browser, type in the URL to your host website htmlviewer directory
    (e.g. http:\\<ArcIMS host>\website\htmlviewer)
  3. Click Extract, and the sanfrancisco 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:

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 website 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:

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 sanfrancisco from sf.axl
  2. In the browser, type in the URL to your host website htmlviewer directory
    (e.g. http:\\<ArcIMS host>\website\htmlviewer).
  3. Click HyperLink and a map of cultural features is displayed. Click 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 browser 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 website 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:

  1. Create an Image Service named basicworld from BasicWorld.axl, setting the image type to either GIF or PNG8.
  2. 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 3 and 4. If not, continue to Step 5.
  3. 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>...
  4. In \htmlviewer\multiservice find and open aimsMultiServiceParam.js and update the variable availableHostsList with the same host names you included in Esrimap_prop above.
  5. In the browser, type in the URL to your host website htmlviewer directory
    (e.g. http:\\<ArcIMS host>\website\htmlviewer).
  6. Click MultiService, and try adding more than one Service using the Add MapService 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. In aimsMultiServiceParam.js, the variable topMapServiceURL is used to define the top-most image Service. This is also used to display the Northarrow, scalebar, and copyright. You must make sure that the Service defined here creates GIF or PNG8 image type. If not, the Services beneath will be obscured. Internet Explorer and Netscape 6 support transparency for both formats, however Netscape 4.x does not support transparency for PNG. 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), ColdFusion, or Visual Basic (VB)

Setup requirements:

 

 

 

 

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, ASP files have a .ASP extension, and the VB implementation uses HTML files (.HTM extension).

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

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 website \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:

Tracker

Description:

This sample viewer demonstrates tracking the position of a moving object. This sample is dependent on a "Coordinate Server" that can send requests for object coordinates and receive coordinate responses. Source code for a Coordinate Server written in Visual Basic has been provided.

Setup requirements:

  1. You must have VB 6, along with WebLink.OCX and IMSUtil.dll from MapObjects IMS 2.0. These components allow VB to communicate with the ArcIMS Application Server.
  2. Search for WebLink.OCX and IMSUtil.dll and move them to \htmlviewer\Tracker\Mover.
  3. Update the mover.ini file with your machine name. In the \htmlviewer\Tracker\Mover\mover.ini file, replace the machine name in the ServerHostURL with your own. For example, if your machine is named sammy, the line should read
    ServerHostURL=http://sammy/servlet/com.esri.esrimap.Esrimap.
    In the same file, confirm the location of File_1 and File_2, and change if necessary.
  4. Start the VB application. Go to \htmlviewer\Tracker\Mover, double-click mover.vbp, then start the application.
  5. Create an Image Service named parcels from parcels.axl
  6. In the browser, type in the URL to your host website \htmlviewer directory
    (e.g. http:\\<ArcIMS host>\website\htmlviewer).
  7. Click Tracker, then set 10 seconds as the Refresh Interval and click Start to watch the path of movement being drawn. Under Follow Object, choose one of the cars, and click Follow to see the movement of that car.

Web site files:

In \htmlviewer\Tracker, the directory named Mover includes a file named Route_1.XY that contains a series of coordinates that feed into the VB application and define the path.

The Tracker sample uses the following JavaScript files: