arcgis api for javascript - kcaiug.missouri.edu
TRANSCRIPT
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript
Dan Haag
ESRI
Copyright © 2008 ESRI. All rights reserved.
Agenda
• ArcGIS API for JavaScript: An Overview
• ArcGIS Server Resource Center
• ArcGIS API for JavaScript: Details
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript:
An Overview
Copyright © 2008 ESRI. All rights reserved.
ArcGIS Server 9.3 mashups
Desktop
Supported Web Clients
ArcGIS Clients
Consumer Mapping
Mashup
ArcGIS JavaScript API
Virtual Earth\Google Maps
Google Earth
Explorer
OpenLayers
Web Map
Yahoo Pipes
Adobe Flex/Java Fx/Silverlight
Other Web Clients
SOAP
Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology
• Web mapping application
– No programming skills required
– Supports multiple data sources including ArcGIS
Server, ArcIMS, and WMS
– Includes many tools/tasks: Identify, overview map
and magnifier, geocoding, geoprocessing tasks,
copyright text, etc.
– Ideal for creating GIS Web applications, as opposed
to applications targeting general public
– Ideal for highly skilled desktop users with limited
server and programming skills
– Requires .NET or Java environment to run
Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology
• ArcGIS Web ADF SDKs (.NET or Java)
– Most sophisticated developer framework for ArcGIS
Server (many utilities, classes, extensible task
framework)
– Fully integrated with Visual Studio, NetBeans, and
Eclipse
– Requires .NET or Java skills; good for organizations
that feel comfortable developing with .NET or Java
– Integration with .NET and Java (full security models,
access to databases and other enterprise systems
from the Web tier, access to fine-grained ArcObjects
calls)
Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology
• ArcGIS API for JavaScript
– Simplest API (lightweight scripting model)
– Migration path for Avenue, AML, and ArcIMS HTML
Viewer users; JavaScript is similar in concept and
complexity to those scripting languages
– Free!
– Data sources are limited to ArcGIS Server services
with a well known coordinate system ID (no custom
projections; e.g., no ArcIMS or WMS)
– Access to geoprocessing and geolocators
– Easily embeddable into any Web site
Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology
• ArcGIS API for Flex
– Similar in functionality to JavaScript API
– Supports ArcGIS Server services with well known
coordinate system ID and ArcIMS services
– Free!
– Integrated with Adobe Flex Builder (requires Flex
skills)
– Easily embeddable into any Web site
– Ideal for users who understand Web design and have
Flash/Flex expertise
– Build rich Internet applications on top of best GIS
server
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript: features
• Embed maps and tasks from any ArcGIS Server
into your Web site
• Use content provided by ESRI or use your own
content as a basemap
• Map can be in any supported projection
• Built on top of Dojo JavaScript toolkit
– Graphics support, community, Dijits
• Copy and paste HTML and JavaScript to make
your own Web mapping application
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript: functionality
• Examples
– Display an interactive map of your own data
– Execute a GIS model on the server and display
results
– Display your data on ArcGIS Online basemap
– Search for features or attributes in your GIS data and
display results
– Search for addresses and display results
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript
• 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
Copyright © 2008 ESRI. All rights reserved.
Why JavaScript?
• One of the most used languages in the world
• Pure client development
• JavaScript frameworks abstract away browser
complexity (Dojo)
• Stability
– No new changes since 1999
• Path for HTML Viewer (ArcIMS) developers
Copyright © 2008 ESRI. All rights reserved.
Example applications
• Site Selection
• Parcel Notification
Copyright © 2008 ESRI. All rights reserved.
Creating JavaScript mapping Web pages
ArcGIS Server
1. Author Maps /
GP Models
2. Publish resources
to ArcGIS Server
3. Discover
services using
Services
Directory
4. Copy/Paste
HTML/JS from
Resource Center
5. Preview Web
application
HTML / JS
Copyright © 2008 ESRI. All rights reserved.
ArcGIS Server Resource Center
• http://resources.esri.com/arcgisserver
Copyright © 2008 ESRI. All rights reserved.
Demo
• Visit the ArcGIS Server Resource Center
• Create an application from a sample
Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript:
Details
Copyright © 2008 ESRI. All rights reserved.
What is in the JavaScript API?
• Maps
• Graphics
• Tasks
– QueryTask
– Locator
– FindTask
– IdentifyTask
– Geoprocessor
– Geometry
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – Map Navigation
• Drag the mouse to pan
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• SHIFT + Drag the mouse to zoom in
• SHIFT + CTRL + Drag the mouse to zoom out
• SHIFT + Click to recenter
• SHIFT + Double Click to Center and Zoom in
• Use arrow keys to pan
• Use + key to zoom in a level
• Use - key to zoom out a level
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – Map Navigation
• Slider
• Pan Navigation Arrows
• Navigation Toolbar
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API -- GraphicsLayer
• Graphics (geometry + attributes + symbol +
InfoTemplate)
• Mouse Events on GraphicLayer
– onClick, onMouseIn, onMouseOut, onMouseOver
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API -- Tasks
• Tasks
– QueryTask
– Locator
– FindTask
– IdentifyTask
– GeometryService
– Geoprocessor (synchronous or asynchronous)
• As data or as map image
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – QueryTask
• QueryTask works off a single layer in a map
service
• You can query by attribute or geometry or both
• You can make use of rich spatial relationships
when querying by geometry
– Intersects, contains, touches, crosses, and others
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – QueryTask
• Query Geometry: Point
• Query Relationship: Intersects
• Layer Geometry: Polygon
• Query Geometry: Polygon
• Query Relationship: Intersects
• Layer Geometry: Polygon
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – QueryTask
• Query Geometry: Polygon
• Query Relationship: Contains
• Layer Geometry: Polygon
• Query Geometry: Polygon
• Query Relationship: Touches
• Layer Geometry: Polygon
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – IdentifyTask & Find
• Identify by geometry on multiple layers in a map service
– Input Geometry can be Point, Polyline, Polygon, &
Mulitpoint
– Filter by spatial relationships (intersects, contains, etc.)
– Can specify a tolerance
• Find by attribute against mulitple layers in a map service
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – Locator & Geometry
• Access ArcGIS Server Locators
– Geocode and Reverse Geocode
• Perform geometric operations on the server
– Buffer, Simplify, Areas and Lengths, Lengths,
Project
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API – Geoprocessor
• Access ArcGIS Server Geoprocessing Tasks
– Synchronous and Asynchronous
– Results as data or as map image
– Geoprocessing Service corresponds to a Toolbox
– Geoprocessing Task corresponds to a Model in a Toolbox
Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript API Applications
• Can be a very complete user application
• Client Side Thematic Mapping
• Strong symbology model
Copyright © 2008 ESRI. All rights reserved.
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
• Blog:
http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=blog
• Live training seminar:
http://training.esri.com/acb2000/showdetl.cfm?DID=6&Product_ID=929
• JavaScript hosted by ESRI
– http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2
– Flexible release cycle
– Hosted by ArcGIS Online
• 24/7