Welcome to ArcGIS Server 9.3.1: Creating Fast Web Mapping Applications With JavaScript Scott Moore ESRI Olympia, WA smoore@esri.com
Seminar agenda ArcGIS API for JavaScript: An Overview ArcGIS Server Resource Center ArcGIS Server REST API and Services Directory Maps, layers, and graphics Tasks, geometry services, and Dojo Advanced tools and customization guidelines ArcGIS JavaScript Extensions for the Google Maps API and Microsoft Virtual Earth Discussion and Tips and Tricks Throughout!
ArcGIS API for JavaScript: An Overview
ArcGIS Server 9.3.1 mashups Supported Web Clients ArcGIS JavaScript API Virtual Earth\Google Maps Google Earth Desktop ArcGIS Clients Web Map Explorer Mashup SOAP Other Web Clients OpenLayers Yahoo Pipes Adobe Flex/Java Fx/Silverlight Consumer Mapping
ArcGIS API for JavaScript Web-browser 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
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
Example applications King County Road Alert Parcel Notification
Creating JavaScript mapping Web pages 2. Publish resources to ArcGIS Server 5. Preview Web application ArcGIS Server HTML / JS 1. Author Maps / GP Models 3. Discover services using Services Directory 4. Copy/Paste HTML/JS from Resource Center
ArcGIS Server Resource Center http://resources.esri.com/arcgisserver
Javascript Sample Viewer Configure vs. Program Template Sample Viewer Demo
ArcGIS Server REST API and Services Directory
What is REST? Representational State Transfer Simple server-side side interface Requests to the REST API are through HTTP GETS Everything is a URL! SOAP REST WMS WFS-T KML Web Service Interfaces \
SOAP vs. REST Great Keynote at Developers Summit http://www.esri.com/events/devsummit/session s/keynote.html
Browser as the command line Basemap URL (resource): http://sampleserver1.arcgisonline.com/arcgis/rest/services/ Portland/Portland_ESRI_LandBase_AGO/MapServer Export Map (operation): BaseURL/export?bbox=-122.6,45.459,-122.595,45.460&f=image Exports a map based on the parameters specified in the URL string
ArcGIS Server REST API Hierarchy of resources Resources and operations
ArcGIS Server 9.3 REST API All GIS services exposed as resources 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) Network Analyst (New at 9.3.1)
ArcGIS Server 9.3 REST API Results of operations can be returned as: HTML (Services Explorer default) IMAGE (direct streamed image) KML (Google Earth, Google Maps, Virtual Earth) JSON (developer)
ArcGIS Server 9.3 REST API clients ArcGIS JavaScript APIs Flex/Silverlight APIs Web developers (outside of JavaScript APIs) KML Web developers Many other possibilities Mashup integration platforms (Yahoo! Pipes, MS Popfly, others) Other programming languages (Ruby, Python,.NET, Java, PHP, etc.)
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
REST API Admin http://<host>:<port>/arcgis/rest/admin Currently supports 2 administrative options Clear Cache Options Clear Cache Now Configure Clear Cache Policies Important Note: Always clear the REST API Cache whenever you add, delete or update services Access to REST Admin is secured Only agsadmin users can login (same as Manager)
Demo Visit the sampleserver1 ArcGIS Services Directory
Maps, layers, and graphics
Map Typically added using HTML DIV element var map = new esri.map("map"); var tiledmapservicelayer = new esri.layers.arcgistiledmapservicelayer(.."); map.addlayer(tiledmapservicelayer); 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
ArcGISTiledMapServiceLayer Cached map service resource exposed by the ArcGIS Server REST API Accesses tiles from a cache instead of dynamically rendering images var map = new esri.map("map"); var tiledmapservicelayer = new esri.layers.arcgistiledmapservicelayer( "); map.addlayer(tiledmapservicelayer);
Demo Combine multiple tiled layers
ArcGISDynamicMapServiceLayer Dynamic map service resource exposed by the ArcGIS Server REST API Generates images on the fly var map = new esri.map("map"); var dynamicmapservicelayer = new esri.layers.arcgisdynamicmapservicelayer( "); map.addlayer(dynamicmapservicelayer);
Layer definitions and dynamic services Set layer definitions used to filter features of individual layers in the map service var layerdefinitions = []; layerdefinitions[0] = "POPULATION > 5000000"; layerdefinitions[5] = "AREA > 100000"; dynamicmapservicelayer.setlayerdefinitions(layerdefinitions ); Optionally, use setvisiblelayers to override the visibility of layers in the map service dynamicmapservicelayer.setvisiblelayers([1,4]);
Combining dynamic and tiled layers var map = new esri.map("map"); //Takes a URL to a map in a map service. var tiledmapservicelayer = new esri.layers.arcgistiledmapservicelayer( "); map.addlayer(tiledmapservicelayer); //Takes a URL to a non-cached map service. var dynamicmapservicelayer = new esri.layers.arcgisdynamicmapservicelayer( "); //Make the dynamic layer 50% opaque dynamicmapservicelayer.setopacity(0.5); //Add the dynamic layer on top of the tiled layer map.addlayer(dynamicmapservicelayer);
Demo Combine dynamic and tiled layers
Custom Layers (Dynamic or Tiled) Leverage other technologies easily in the Javascript API WMS, IMS, Other Tiled Services (9.2 Server) Demo
GraphicsLayer Allows graphics to be drawn on top of a map Every map has a GraphicsLayer Access using Map.Graphics property var graphicslayer = map.graphics;
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
Symbols Determine how a graphic looks 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]));
Geometry Integral part of a graphic Support for following geometry types: Point Multipoint Polyline Polygon Extent
InfoWindow and InfoTemplate HTML popup Often contains attributes of a Graphic Can be used to display custom content on a map
Demo http://smoore-oly/js/dnr/dnr.htmoly/js/dnr/dnr.htm http://serverx.esri.com/arcgisjavascriptapi/co degallery/countythematic.html
Simplifying data when using graphics Limit number of vertices transferring from ArcGIS Server to Web browser
Renderers! Javascript API provides functionality to symbolize your map graphics Unique Value Renderer Class Breaks Renderer
Multiple Graphics Layers Javascript API provides functionality to manage your map graphics Demo
Browser Performance (multiple tests) Betanews.com
Improve IE User Experience Test your application (especially) in Internet Explorer map = new esri.map("map", {displaygraphicsonpan:!dojo.isie }); Demo (Firefox vs. IE)
Tasks, geometry services, and Dojo
Tasks API includes classes and methods for common GIS tasks Querying Finding addresses Finding attributes Identifying features Geoprocessing
Find Task Search a map service exposed by the ArcGIS Server REST API based on a string value Can search one or more layers within a service
Query Task Performs a query operation on a specific layer in a map service resource exposed by the ArcGIS Server REST API Spatial and attribute filters
Geometry Service Task Works with a geometry service resource exposed by the ArcGIS Server REST API Project, Simplify, Buffer
Demo Examine a Query Task and Geometry Service
Using a proxy page You need a proxy page when Application creates requests that exceed the URL length limit imposed by the browser (2000 characters) Application uses a service that is secured with token- based authentication, and you want to keep the token secure For ASP.NET: esri.config.defaults.io.proxyurl = "proxy.ashx"; For Java/JSP: esri.config.defaults.io.proxyurl = "proxy.jsp";
Identify Task Performs an identify operation on layers of a map service resource exposed by the ArcGIS Server REST API Can identify features in one or more layers within a service Identify geometry can be point, line, polygon, or extent
Connecting to events Loading the page, clicking the mouse, executing a task, and many other actions all trigger events Can have multiple handlers for each event To connect to an event: var myonclick_connect = dojo.connect(map, "onclick", myonclickhandler); To disconnect from an event: dojo.disconnect(myonclick_connect);
Demo Identify Task Identify Dijit Sample
Geocode Task Represents a geocode service resource exposed by the ArcGIS Server REST API Geocode (x,y from address) Reverse geocode (address from x,y)
Demo Geocode Service
Geoprocessor Task Works with any GP Task resource exposed by the ArcGIS Server REST API Synchronous or asynchronous
Demo Find Water Pressure http://smoore-oly/js/spu/spu2.htmoly/js/spu/spu2.htm Geocode an Excel Spreadsheet http://nwtech.esri.com/javascript/geocode/geoc odeexcel.htm
Network Analyst Task Support for ArcGIS Network Analyst Route Layers via ArcGIS Server 9.3.1 Demo 1 Demo 2 Demo 3
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/
Dojo grid control Used to create interactive data grids Rendered in the browser
FeatureSet DataStore DataGrid Demo Convert FeatureSet to FileItemReadStore dojo.foreach(featureset.features, function(feature) {... items.push(dojo.mixin({}, feature.attributes)); }); var data = { identifier: "OBJECTID", //unique id label:featureset.displayfieldname, //name field or display items: items }; //set items store = new dojo.data.itemfilereadstore({ data:data }); Use FileItemReadStore in DataGrid grid.setstore(store, {OBJECTID:"*"});
Dojo charting Used to create charts and graphs Rendered in the browser Could use Google Charts instead
Demo http://www.dojotoolkit.org/ http://resources.esri.com/arcgisserver/apis/java script/arcgis/index.cfm?fa=codegallerydetails& scriptid=15998
Printing Server side web application creates merged image (.NET or PHP) Resource Center Demo
Printing: Application Flow Graphics + Layers Client side Web Application Page Layout Page with printable elements Layers Output image Export Map Merge Images Output File Output folder Image URL Export Map Images http://myserver.com/... http://sampleserver1.arcgisonline.com/... http://server.arcgisonline.com/...
Table of Contents and Legends Table of Contents Sample Custom Legend Service or Static Legend
Animation Tsunami Demo
Advanced tools and guidelines for creating applications
JavaScript editing and testing Fully functional JavaScript debuggers Microsoft Visual Studio 2008 Web Developer Express Mozilla Firefox and Firebug Aptana Simple text editors Notepad or other built-in in text editors PSPad Test application in all target browsers Various browsers and versions
Scripting guidelines Visit the Resource Center to learn more about: Loading layers, getting/setting properties, initializing objects, resizing/repositioning the map Working with graphics Working with events Working with Dojo Default API configurations Map navigation
Demo Firebug Use Visual Studio Web Developer Express 2008 and script debugging in Internet Explorer Aptana
ArcGIS JavaScript Extensions for the Google Maps API and Microsoft Virtual Earth
ArcGIS JavaScript Extension for the Google Maps API Combine GIS content hosted in ArcGIS Server with Google Maps basemap content
ArcGIS JavaScript Extension for the Google Maps API Works with cached and dynamic ArcGIS Server services 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
ArcGIS JavaScript Extension for Microsoft Virtual Earth Combine GIS content hosted in ArcGIS Server with Virtual Earth basemap content
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 Tiled maps use WGS 1984 Web Mercator projection WKID: 102113 Same as Google Maps
Demo http://smoore-oly/js/swig/swiggoogle.htmoly/js/swig/swiggoogle.htm
Virtual Earth Tiles in the ArcGIS JS API Access Microsoft VE Tiled Basemaps in the core ArcGIS Javascript API Demo (VPN Required)
Want to Learn More? Free Web Training Seminar Building Mashups Using the ArcGIS JavaScript APIs Instructor-Led Training Introduction to ArcGIS Server New Course Specific to Javascript API Coming Soon!
Javascript Links Essential Javascript - A Javascript Tutorial http://www.comptechdoc.org/independent/web/cgi/ja vamanual/ http://www.w3schools.com/jsref/default.asp http://javascript.crockford.com/
Dojo Links http://dojotoolkit.org/key-linkslinks Dojo Feature Explorer http://www.sitepen.com/labs/dojo.php http://archive.dojotoolkit.org/nightly/checkout/ (Great source for learning how to use dijits and dojox widgets, check out the tests folder) http://www.roseindia.net/dojo/ 10 helpings of Dojo goodness
Summary Start at the Resource Center Concepts View the samples Community Pick a basemap Install Firefox/Firebug and/or Visual Studio (Web Developer Express 2008 Free!) Learn UI (Dijits/Layouts) options available from Dojo Setup a proxy page
Thank You Scott Moore smoore@esri.com ESRI 380 New York Street Redlands, California 92373-8100 USA Phone: 909-793-2853 Fax: 909-793-5953 E-mail: info@esri.com