Getting Started with the Arcgis Web Apis Ben Ramseth, Lloyd Heberlie, Andy Gup What We Want to Cover

Getting Started with the ArcGIS Web APIs Ben Ramseth, Lloyd Heberlie, Andy Gup What we want to cover

• What is Web GIS • Integration with ArcGIS Server • Look at our three Web APIs • Samples • Tips and Tricks Your Presenters for Today

• Ben Ramseth, Instructor Technical Lead, CTT+

• Lloyd Heberlie, Product Engineer, Flex API @lheberlie

• Andy Gup, Technical Lead - Web APIs, Esri Developer Network @agup Who are you?

*Image from Microsoft Clip Art What is Web GIS?

Andy Gup ArcGIS Server – Works with many different clients

ArcGIS .Net Java Explorer iPhone

Open Street Map ArcGIS Desktop SAP Flex/Flash Android

Google Earth Microsoft Silverlight

Bing Maps ArcMap

PHP Ruby JavaScript Python ArcGIS Mobile OpenLayers http://www.esri.com/services/disaster-response/floods/latest-news-map.html http://edn1.esri.com/antarctica http://gis.greeleygov.com/origin/propinfo.html http://maps.bouldercounty.org/boco/emapping/ resources.arcgis.com ArcGIS Server - Architecture

Client Web GIS Data APIs Services Services

Mobile

Javascript Map Services REST File Filesystems JSON Geoprocessing Services IO Flex XML SOAP AMF SQL KML Geocoding Services OGC Silverlight Geodatabases What is a GIS Service?

ArcGIS Server Map Service Edit

Map Service Use Endpoint

Display ArcGIS Server – GIS Services

Mapping Geometry

Search Feature Image

Geocode Geodata ArcGIS Server Globe OGC

Geoprocessing KML Network Analysis

http://esriurl.com/arcgisservices How do I get my data into an app? Web Services!

REST

SOAP

OGC

*Image from Microsoft Clip Art Example ArcGIS REST API Architecture

REST

JSON, XML etc Web Server

lyr, msd, mxd, etc. ArcGIS Client API ArcGIS Desktop

ArcGIS Server

Geodatabase Example REST API usage

URL-based requests (GET or POST)

Format works with all client-side application languages

http://sampleserver1.arcgisonline.com/ArcGIS/rest/servi ces/Specialty/ESRI_StateCityHighway_USA/MapServer/expor t?bbox=-127.8,15.4,-63.5,60.5&f=pjson

ArcGIS Services Directory In the browser: ArcGIS Web APIs

JavaScript

JavaScript Compact Build (Mobile)

Adobe Flex

Microsoft Silverlight

http://esriurl.com/webapis

*Image from Microsoft Clip Art ArcGIS Web API capabilities include……

Map Graphics Query Symbols Editing

Geoprocessing GraphicsLayer Geometries

FeatureLayers Time-awareness

Extents Routing Why use the Web APIs?

Let’s you focus on rapid application development!

map.addLayer(basemap)

vs. http://sampleserver1.arcgisonline.com/ArcGIS/rest/servic es/Specialty/ESRI_StateCityHighway_USA/MapServer/export? bbox=-127.8,15.4,-63.5,60.5&f=pjson Why use the Web APIs?

vs.

dojo.io.script.jsonp_dojoIoScript2._jsonpCallback({"serviceDescription":"","mapName":"Layers","descript ion":"","copyrightText":"","layers":[{"id":0,"name":"arcgis2.DBO.custinfo","parentLayerId":- 1,"defaultVisibility":true,"subLayerIds":null},{"id":1,"name":"arcgis2.DBO.DenverCO_CensusTracts","pare ntLayerId":- 1,"defaultVisibility":true,"subLayerIds":null}],"tables":[],"spatialReference":{"wkid":4326},"singleFus edMapCache":false,"initialExtent":{"xmin":-105.170917848995,"ymin":39.5124265894988,"xmax":- 104.556422044239,"ymax":40.0144928617289,"spatialReference":{"wkid":4326}},"fullExtent":{"xmin":- 105.13659819355,"ymin":39.55113300385,"xmax":- 104.57486577945,"ymax":39.9313831191501,"spatialReference":{"wkid":4326}},"units":"esriDecimalDegrees", "supportedImageFormatTypes":"PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP","documentInfo":{"Ti tle":"","Author":"","Comments":"","Subject":"","Category":"","Keywords":"","Credits":""},"capabilities" :"Map,Query,Data"}); Framework for Integrating Multiple services

ArcGIS Server

ArcGIS Online ArcGIS API for JavaScript

Andy Gup Agenda

• What is the ArcGIS API for JavaScript? • ArcGIS.com configurable templates • Inside the API • HTML5 and ArcGIS • Tips and tricks

Why JavaScript?

• Runs natively in all web browsers – no need for a plug-in. • Great starting place for beginners • Many different frameworks available. - EXTJS, Dojo, jQuery, etc. • Many development environment choices - Notepad, Notepad++, Aptana, Visual Studio, etc.

Dojo and the ArcGIS API for JavaScript

• Robust JavaScript Toolkit • Active Community • Dojo Digits - Strong widget system - Grids, charts, toolbars, trees and more • Powerful eventing model • Rich client side graphics dojo example…

dojo.require("esri.map"); function showResults(featureSet) {

//QueryTask returns a featureSet. Loop through features dojo.forEach(featureSet.features,function(feature){ var graphic = feature; graphic.setSymbol(symbol);

//Set the infoTemplate. graphic.setInfoTemplate(infoTemplate);

//Add graphic to the map graphics layer. map.graphics.add(graphic); }); dojotoolkit.org Other JavaScript Libraries

ArcGIS API for JavaScript works with other JavaScript libraries! Configurable Templates

• ArcGIS.com Configurable Templates • Create maps using online tools • Download template to your web server • Config files • Modify code directly ArcGIS.com Inside the ArcGIS API for JavaScript

• Look at key pieces of functionality • Talk about syntax and coding patterns • http://links.esri.com/javascript

*Image from Microsoft Clip Art Adding Map Layers

map = new esri.Map("map");

//Add the topographic layer to the map. var basemap = new esri.layers.ArcGISTiledMapServiceLayer(“http://...”); map.addLayer(basemap);

Hello World Working with Feature Layers

var featureLayer = new esri.layers.FeatureLayer("http://.../FeatureServer/1", {mode: esri.layers.FeatureLayer.SNAPSHOT, outFields: ["NAME","POP2000","POP2007","POP00_SQMI","POP07_SQMI"] } ); featureLayer.setDefinitionExpression("STATE_NAME = 'South Carolina'"); map.addLayer(featureLayer);

Demo – Feature Layers Geoprocessing

var gp = new esri.tasks.Geoprocessor(“http://server1.../”); var features= []; features.push(graphic); var featureSet = new esri.tasks.FeatureSet(); featureSet.features = features; var params = { "Input_Location":featureSet, "Drive_Times":driveTimes }; gp.execute(params, getDriveTimePolys);

Demo – Geoprocessing HTML5 and ArcGIS

• You can use it today with our JavaScript API • HTML5 samples available in Resource Center

HTML5 Logo by W3C What is HTML5?

HTML + CSS3 + JavaScript

HTML5 Logo by W3C HTML5

• Next standard for HTML • “HTML5” used liberally across the web • Key elements - New semantic tags (e.g.