Using SVG Map Viewer

The SVG Map Viewer sample demonstrates ArcWeb Services vector mapping in scalable vector graphics (SVG) format. SVG is a nonproprietary file format developed by the World Wide Web Consortium. Because SVG is vendor neutral, development and client browsers are not limited to the requirements of a specific commercial entity.

With SVG Map Viewer, you can change the map extent and layer visibility and choose map and projection styles. SVG Map Viewer shows the advantages of vector mapping—including the ability for Web applications to send compact, complex graphics that are quickly and clearly rendered on a client machine. The sample includes an interactive viewer and downloadable code.

The SVG Map Viewer uses REST v2006 for its mapping functionality.

Click a topic below to learn more about using the SVG Map Viewer.

• System requirements
• Using widgets
• Displaying your own data
• Technical paper on using SVG Map Viewer
• Downloading sample code

System requirements

To open the SVG Map Viewer, you need to use a Web browser with native support (for example, Mozilla Firefox 1.5) or install an SVG plug-in. For the best results, ArcWeb recommends you use Internet Explorer 6.0 with Adobe SVG Viewer 3.03. You may notice performance issues if you use Firefox 1.5 with SVG.

ArcWeb Services has verified that you can successfully view SVG Map Viewer with several combinations of operating systems, browsers, and plug-ins.

Supported browsers

NOTE: There are currently some limitations with Mozilla's implementation of SVG which affect the viewing of SVG files. See the SVG in Firefox 1.5 page for more information.

Using widgets and map settings

Widgets and map settings let you control specific features in an application. Widgets "float" in your application window, allowing you to easily work with both the widget and the application. You can move them around and open or hide them from view at any time.

Use widgets to change the map extent, layer visibility, style, and projection. You can display or hide the widgets by clicking their title in the bar above the map. You can hide or show all the widgets with the Hide/Show button in the top right corner.

Click a link to learn more about map settings or a specific widget.

• Map settings
• Navigation
• Overview
• Projection
• Layers
• Styles

Map Settings

Map settings is a stationary button in the upper right corner that lets you turn map features on or off. By default, a map appears without a scale bar or a graticule (latitude and longitude lines). To turn these on, click Settings in the upper right corner and click Scale Bar and/or Graticule.

Navigation

You can use your keyboard, mouse, or the Navigation widget to navigate the map.

• Click the map to center the map on that location.
• Click and drag an area to zoom in.
• Use the Navigation widget.

With the widget, you can zoom and pan, change the north orientation of the map, and step through your browsing history.

Overview

The Overview widget lets you adjust the center of the map. The widget displays an overview map and the center of your current map's extent. The center area is shown inside a square box. Click and drag the square box to change the center of your map.

NOTE: As you change the center of your map, the auto-projection style may update. See the Projection section for information about projection styles.

Projection

Projections represent the earth’s curved surface on a flat sheet of paper or computer screen. This results in various types of distortions in scale, shape, or relative map coverage area. There are hundreds of possible projections to choose from, which can seem daunting if you just want a good-looking map. To help you easily create the best map, SVG Map Viewer automatically picks the appropriate projection for your map extent and scale.

The Projection widget lets you override the automatic projection by choosing a different projection style. Open the Projection widget and click the square next to a projection name listed on the widget. As soon as you choose a projection, the map updates so you can instantly see how the projection style looks. Select another projection if you don't like how the map looks. See the REST mapping projection page for more information about the projections you can use in SVG Map Viewer. NOTE: The SVG Map Viewer uses REST v2006 for its mapping functionality.

Layers

The Layers widget displays the layer names of the current map. By default, all layers are visible (and therefore the squares next to their names are filled in). To turn off a layer's visibility, click the square next to a layer's name so the square is no longer filled in. Click the square again to turn it back on. You can turn on or off as many layers as you wish.

Styles

You can change the appearance of maps by applying a different map style. Open the Styles widget then click the new style you want for your map.

Displaying your own data on the map

You can display your custom data such as points, lines, polygons, images, or text on the map, creating a "mashup" between your data and the map view.

1. Embed the map control (map_control.js) in a file.
   For example:
   <embed src="gtmap.jsp?IE=.svg" type="image/svg+xml" width='700' height='500' pluginspage="http://www.adobe.com/svg/viewer/install/main.html" />

