ArcGIS JavaScript API
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 Google Earth
Supported Web Clients ArcGIS JavaScript API
Desktop ArcGIS Clients
ArcGIS API for Flex
Web Map
Virtual Earth\Google Maps Explorer
Other Web Clients OpenLayers
Yahoo Pipes
Consumer Mapping
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 Services Security
• 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
Web Service Interfaces
\
KML
WFS-T
WMS
REST
SOAP
• REST stands for Representational State Transfer • Simple server-side interface • Requests to the REST API are through HTTP GETS
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://:<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/s erverdemos/siteselection/i ndex.html • http://mapapps.esri.com/s erverdemos/mailinglist/ind ex.html
D
ArcGIS JavaScript API What It Is
• Maps • Graphics • Tasks – QueryTask – Locator – FindTask – IdentifyTask – Geoprocessor – Geometry
ArcGIS JavaScript API Who 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 API Capabilities
• 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
• Geometry + Attributes + Symbol + InfoTemplate • • • •
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
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 Extensions Google 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 Viewer D
ArcGIS JavaScript API Resource Center > Code Gallery > Sample JavaScript Viewer
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 Google Earth
Supported Web Clients ArcGIS JavaScript API
Desktop ArcGIS Clients
ArcGIS API for Flex
Web Map
Virtual Earth\Google Maps Explorer
Other Web Clients OpenLayers
Yahoo Pipes
Consumer Mapping
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 Services Security
• 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
Web Service Interfaces
\
KML
WFS-T
WMS
REST
SOAP
• REST stands for Representational State Transfer • Simple server-side interface • Requests to the REST API are through HTTP GETS
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://:<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/s erverdemos/siteselection/i ndex.html • http://mapapps.esri.com/s erverdemos/mailinglist/ind ex.html
D
ArcGIS JavaScript API What It Is
• Maps • Graphics • Tasks – QueryTask – Locator – FindTask – IdentifyTask – Geoprocessor – Geometry
ArcGIS JavaScript API Who 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 API Capabilities
• 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
• Geometry + Attributes + Symbol + InfoTemplate • • • •
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
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 Extensions Google 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 Viewer D
ArcGIS JavaScript API Resource Center > Code Gallery > Sample JavaScript Viewer
