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
- The
Sample Viewers are set up to work with a Typical Installation of ArcIMS
with no changes to the default directory locations. The directory structure
of the sample viewers is as follows (On UNIX, installation directory is
specified as $AIMSHOME):
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
- If
you did a Custom Installation of ArcIMS (Windows only), the directory
containing the sample viewer web sites and the javascript files must be
copied to the correct location.
Copy:
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.
- 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.
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:
- Create
an Image Service named sanfrancisco from sf.axl
- In
the browser, type in the URL to your host website htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer)
- 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.
Extract
Description:
This sample viewer demonstrates the use of
Extract Server to extract layers into shapefile based on a user-defined extent.
Setup requirements:
- Create
an Image Service named sanfrancisco from sf.axl
- In
the browser, type in the URL to your host website htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer)
- 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.
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:
- No
specific ArcIMS Service needs be defined in ArcIMSparam.js, but you want
to have at least one Image Service running.
- In
the browser, type in the URL to your host website htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer)
- 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:
- Create
an Image Service named sanfrancisco from sf.axl
- In
the browser, type in the URL to your host website htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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:
- No
specific Service needs be defined in ArcIMSparam.js, but you want to have
at least one Image Service running.
- In
the browser, type in the URL to your host website htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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 basicworld from BasicWorld.axl,
setting the image type to either 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 3 and 4. If not, continue to Step 5.
- 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>...
- In \htmlviewer\multiservice find and open aimsMultiServiceParam.js
and update the variable availableHostsList with the same host names you
included in Esrimap_prop above.
- In the browser, type in the URL to your host website htmlviewer
directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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:
- For
ASP:
- 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\Viewers\Data\downtown
directory.
- In the \htmlviewer\Parcels directory, copy
asp.htm to default.htm.
- Proceed to For all implementations.
- For
VB:
- 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.
- Search for WebLink.OCX and IMSUtil.dll and move
them to \htmlviewer\Parcels\SQLSend.
- Update the SQLSend.ini file with your machine
name. In the \htmlviewer\Parcels\SQLSend\SQLsend.ini file, replace the
machine name in the ServerHostURL with your own. For example, if your
machine is sammy, the line should read
ServerHostURL=http://sammy/servlet/com.esri.esrimap.Esrimap
- If your data is not at C:\Program Files\ArcGIS\ArcIMS\Samples\Viewers\Data,
update the database name in the \Parcels\aimsDBparam.js file. Change
dbDatabase to the path of the downtown.mdb file. Make sure you use double
backslashes in the same manner they are shown. A double backslash in
JavaScript will result in a single backslash.
- Update the \Parcel\aimsDBparam.js file with your machine name.
Replace the machine name in the dbSQLurl with your own machine name.
For example, if your machine is sammy, the line should read
var dbSQLurl=http://sammy/servlet/com.esri.esrimap.Esrimap.
- Save your changes to the aimsDBparam.js file.
- Start the VB application. Go to
\htmlviewer\Parcels\SQLsend, double-click SQLsend.vbp, then start the
application.
- In the \htmlviewer\Parcels directory, copy
vb.htm to default.htm
- Proceed to For all implementations.
- For
ColdFusion:
- If not already running, start the ColdFusion
Server 4.5.
- 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\Viewers\Data\downtown
directory.
- In the \htmlviewer\Parcels directory, copy
cf.htm to default.htm.
- Proceed to For all implementations.
- For
all implementations:
- Create an Image Service named parcels from
parcels.axl
- In the browser, type in the URL to your host
website \htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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, 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:
- 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:
- Create
an Image Service named demog from demog.axl
- In
the browser, type in the URL to your host website \htmlviewer directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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.
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:
- 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.
- Search for WebLink.OCX and IMSUtil.dll and move them to
\htmlviewer\Tracker\Mover.
- 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.
- Start the VB application. Go to \htmlviewer\Tracker\Mover,
double-click mover.vbp, then start the application.
- Create an Image Service named parcels from parcels.axl
- In the browser, type in the URL to your host website \htmlviewer
directory
(e.g. http:\\<ArcIMS host>\website\htmlviewer).
- 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:
- All
the files in the JavaScript Function Files list except, aimsBuffer.js,
aimsGeocode.js, aimsPrint.js, aimsQuery, and aimsSelect.js.
- AimsTracker.js—sets
up the protocol for sending coordinate requests and getting coordinate
responses. Plots the path created by the coordinates on the map.
- AimsTrackerParam.js—defines
color and sizes of path and object, as well as other path parameters.
- AimsTrackerResource.js—text
strings for interface.