Getting Started with the ArcGIS Server JavaScript API

Agenda

• Introduction– ArcGIS Server services and mashups

• REST API– Services Directory

• JavaScript API– ArcGIS Server Resource Center– Dojo

• Maps, layers, graphics• Tasks• Extensions for the Google Maps API and Microsoft Virtual Earth• Resources

ArcGIS Server 9.3 mashups

DesktopSupported Web ClientsArcGIS Clients

Consumer Mapping

ArcGIS JavaScript APIArcGIS API for Flex

Virtual Earth\Google Maps

Google Earth

Explorer

OpenLayers

Web Map

Yahoo Pipes

Other Web Clients

GIS Services

• ArcGIS Server has a rich set of GIS Services– Used for both display and analysis

• GIS Services can be accessed via REST or SOAP• Build applications in your choice of programming language and

application framework– This session focuses on JavaScript API

GIS ServicesSecurity

• ArcGIS Server security is handled server-side– Services are organized into folders– Permissions on folders and on individual services– Services inherit permissions from containing folder

• Security for a GIS service applies to all supported Web interfaces– SOAP, REST, OGC

• Desktop, Explorer, JavaScript and Web ADF applications can consume secure services

ArcGIS JavaScript API and REST

• ArcGIS JavaScript API communicates with GIS Services via REST– Each GIS service is exposed to consumers as an independent GIS

Web Service accessible over HTTP via SOAP or REST • REST stands for Representational State Transfer• Simple server-side interface• Requests to the REST API are through HTTP GETS

\WebServiceInterfaces

RES

T

WM

S

WFS

-T

KM

L

SOAP

ArcGIS Services Directory

D

REST API Admin

• Clear Cache Options– Clear Cache Now– Configure Clear Cache Policies

• Clear REST API Cache when you add, delete or update services• Only agsadmin users can login (same as Manager)

http://<host>:<port>/arcgis/rest/admin

D

ArcGIS JavaScript API

• Web-browser based API– High performance– Easy-to-use mapping applications

• Hosted by ESRI on ArcGIS Online and available for free use– No development or deployment license required on the Web server

hosting your application– Flexible release cycle– Akamai (24/7 Availability)

• Web Application Acceleration and Performance Management

Example applications

• http://mapapps.esri.com/serverdemos/siteselection/index.html

• http://mapapps.esri.com/serverdemos/mailinglist/index.html

D

ArcGIS JavaScript APIWhat It Is

• Maps• Graphics• Tasks

– QueryTask– Locator– FindTask– IdentifyTask– Geoprocessor– Geometry

ArcGIS JavaScript APIWho is it For?

• Great for those familiar with ArcIMS HTML/JavaScript customization

• Great for those that are not programmers– Scripting, not programming– Smaller object model to work with

• Does very few things but very well– Sufficient for most projects

ArcGIS JavaScript APICapabilities

• Embed maps and tasks from any ArcGIS Server into your website

• Use content provided by ESRI and/or use your own content as a basemap

• Map can be in any supported projection– This is a big advantage

• Built on top of Dojo JavaScript toolkit

Dojo

• Open source DHTML toolkit written in JavaScript• Handles

– Core ArcGIS API for JavaScript functionality– Browser differences– Vector graphics support, visual effects, widgets– AJAX and JSON support

• Take advantage of full Dojo toolkit, not just Dojo commands exposed through JavaScript API

• http://dojotoolkit.org/

ArcGIS Server Resource Center

• http://resources.esri.com/arcgisserver

D

Map

• Typically added using HTML DIV element

var map = new esri.Map("map");

• Width and height come from DIV element• Can overlay multiple layers from cached and dynamic services• Projected and geographic coordinate systems must be defined by

well-known ID (WKID) – Listings available at Resource Center

Map Service Layers

• Cached or dynamic map service resource exposed by the ArcGIS Server REST API

var map = new esri.Map("map");

var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(“…");

map.addLayer(tiledMapServiceLayer);

var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(“…");

map.addLayer(dynamicMapServiceLayer);

D

Map Projection Considerations

• No projection on-the-fly– All map services must be in the same projection to display correctly

• Possible to reproject analytical results using geometry service– Any set of geometries can be reprojected– Full service layer cannot be reprojected

• ArcGIS Online uses WGS84– WKID 4326

Graphic

• Allows graphics to be drawn on top of a map• Can be drawn by the user as markup or input to a task• Can be drawn by the application in response to a task• Exist as vectors in the browser

• Geometry + Attributes + Symbol + InfoTemplate

Simplifying data when using graphics

• Limit number of vertices sent from ArcGIS Server to web browser

D

InfoWindow and InfoTemplate

• HTML popup• Often contains attributes of a Graphic• Can be used to display custom content on a map

Tasks

• API includes classes and methods for common GIS tasks– Querying – Finding addresses – Finding attributes – Identifying features – Geoprocessing

Example Tasks: Geocoding

• Represents a geocode service resource exposed by the ArcGIS Server REST API

• Geocode (x,y from address)• Reverse geocode (address from x,y)

D

ArcGIS JavaScript ExtensionsGoogle Maps and Microsoft Virtual Earth

• Combine ArcGIS Server content with Google Maps or Virtual Earth – Initialize Google or Virtual Earth map instead of ArcGIS Server map

• Both maps use WGS 1984 Web Mercator projection• ArcGIS Server dynamic services reprojected by API to WGS 1984

Web Mercator projection• Virtual Earth services also available via ArcGIS Online• Services can be viewed in 2D and 3D in Virtual Earth client

ArcGIS JavaScript API – What do you need to know?

• Online SDK– http://resources.esri.com/arcgisserver/apis/javascript/arcgis– Sample driven– Code gallery– Samples powered by an ArcGIS Server sample server

• http://sampleserver1.arcgisonline.com/arcgis/rest/services• http://sampleserver2.arcgisonline.com/arcgis/rest/services

• JavaScript hosted by ESRI– http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2– Flexible release cycle– Hosted by ArcGIS Online

• 24/7

• Sample JavaScript ViewerArcGIS JavaScript API Resource Center > Code Gallery > Sample

JavaScript ViewerD