getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript...
144
Getting Started with the ArcGIS Web APIs Ben Ramseth, Lloyd Heberlie, Andy Gup
Transcript of getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript...
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
Flex/Flash
Google Earth
ArcMap
PHP
iPhone
Open Street Map
Android
Microsoft Silverlight
Bing Maps
Ruby Python
.Net Java
OpenLayers ArcGIS Mobile
ArcGIS Explorer
SAP
JavaScript
ArcGIS Desktop
http://www.esri.com/services/disaster-response/floods/latest-news-map.html
http://gis.greeleygov.com/origin/propinfo.html
resources.arcgis.com
ArcGIS Server - Architecture
Client APIs
Web Services
GIS Services
Data
Javascript
Flex
Silverlight
Map Services
Geoprocessing Services
Geocoding Services
Filesystems
Geodatabases
SQL
File IO
REST
SOAP JSON XML AMF KML
OGC
Mobile
What is a GIS Service?
Map Service Endpoint
ArcGIS Server Map Service Edit
Use
Display
ArcGIS Server – GIS Services
Mapping
Feature
Geocode
Geoprocessing
Globe
Geodata
Geometry
Image
Network Analysis
Search
http://esriurl.com/arcgisservices
ArcGIS Server
OGC
KML
How do I get my data into an app? Web Services!
REST
SOAP
OGC
*Image from Microsoft Clip Art
Example ArcGIS REST API Architecture
JSON, XML etc
Geodatabase
ArcGIS Desktop
lyr, msd, mxd, etc.
ArcGIS Server
ArcGIS Client API
Web Server
REST
Example REST API usage
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=-127.8,15.4,-63.5,60.5&f=pjson
URL-based requests (GET or POST) Format works with all client-side application languages
ArcGIS Services Directory
In the browser: ArcGIS Web APIs
JavaScript
http://esriurl.com/webapis
Adobe Flex
Microsoft Silverlight
*Image from Microsoft Clip Art
JavaScript Compact Build (Mobile)
ArcGIS Web API capabilities include……
Editing
FeatureLayers Time-awareness
Query
Geoprocessing
Graphics
GraphicsLayer
Routing
Map
Extents
Symbols
Geometries
Why use the Web APIs?
Let’s you focus on rapid application development!
map.addLayer(basemap)
vs.
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=-127.8,15.4,-63.5,60.5&f=pjson
Why use the Web APIs?
<div id="mapDiv" style="width:800px; height:600px;"> </div>
vs.
dojo.io.script.jsonp_dojoIoScript2._jsonpCallback({"serviceDescription":"","mapName":"Layers","description":"","copyrightText":"","layers":[{"id":0,"name":"arcgis2.DBO.custinfo","parentLayerId":-1,"defaultVisibility":true,"subLayerIds":null},{"id":1,"name":"arcgis2.DBO.DenverCO_CensusTracts","parentLayerId":-1,"defaultVisibility":true,"subLayerIds":null}],"tables":[],"spatialReference":{"wkid":4326},"singleFusedMapCache":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":{"Title":"","Author":"","Comments":"","Subject":"","Category":"","Keywords":"","Credits":""},"capabilities":"Map,Query,Data"});
Framework for Integrating Multiple services
ArcGIS Online
ArcGIS Server
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.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); });
dojo example…
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); <div id="map" style="border:1px solid #000;width:100%;height:100%;">
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. <footer>) - Improved form elements (a.k.a. markup) - Additional APIs (File API, Web Workers, Geolocation,
etc.) - Different mobile browsers support different subsets of
features
ArcGIS API for
HTML5 Logo by W3C
HTML5 Geolocation API
navigator.geolocation.getCurrentPosition( zoomToLocation, locationError ); watchId = navigator.geolocation.watchPosition( updateLocation, locationError );
Cross-browser support
• What do your end-users use? • Laptop vs. Mobile • IE < 9 little to no support for HTML5 • Chrome Frame • Test early – test often!
*Image from Microsoft Clip Art
Feature Detection
• Detect if user’s browser supports specific HTML5 feature
var useLocalStorage = supports_local_storage(); var canvasSupport = supports_canvas(); // Source for supports_local_storage function: // http://diveintohtml5.org/detect.html function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; } } // Does the browser support canvas? function supports_canvas() { return !!document.createElement('canvas').getContext; }
Feature Detection Demo
A word about browsers
• JavaScript Engines – major performance enhancements
• Native graphics engine improvements • Many updates per year • HTML5, CSS3 support
Browser Performance Demo
http://ie.microsoft.com/testdrive/Default.html
Web Browsers on esri.com
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Q1 Q2 Q3 Q42011
Other
Safari
Firefox
Chrome
IE6
IE7
IE8
IE9
Source: www.esri.com/visitorstatistics
IDE Recommendations
Aptana/Aptana Plugin (v2) Notepad++ Textpad Visual Studio Dreamweaver Eclipse
Getting Started Resources
• Just learning… - http://www.w3schools.com/
• ArcGIS and HTML 5 Live Training Seminar video - http://esriurl.com/arcgishtml5
• When can I use… - http://caniuse.com/
• CSS-TRICKS - http://css-tricks.com/
• Suggested reading (free!) - Eloquent JavaScript
- Dive into HTML5
- Crockford on JavaScript
Suggested JavaScript Sessions
Advanced Development with the ArcGIS API for JavaScript
- Wed. 10:30am – Pasadena Room.
Building Your First JavaScript API App
- Tue. 2:45pm – Demo Theater #2
JavaScript and Feature Layers
- Tue. 4:30pm – Demo Theater #2
Using the ArcGIS for Server REST API
- Tue. 4:30pm – Primrose B
ArcGIS API for Flex Lloyd Heberlie
Agenda
• Getting Started and Concepts • Inside the ArcGIS API for Flex • Road Ahead • Productivity • Getting more information
Desktop (AIR), Desktop Browser (Flash Player), Mobile (AIR)
Demo
Sharing code across screens
Getting Started and Concepts
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Adobe Flash Platform
http://www.adobe.com/devnet/flashplatform.html
Flash Builder
Flex
Creative Suite
Design / Develop
Clients
Servers and Services
Framework
Flash Player AIR
Flash Catalyst
Flash Media Server
Flash Data Services
Flash Platform Services
Multiscreen Content and Applications
Flash Professional
Why Adobe Flex Framework?
• Create applications that are, - Interactive, responsive - Easy to extend - Simple, yet powerful
• Consistent across browsers, desktops, devices, and operating systems
• Highly productive, open source, IDE support • Rich set of components • Strong developer community
- http://www.adobe.com/devnet/flex
Flex development overview
Design
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Runtime Flash Player ** AIR *
Creative Suite
Flash Builder
Servers and Services
Flex Frameworks and SDKs 3rd Party
Develop Source Code ActionScript / MXML
Compiled Code .swf / .air
Devices * Desktop Browsers ** and Desktop Apps *
Flex development for desktop browsers
• Flash Player running in desktop browsers • http://www.adobe.com/devnet/flashplayer.html • http://www.adobe.com/support/flashplayer/download
s.html - Debugger versions
• Reference Documentation - http://help.adobe.com/en_US/FlashPlatform/reference/ac
tionscript/3/index.html
Flex development for Mobile and Desktop
• AIR for Desktop and Mobile • http://www.adobe.com/devnet/air.html • Build your first mobile Flex application
- http://www.adobe.com/devnet/flex/articles/twitter-trends.html
• Flex/AIR for iOS - http://www.adobe.com/devnet/air/air_for_ios.html - http://devgirl.org/2011/06/20/flexair-for-ios-development-
process-explained/
• Flex/AIR for Android - http://www.adobe.com/devnet/air/air_for_android.html
What do I need to get started?
• Requirements for ArcGIS API 3.x for Flex - Access to ArcGIS Server services * - Adobe Flex 4.5 SDK or higher - Adobe Flash Player 10.2 or higher
- Debugger version for developers
• Recommendations - Adobe Flash Builder 4.6 (IDE)
• Optional - Adobe Creative Suite
Release notes | Flex SDK versions
• Flex 4.5.1 or above for Mobile development - Use 4.6 for best mobile coverage
• Flex 4.5 SDK build is 4.5.0.20967 and contains: - AIR SDK 2.6.0.19120 - Flash Player 10.2.153.1
• Flex 4.5.1 SDK build is 4.5.1.21328 and contains: - AIR SDK 2.6.0.19120 - Flash Player 10.2.159.1
• Flex 4.6 SDK build is 4.6.0.23201 and contains: - AIR SDK 3.1.0.4880 - Flash Player 11.1.102.55
Flash Builder Welcome
Setting up your development environment
Demo
Code generation / code assist
What will I need to know / learn?
• MXML - Declarative XML that gets converted to ActionScript - UIComponent, Skinning and Layout
• ActionScript - Based on ECMAScript specification - Programming language for Flash Player and Flex SDK
• CSS - Styling UIComponents and Skins
• Tip: read the Flex SDK source code!
ActionScript 3 (AS3) fundamentals
• Syntax - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/syntax.html
• Variables - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/variables.html
• Conditionals - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/conditionals.html
• www.actionscriptcheatsheet.com
ActionScript 3 Data Types and Metadata Tags
• uint, int, Number • String, Boolean, Object, Date • Array, ArrayList, ArrayCollection • Dictionary • XML • [Bindable], [Event] • http://www.adobe.com/devnet/actionscript/learning/a
s3-fundamentals/data-types.html • http://help.adobe.com/en_US/flex/using/WS2db45492
0e96a9e51e63e3d11c0bf680e1-7ffe.html
Tour de Flex
Suggested reading
Development web server
• Configure your favorite server-side environment - Apache + Tomcat - IIS + ASP.NET - Configure a Proxy page
• Installing a self-signed certificate - http + ssl = https - Helpful for testing resources over https - IdentityManager (secure ArcGIS services)
Thinking about deployment
• Minimum Flash Player installation (10.2) - Wrapper streamlines process
• Uncheck enable integration with browser navigation • Use Runtime Shared Library (RSL) • Export “Release build” • Flash Player cross-domain issues
- http://www.adobe.com/devnet/flashplayer.html - http://www.adobe.com/devnet/flashplayer/articles/cross_
domain_policy.html - proxy page (for security)
Placement of the crossdomain file
Web Server with application
and ArcGIS Server
Web Server with application
ArcGIS Server with
crossdomain.xml
SWF SWF
Map requests
and responses
Map requests
and responses
Inside the ArcGIS API for Flex
ArcGIS for Flex history
• Well Adopted • Very active forum • Community code gallery • Release schedule
Flex API Flex Viewer 2012 3.0 3.0
2011 2.3, 2.3.1, 2.4, 2.5 2.3, 2.3.1, 2.4, 2.5 2010 2.0, 2.1, 2.2 2.0 beta, 2.1, 2.2 2008 - 2009 1.0, 1.1, 1.2 and 1.3
ArcGIS for Flex What is your relationship?
• ArcGIS API for Flex - Custom task focused applications - Roll your own: business logic leverage the API - http://links.esri.com/flex
• ArcGIS Viewer for Flex - http://links.esri.com/flexviewer - Extends the API - Application Builder - Viewer source code available on Github - https://github.com/ArcGIS/ArcGISViewerForFlex
ArcGIS Viewer for Flex
Demo
Application Builder: custom widgets
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Adobe Flash Platform and ArcGIS
http://www.adobe.com/devnet/flashplatform.html
Flash Builder
Flex
Creative Suite
Design / Develop
Clients
Servers and Services
Framework
Flash Player AIR
Flash Catalyst
Multiscreen Content and Applications
Flash Professional
ArcGIS API for Flex
ArcGIS Server
ArcGIS for Flex development overview
Design
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Runtime Flash Player ** AIR *
Creative Suite
Flash Builder
Servers and Services
Esri services ArcGIS Server
Flex Frameworks and SDKs ArcGIS API
for Flex
Develop Source Code ActionScript / MXML
Compiled Code .swf / .air
Devices * Desktop Browsers ** and Desktop Apps *
How do I get the API?
• Resource center - http://links.esri.com/flex-api/latest-download
• Contents - Readme, API library, samples, skins
• API Library: collection of classes and assets (“the swc”)
• Samples: same as the resource center
• Skins: look and feel of a UI component
http://resourcesbeta.arcgis.com/en/communities/flex-api/
ArcGIS API for Flex Resource Center
http://resourcesbeta.arcgis.com/en/communities/flex-api/
ArcGIS API for Flex download
What’s in that download?
How do I run the samples locally?
Optional: set the output folder url in Flex Build Path settings
Binding
• [Bindable] • private myVar:String;
• <s:SomeComponent someProperty={myVar}/>
Map Extent and Mouse Coordinates
Demo
Event Listeners (MXML and ActionScript)
Event Listeners
Demo
Skinning and Styling
Skinning and Styling
Demo
Using graphic results in a DataGrid
Looping over fields in an attribute Object
Zoom to all graphics in a Graphics Layer
Other Developer Summit Proceedings
http://proceedings.esri.com/library/userconf/devsummit11/tech.html
Road Ahead
Road ahead
• ArcGIS API 3.x for Flex - Full ArcGIS 10.1 functionality - Support for ArcGIS Online API
• ArcGIS Viewer 3.x for Flex - Custom widgets in Application Builder - Hosted applications on ArcGIS.com - Auto upgrade existing application - Thematic / Dynamic layers Widget - Integrating user contributions using Github
What’s next for Adobe and Apache Flex
• Adobe Products and Runtimes - FlashBuilder - Flash Platform Runtimes (AIR, Flash Player)
- Desktops (AIR, Flash Player) and Mobile (AIR) - Adobe’s Flex Roadmap
- http://www.adobe.com/devnet/flex/whitepapers/roadmap.html - Adobe’s Flash Roadmap
- http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html
• Apache Flex - http://incubator.apache.org/flex/
Productivity
Flash Builder
• Flash Builder Tips and Tricks - Show line numbers - Key Bindings: Cmd(Ctrl) + Shift + L - Organize Imports: Shift + Cmd(Ctrl) + O - Fix Indentation: Cmd(Ctrl) + I - http://www.adobe.com/devnet/flash-builder/articles/tips-
tricks.html
• Code Templates • File Templates • FlexFormatter
Flex Library Projects
Troubleshooting development issues
• Flash Builder debugging - http://www.adobe.com/devnet/flex/articles/flashbuilder_s
hortcuts_tips.html
• Network Monitors - Fb Network tab, Charles Debugging Proxy, Wireshark,
Fiddler
• Web Browser Developer Tools - Chrome Developer Tools - Safari Web Inspector - Firefox (Firebug, Httpfox)
Getting More Information
Esri Training for Developers http://www.esri.com/training
• Instructor-Led Courses - Building Web Applications Using the ArcGIS API for Flex - Introduction to ArcGIS Server - Creating Effective Web Applications Using ArcGIS
Server
• Online Training Seminars - Free, one-hour presentation and demos by Esri
technical experts - Live seminar broadcast on a new topic every month
Flex SDK resources
• Adobe Flex Developer Center - http://www.adobe.com/devnet/flex.html
• Adobe TV - http://tv.adobe.com/search/?q=Flex
• Flex in a week - http://tv.adobe.com/show/flex-in-a-week
• Tour de Flex - http://www.adobe.com/devnet/flex/tourdeflex.html
• Conferences - Adobe MAX - 360 Flex
Additional resources
• Kuler - http://kuler.adobe.com
• Smashing Magazine - http://www.smashingmagazine.com/
• ColorPicker - Hex Color Picker (Mac) - ColorCop (Windows)
• ScreenRuler - PixelWindow
2012 Developer Summit: Other sessions
• Advanced Development with ArcGIS API for Flex - Wed 2:45 – 4:00 PM Primrose A (PSCC)
• What’s New in ArcGIS API for Flex - Wed 1:00 – 2:15 PM Pasadena/Ventura/Sierra (RH)
• Configuring and Customizing ArcGIS Viewer for Flex - Thurs 10:15 – 11:30 AM Catalina/Madera (RH)
• Killer Apps: HTML5 and Flex - Wed 4:30 – 5:45 PM Catalina/Madera (RH)
• Flex the World - Wed 10:30 – 11:00 AM Demo Theater 2 – Oasis
(PSCC) PSCC (Palm Springs Convention Center) and RH (Renaissance Hotel)
Summary
• Getting Started and Concepts • Inside the ArcGIS API for Flex • Road Ahead • Productivity • Getting more information
ArcGIS API for Silverlight Ben Ramseth
ArcGIS API for Silverlight Outline
• Getting Starting with Silverlight • Inside the ArcGIS API for Silverlight • Creating a Simple Application • Adding Toolkit Controls • Integrating Silverlight Control Events • Actions and Behaviors • Performing a Query Task
ArcGIS API for Silverlight starting points
Start from scratch Templates Viewer
Resource Center
Setting up the Silverlight Environment
Tools IDE Runtime
ArcGIS API for Silverlight
Downloading the ArcGIS API for Silverlight Demo
Assemblies
Namespaces
Client assembly
Geometry namespace
Geometry classes
Classes
Map class
Scale property
Map class’s properties
Class Diagrams
Application road map
IIS
Files
REST
Visual Studio Silverlight Tools 5 Silverlight Runtime 5 ArcGIS API for Silverlight 3.0
XAP JS HTML
Web Browser Silverlight plug-in
ArcGIS Online Map Services
REST Image files Features as JSON
Web page html file Silverlight.js file Silverlight control’s xap file
Creating a Silverlight Web Mapping Application Demo
Binding controls to a map
Adding Toolkit Controls Demo
Programming events with code behind
Button’s Click event Name of a C# function in the code behind
Events have code behind
ArcGIS controls have event
Integrating Silverlight controls
StackPanel Rectangle
RadioButtons
Integrating Silverlight Control Events Demo
ArcGIS controls have behaviors and actions
Adding a Behavior Demo
Query task workflow
What state do you want to see?
Create query
Collect user
Inputs
Send query to server to execute
Execute task
Return results to client
Receive FeatureSet
and display results
FeatureSet
Feature
Geometry
Attributes
Performing a Query Demo
Getting Started Resources
• Silverlight… - http://silverlight.net - http://www.microsoft.com/silverlight - http://expression.microsoft.com
• ArcGIS API for Silverlight … - http://help.arcgis.com/en/webapi/silverlight/3.0/index.html
• ArcGIS Blog… - http://blogs.esri.com/esri/arcgis/category/developer/
Suggested Silverlight Sessions
What's New in ArcGIS API for Microsoft Silverlight
Tue 2:45pm Primrose C/D (Palm Springs Convention Center) Configuring and Customizing ArcGIS Viewer for Silverlight Wed 1:00pm Primrose B (Palm Springs Convention Center)
Advanced Development with ArcGIS API for Microsoft Silverlight
Thu 8:30am Catalina/Madera (Renaissance Hotel) Programming Image Services Using ArcGIS API for Microsoft Silverlight
Wed 4:30pm Smoketree A - E (Palm Springs Convention Center)
Wrap Up
Key points to remember
• Three web APIs to choose from • JavaScript is native • Silverlight and Flex are plug-in based • Viewers and Application Builders • Consume resources from ArcGIS.com • http://resources.arcgis.com • Forums, Code Samples
