More Related Content Similar to ArcGIS Server Javascript API (20) ArcGIS Server Javascript API1. 11/3/2008
Agenda
• ArcGIS API for JavaScript: An Overview
• ArcGIS Server Resource Center
• ArcGIS Server REST API and Services Directory
• Maps, layers, graphics, and tasks
ArcGIS JavaScript API • Advanced tools and customization guidelines
• ArcGIS JavaScript Extensions for the Google Maps API
EWUG, Oct 29-30 and Microsoft Virtual Earth
Evan Marshall
Copyright © 2008 ESRI. All rights reserved. Nohyun Myung Copyright © 2008 ESRI. All rights reserved.
ArcGIS Server 9.3 mashups
Supported Web Clients Google Earth
Desktop
ArcGIS JavaScript API ArcGIS Clients
Virtual EarthGoogle Maps Web Map
Explorer
ArcGIS JavaScript API: Mashup
SOAP
An Overview
Other Web Clients
OpenLayers
Yahoo Pipes
Consumer Mapping
Adobe Flex/Java Fx/Silverlight
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology Selecting a Web mapping technology
• Web mapping application (out of the box) • ArcGIS Web ADF SDKs (.NET or Java)
– No programming skills required – Most sophisticated developer framework for ArcGIS
– Supports multiple data sources including ArcGIS Server (many utilities, classes, extensible task
Server, ArcIMS, and WMS framework)
– Includes many tools/tasks: Identify, overview map – Fully integrated with Visual Studio, NetBeans, and
and magnifier, geocoding, geoprocessing tasks, Eclipse
copyright text, etc. – Requires .NET or Java skills; good for organizations
– Ideal for creating GIS Web applications, as opposed that feel comfortable developing with .NET or Java
to applications targeting general public – Integration with .NET and Java (full security models,
– Ideal for highly skilled desktop users with limited access to databases and other enterprise systems
server and programming skills from the Web tier, access to fine-grained ArcObjects
– Requires .NET or Java environment to run calls)
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
1
2. 11/3/2008
Selecting a Web mapping technology Example Applications - Demos
• ArcGIS API for Flex • Web Mapping Application (Server Manager)
– Similar in functionality to JavaScript API • Flex API Application
– 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. Copyright © 2008 ESRI. All rights reserved.
Selecting a Web mapping technology ArcGIS API for JavaScript: features
• ArcGIS API for JavaScript • Embed maps and tasks from any ArcGIS Server
– Simplest API (lightweight scripting model) into your Web site
– Migration path for Avenue, AML, and ArcIMS HTML • Use content provided by ESRI or use your own
Viewer users; JavaScript is similar in concept and content as a basemap
complexity to those scripting languages
• Map can be in any supported projection
– Free!
– Data sources are limited to ArcGIS Server services • Built on top of Dojo JavaScript toolkit
with a well known coordinate system ID (no custom – Graphics support, community, Dijits
projections; e.g., no ArcIMS or WMS) • Copy and paste HTML and JavaScript to make
– Access to geoprocessing and geolocators your own Web mapping application
– Easily embeddable into any Web site
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
ArcGIS API for JavaScript: functionality ArcGIS API for JavaScript
• Examples • Web-browser based API
– Display an interactive map of your own data – High performance, Runs inside of browser
– Execute a GIS model on the server and display – Web application server (IIS, Apache/Tomcat) not
results needed
– Display your data on ArcGIS Online basemap – Easy-to-use mapping applications
– Search for features or attributes in your GIS data and • Hosted by ESRI on ArcGIS Online and available
display results for free use
– Search for addresses and display results – No development or deployment license required on
the Web server hosting your application
– Flexible release cycle
– Akamai (24/7 Availability)
Copyright © 2008 ESRI. All rights reserved.
• Web Application Acceleration and Performance Management
Copyright © 2008 ESRI. All rights reserved.
2
3. 11/3/2008
Why JavaScript? Example applications - Demos
• One of the most used languages in the world • Site Selection
• Pure client development • Parcel Notification
• 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. Copyright © 2008 ESRI. All rights reserved.
Creating JavaScript mapping Web pages ArcGIS Server Resource Center
5. Preview Web
2. Publish resources
application
• http://resources.esri.com/arcgisserver
to ArcGIS Server
ArcGIS Server
HTML / JS
1. Author Maps /
GP Models
3. Discover 4. Copy/Paste
services using HTML/JS from
Services Resource Center
Copyright © 2008 ESRI. All rights reserved.
Directory Copyright © 2008 ESRI. All rights reserved.
Demo
• Visit the ArcGIS Server Resource Center
• Create your first application from a sample
ArcGIS Server REST API and Services
Directory
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
3
4. 11/3/2008
What is REST? Browser as the command line
• Representational State Transfer • Basemap URL (resource):
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/
• Simple server-side interface Portland/Portland_ESRI_LandBase_AGO/MapServer
• Requests to the REST API are through HTTP • Export Map (operation):
GETS BaseURL/export?bbox=-122.6,45.459,-122.595,45.460&f=image
– Exports a map based on the
parameters specified in the
WFS-T
REST
SOAP
KML
WMS
URL string
Web
Service
Interfaces
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
ArcGIS Server REST API ArcGIS Server 9.3 REST API
• Hierarchy of resources • All GIS services exposed as resources
• Resources and operations – Service-level metadata
• Some resources have operations
– Map service (export, find, identify)
– Map service layers (query)
– Image services (export)
– Geocode service (findAddressCandidates, Reverse
Geocode)
– Geoprocessing service (execute, submitjob)
– Geometry service (project, simplify, and others)
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
ArcGIS Services Directory ArcGIS Services Directory
• Discover information about services
• Understand how to use a service with the
ArcGIS API for JavaScript
• Get additional information about services
– Layers in the map, IDs of the layers used for
querying
– Attribute names
– Spatial reference
• If services are secured, they will require a login
• http://<server>/<instance>/rest/services
– http://www.example.com/arcgis/rest/services
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
4
5. 11/3/2008
Demo
• Visit the sampleserver1 ArcGIS Services
Directory
Maps, layers, and graphics
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Map ArcGISTiledMapServiceLayer
• Typically added using HTML DIV element • Cached map service resource exposed by the
var map = new esri.Map(quot;mapquot;); ArcGIS Server REST API
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer(“..quot;); • Accesses tiles from a cache instead of
map.addLayer(tiledMapServiceLayer); dynamically rendering images
• Width and height come from DIV element var map = new esri.Map(quot;mapquot;);
var tiledMapServiceLayer = new
• Can overlay multiple layers from cached and esri.layers.ArcGISTiledMapServiceLayer(“…quot;);
dynamic services map.addLayer(tiledMapServiceLayer);
• Projected and geographic coordinate systems
must be defined by well-known ID (WKID)
– Listings available at Resource Center
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Demo ArcGISDynamicMapServiceLayer
• Combine multiple tiled layers • Dynamic map service resource exposed by the
• Change size of Map Frame ArcGIS Server REST API
• Generates images on the fly
var map = new esri.Map(quot;mapquot;);
var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…quot;);
map.addLayer(dynamicMapServiceLayer);
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
5
6. 11/3/2008
Layer definitions and dynamic services Combining dynamic and tiled layers
var map = new esri.Map(quot;mapquot;);
• Set layer definitions used to filter features of
//Takes a URL to a map in a map service.
individual layers in the map service
var tiledMapServiceLayer = new
var layerDefinitions = [];
esri.layers.ArcGISTiledMapServiceLayer(“…quot;);
layerDefinitions[0] = quot;POPULATION > 5000000quot;;
map.addLayer(tiledMapServiceLayer);
layerDefinitions[5] = quot;AREA > 100000quot;;
//Takes a URL to a non-cached map service.
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions
); var dynamicMapServiceLayer = new
esri.layers.ArcGISDynamicMapServiceLayer(“…quot;);
• Optionally, use setVisibleLayers to override the //Make the dynamic layer 50% opaque
visibility of layers in the map service dynamicMapServiceLayer.setOpacity(0.5);
dynamicMapServiceLayer.setVisibleLayers([1,4]); //Add the dynamic layer on top of the tiled layer
map.addLayer(dynamicMapServiceLayer);
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Demo GraphicsLayer
• Combine dynamic and tiled layers • Every map has a GraphicsLayer
• Allows graphics to be drawn on top of a map
• Access using Map.Graphics property
var graphicsLayer = map.graphics;
•Can tie events to GraphicsLayer operations
(onClick, onGraphicRemove, etc.)
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Graphic Geometry
• Geometry + Attributes + Symbol + InfoTemplate • Integral part of a graphic
• Allows graphics to be drawn on top of a map • Support for following geometry types:
• Can be drawn by the user as markup or input to – Point
a task – Multipoint
• Can be drawn by the application in response to – Polyline
a task – Polygon
• Exist as vectors in the browser (no additional
requests to the server)
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
6
7. 11/3/2008
Attributes Symbols
• Can contain field attributes of a layer (if it is a • Determine how a graphic looks
result of a task performed on the layer) • Marker, Line, Fill, and Text symbols
• Set geometry and symbology before adding to
the map
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setSize(10);
symbol.setColor(new dojo.Color([255,0,0]));
• Or (by chaining method calls)
var symbol = new
esri.symbol.SimpleMarkerSymbol().setSize(10).setColor
(new dojo.Color([255,0,0]));
• If graphic is created manually, user will need to
assign attributes.
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
InfoWindow and InfoTemplate
• HTML popup
• Often contains attributes of a Graphic
• Can be used to display custom content on a Tasks, geometry services, and Dojo
map
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Tasks Find Task
• API includes classes and methods for common • Search a map service exposed by the ArcGIS
GIS tasks Server REST API based on a string value
– Querying • Can search one or more layers within a service
– Finding addresses
– Finding attributes
– Identifying features
– Geoprocessing
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
7
8. 11/3/2008
Query Task Geometry Service Task
• Performs a query operation on a specific layer • Works with a geometry service resource
in a map service resource exposed by the exposed by the ArcGIS Server REST API
ArcGIS Server REST API • Project, Simplify, Buffer
• Spatial and
attribute filters
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Identify Task Geocode Task
• Performs an identify operation on layers of a • Represents a geocode service resource
map service resource exposed by the ArcGIS exposed by the ArcGIS Server REST API
Server REST API • Geocode (x,y from address)
• Can identify features • Reverse geocode (address from x,y)
in one or more layers
within a service
• Identify geometry can
be point, line,
polygon, or extent
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
Geoprocessor Task Dojo
• Works with any GP Task resource exposed by • Open source DHTML toolkit written in JavaScript
the ArcGIS Server REST API • Handles
• Synchronous or asynchronous – 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/
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
8
9. 11/3/2008
Charting
• Used to create charts and graphs
• Rendered in the browser
• Could use Google Charts API or Dojo Charting
Advanced tools and guidelines for creating
applications
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
JavaScript editing and testing Scripting guidelines
• Fully functional JavaScript debuggers • JSAPIConceptsInsideTheAPICodingGuidelines
– Microsoft Visual Studio 2008 Web Developer Express • Visit the Resource Center to learn more about:
– Mozilla Firefox and Firebug – Loading layers, getting/setting properties, initializing
– Aptana objects, resizing/repositioning the map
– Fiddler – Working with graphics
• Simple text editors – Working with events
– Notepad or other built-in text editors – Working with Dojo
– PSPad – Default API configurations
– Map navigation
• Test application in all target browsers
– Various browsers and versions
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript Extension for the Google Maps API
• Combine GIS content hosted in ArcGIS Server
with Google Maps basemap content
ArcGIS JavaScript Extensions for the
Google Maps API and
Microsoft Virtual Earth
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
9
10. 11/3/2008
ArcGIS JavaScript Extension for the Google Maps API ArcGIS JavaScript Extension for Microsoft Virtual Earth
• Works with cached and dynamic ArcGIS Server • Combine GIS content hosted in ArcGIS Server
services with Virtual Earth basemap content
– REST API
– KML
• Applications can be built in traditional mashup
form or as Google Mapplets
• Tiled maps use WGS 1984 Web Mercator
projection
– WKID: 102113
– Same as Virtual Earth
Copyright © 2008 ESRI. All rights reserved. Copyright © 2008 ESRI. All rights reserved.
ArcGIS JavaScript Extension for Microsoft Virtual Earth
• Works with cached ArcGIS Server services
– Cache must be fused
• Content (VE shapes, tiles) can be viewed in 2D
or 3D Thank You
• Tiled maps use WGS 1984 Web Mercator
projection
– WKID: 102113
– Same as Google Maps ESRI
380 New York Street
Redlands, California
92373-8100 USA
Phone: 909-793-2853
Fax: 909-793-5953
E-mail: info@esri.com
Copyright © 2008 ESRI. All rights reserved.
10