You are here: Using ArcWeb Explorer JavaScript > AWX JavaScript Quick-Start Guide

ArcWeb Explorer JavaScript Quick-Start Guide

This Quick-Start Guide shows how to do the following:

Embed ArcWeb Explorer in a Web page: See the instructions for embedding ArcWeb Explorer in your Web page.
View the samples: See the samples to learn how to show a map, add a marker, find locations, show and hide the map widgets, and work with group layers using AWX JavaScript.

View a demo: Build a Web Mapping Application in Less Than One Hour

NOTE: See the 3 Steps in one hour article for tips on building a business intelligence application using ArcWeb Explorer JavaScript API.

Embedding ArcWeb Explorer in a Web page

Requirements

Web server to serve the Web page containing your mapping application
Register your application URL and obtain an ArcWeb Explorer API Key

Embedding instructions

There are four things needed to embed ArcWeb Explorer in a Web page. The following basic map sample includes all four: script element pointing to the ArcWeb Explorer JavaScript library, your ArcWeb Explorer API Key, a body element to load the map, and a div tag to indicate where the map will load.

<html>
<head>
<title>ArcWeb Explorer</title>

<script src="http://www.arcwebservices.com/awx/awxapi-1.0.js" type="text/javascript"></script>

<script type="text/javascript">

function onBodyLoad()
{
AWUtils.insertMap("explorer", "<ArcWeb Explorer API Key>");
}
function onCreationComplete()
{
var myExplorer = new AWMap("explorer");
var myLatLon = new AWLatLon(42.367044, -71.052742);
myExplorer.centerAndScale(myLatLon, 10000);
}
</script>
</head>
<body onload="onBodyLoad()">
<center>
<div id="explorer" style="width:800px; height:600px;">You need <a href="http://www.adobe.com/shockwave/download/alternates/">Adobe Flash Player 8 or higher to view this page.</div>
</center>
</body>
</html>

Include the ArcWeb Explorer JavaScript library. It contains the objects that enable you to interact with the map through JavaScript.

<script src="http://www.arcwebservices.com/awx/awxapi-1.0.js" type="text/javascript"></script>

You also can use the awxapi-no-prototype-1.0.js library that does not use the Prototype library.
Replace <ArcWeb Explorer API Key> with the API Key you received when you registered your application URL and obtained an ArcWeb Explorer API Key.

AWUtils.insertMap("explorer", "<ArcWeb Explorer API Key>");
Include an onload event on the body element to load the ArcWeb Explorer SWF map.

<body onload="onBodyLoad()">
Indicate where the map will be loaded using the div tag.

<div id="explorer" style="width:800px; height:600px;">You need <a href="http://www.adobe.com/shockwave/download/alternates/">Adobe Flash Player 8 or higher to view this page.</div>

Once ArcWeb Explorer is embedded in your Web page, use the following samples to get started using AWX JavaScript.

Samples

Requirements

A text editor
Adobe's Macromedia Flash 8 Player plug-in or higher in the Web browser

Quick-Start samples

The following samples are designed to get you up and running quickly using ArcWeb Explorer with JavaScript API. These basic samples demonstrate the interaction of JavaScript with ArcWeb Explorer.

For each sample, click the title to view an interactive map sample. Click the source to view the code for the sample.

NOTE: See Samples—terms and conditions for usage permissions.

Title	Description	Source
Show Map	The "Hello World" example of a mapping API; these are my coordinates, give me a map.
Add Marker	View a typical mapping mashup. Points of interest are displayed on the map with appropriate labels.
Query Group Layer	Quickly develop powerful mapping applications with your custom data layers. This sample shows a Query Group Layer that uses points of interest in New York City.
Widgets	Use navigation, find, and route map widgets with the map. This sample demonstrates how to include or remove widgets from your map.
Switch Map Type	View the different map types that can be generated using the API and dynamically switch between them on the client side. The different map types are Vector, Raster, and Hybrid.
Overlay	Overlay different map types to create a composite map. In this sample, weather information is overlaid on a vector map.
Find Location	Places points of interest on the map in this more advanced mashup; you only have to provide an address, a phone number or an IP address. The API allows you to automatically geocode the address and plot it on the map.
AJAX Markers	Add markers to your map from an XML file using AJAX. See the XML file referenced in this sample. This file must be stored on the local server.
AWX without the Prototype library	Use a version of the ArcWeb Explorer JavaScript library (awxapi-no-prototype-1.0.js) that does not use the Prototype library used in awxapi-1.0.js.

For more information

See the Quick-Start Plus Guide for samples with enhanced functionality, such as routing and how to obtain map information. In addition, view the ArcWeb Explorer JavaScript API (JSdoc) for a full description of the API classes and functions.

Visit the Feedback page to give comments or suggestions about the ArcWeb Developer's Guide.

ArcWeb site | ArcWeb support | support.esri.com