NOTE: The map control (map_control.js) file is included in the code download. See the next section for details about deploying the sample code.

2. Use the JavaScript functions that come with the SVG Map Viewer to add your own data.

Technical paper on using SVG Map Viewer

View a PDF document describing how to use the SVG Map Viewer to create maps.

Downloading sample code

You can download the Java source code of the SVG Map Viewer and run the application on your machine. To use the sample source code locally, download the code, configure your Web server, and set up your ArcWeb authentication. The sample is written in Java. It assumes you have Tomcat 4.1.xx or greater or Sun Java System 7.0 to serve JSP/Java Web applications and JRE 1.4.x or greater running on your machine. It also assumes you have a supported browser and an activated ArcWeb account.

The download includes two samples that show you how to add your own data to ArcWeb SVG Map Viewer.

• mmash.html and addmashup.js—Add your own lines, polygons, images, and text on the map and animate the map.
• nicecities.html and addbigcities.js— Display your own icons on the map and make the map react to mouse clicks.

These mashup samples use the JavaScript functions defined in the file map_control.js (included in the download). The samples work in Internet Explorer 6.0 and Firefox 1.5. For more information about SVG/HTML communication, see http://wiki.svg.org/Inter-Document_Communication.

NOTE: If you want to build commercial or enterprise solutions using your ArcWeb accounts, it is recommended that you use a server-side implementation of your application. These samples are intended to show the capabilities of the SVG format and how to create simple mashups.

How to use

1. Download the sample Java code (ZIP file).

2. Unzip the sample code ZIP file.

NOTE: After installing the sample, your directory structure should look like the following:

>awswebsvg
 >WEB-INF
  >classes
   >com
    >esri
     >web
      >svglet (contains the class files)
>lib (for all .jar files)
>web.xml

3. Deploy the webapp directory or awswebsvg.war file on your Web server and servlet engine.

NOTE: See How to Configure Your Web Server and Servlet Engine for information on deploying the samples.

4. Replace [ArcWebUserName] and [ArcWebPassWord] in the web.xml file with your ArcWeb user name and password.

NOTE: The ArcWeb token time-out is specified by the tout parameter. The default value is 60 minutes. Valid values are 1–1440 minutes (1440 equals one day). If you get a new token while your application is running, you need to refresh your browser.

5. Restart your Web/application server.

NOTE for Sun Java System users: Make sure you specify a valid directory path for web-app. Invalid entries for web-app will prevent your Sun Java System Web/application server from starting.

6. Invoke the sample in a browser by typing the following URL:

http://<localhost>[:port]/awswebsvg/

For example:

http://myhostname:8080/awswebsvg/

How to Configure Your Web Server and Servlet Engine

This section explains how to configure the following Web servers and servlet engines to deploy the ArcWeb SVG Map Viewer sample.

• Sun Java System (formerly Sun ONE) Application Server 7.0

• Tomcat 4.1.xx or greater

1. Open the Administration interface by typing http://<localhost>[:port]/<Sun Java System installation directory>/admin/ and enter admin user name and password.

2. Open the Applications component under your server instance.

3. Go to the Enterprise Applications, Web Applications, Connector Modules, or EJB Modules page.

4. Click Deploy.

5. Enter the full path to the module or application (or click on Browse to find it), then click OK.

6. Enter Web application name as awswebsvg and Context Root as awswebsvg.

NOTE: You can optionally redeploy the module or application if it already exists by checking the appropriate box.

7. Assign the application or module to one or more virtual servers by checking the boxes next to the virtual server names.

8. Click OK.

9. Go to the directory location of the web-app and search for the file web.xml.

For example:

C:\Sun\AppServer7\domains\domain1\server1\applications\j2ee-module\

10. Continue with How to Use Step 4.

Tomcat 4.1.xx or greater

1. Copy the awswebsvg.war file to \\webapps folder.

2. Stop and start your Apache and Jakarta services and close the Services window.

NOTE: You should now have an awswebsvg folder under \\webapps. This folder is the working folder for your samples.

3. Continue with How to Use Step 4.