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 file (.axl) |
<ArcIMS Installation Directory>\ArcIMS\Samples\Viewers\AXL |
<ArcIMS Installation
Directory>/ArcIMS/Samples/Viewers/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\Viewers\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/Viewers/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.
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 Web site
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.
· 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.
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 Web site
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:
· 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.
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.
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 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.
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.
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
<hostname#> 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=<hostname1>,<hostname2>...
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 Web site
htmlviewer directory
(e.g. http://<ArcIMS host>/website/htmlviewer).
6. 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.
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 4.5.
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.
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.
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.