Welcome to ArcGIS Server 9.3.1: Creating Fast Web Mapping ...

Welcome to ArcGIS Server 9.3.1: Creating Fast Web Mapping Applications With JavaScript Scott Moore ESRI – Olympia, WA [email protected]

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

Google Earth

Desktop

ArcGIS JavaScript API Virtual Earth\Google Maps

ArcGIS Clients Web Map Explorer

Mashup

Other Web Clients OpenLayers

Yahoo Pipes

Adobe Flex/Java Fx/Silverlight

Consumer Mapping

SOAP

ArcGIS API for JavaScript • Web Web--browser based API – High performance – Easy Easy--toto-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 5. Preview Web application

2. Publish resources to ArcGIS Server

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 serverserver-side interface • Requests to the REST API are through HTTP GETS

Web Service Interfaces

\

KML

WFS-T

WMS

REST

SOAP

• Everything is a URL!

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 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— 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:////rest/services – http://www.example.com/arcgis/rest/services

REST API Admin •http://:/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 wellwell-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(“…"); 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(“…"); 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 nonnon-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(). esri.symbol.SimpleMarkerSymbol ().setSize setSize(10). (10).setColor setColor (new dojo.Color([255,0,0])); 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 http://smoore--oly/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 esri.Map("map", ("map", { {displayGraphicsOnPan displayGraphicsOnPan: : !dojo.isIE !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 tokentokenbased 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, dojo.connect(map, " "onClick onClick", ", myOnClickHandler); myOnClickHandler );

• To disconnect from an event: dojo.disconnect( dojo.disconnect (myOnClick_connect 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 http://smoore--oly/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 Client side Web Application Page Graphics + Layers

Layout Page with printable elements Layers

Image URL

http://myserver.com/... Export Map Merge Images Output File Output image

Output folder

http://sampleserver1.arcgisonline.com/...

Export Map Images

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 builtbuilt-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 http://smoore--oly/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 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 http://dojotoolkit.org/key--links • 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 (Dijits/Layouts) /Layouts) options available from Dojo • Setup a proxy page

Thank You Scott Moore [email protected]

ESRI 380 New York Street Redlands, California 92373-8100 USA Phone: 909-793-2853 Fax: 909-793-5953 E-mail: [email protected]