getting started with the arcgis api for javascript, esri, julie powell, antoon uijtdehaag
DESCRIPTION
TRANSCRIPT
Getting Started with the ArcGIS API for JavaScript
Julie Powell, Antoon Uijtdehaag
European Developer SummitRotterdam, Nov. 9, 2012
Agenda
• Overview• Best Practices
- Maximizing Performance- Building expressive web applications with the latest features
• HTML5• Tips & Tricks• What’s next?• Resources
ArcGIS for Server Is a Platform for Web GIS
Comprehensive GIS Accessible from the Web, Desktop, and Mobile
• Server Oriented Architecture
• Enabling Web GIS• Rich Application
Clients• High Performance and
scalable• Interoperable• Dissemination and
collaboration
MobileWebDesktop
USEApplications
(clients)
SERVEArcGIS for
Server(Services)
OpenAPIs
OGC
KMLSOAP
SQL
AUTHORArcGIS Desktop
Enabled System
ArcGIS for Server Services
Map (including WMS, WMTS)• View or query a 2D map on the server
Globe• View or query a 3D globe on the server
Geocode• Perform address matching on the server
Geodata• Perform data replication, extraction, or query
Geoprocessing• Run a tool or model on the server and get results
Image• Provide access to raster data though a Web service
ArcGIS JavaScript APIs – Why JavaScript?It’s your future ;-)
• Lightweight web GIS
• Pervasive
• Cross-platform, cross-browser, plugin-less
• JS Frameworks abstract away the browser complexity- YUI, Dojo, EXTJS, jQuery
• IDE’s are getting better. Aptana, Notepad ++, Visual Studio
JavaScript Considerations
• Can be a longer development cycle
• Mobile: limitations with interacting with device, using local storage
• Performance Limitations
Race for the fastest browser – HTML5
• JavaScript Engine- Just in time compilation to byte code- Faster property access- Efficient garbage collection
• Graphics engine improvements
• DOM improvements
• CSS3
What can you do with the API?
• Interactive maps• ArcGIS Online basemaps • Execute a task• Find an address
Core Library
• Map control• Support for Webmap• Layers
– Tiled, Dynamic, FeatureLayer, WMS, WMTS, KML, Graphics
• Graphics• Tasks
– GP, Network, Geometry, Query, Locator• Geometry• Symbology
– ArcGIS Server Symbology• Toolbars
– Edit, Draw, Navigation
Widgets
JavaScript-based Application Examples
Public Information Map
Story Maps
Code Editors
Get the API
CDN
Build your first app
1. Reference the API2. Create a map 3. Add a basemap4. Add operational layer
Demo
Agenda
• Overview• Best Practices
- Maximizing Performance- Building expressive web applications
• HTML5• Tips & Tricks• What’s next?• Resources
Create a web map
Web Map ID
Working with ArcGIS Online
Replace map with web mapUsing ArcGIS Online Templates
Demo
Maximizing Performance
• Tiled layers vs. Dynamic
• Feature Services- With power comes responsibility - Generalizing geometries
• Balancing what you bring client side- Image vs. features- Calculating statistics
• Viewing performance stats
Feature Layers
• Purpose?
• Display modes- Snapshot- On-Demand- Selection only
• Generalizing geometries
Query Statistics
• Calculate statistics server-side- DB does the heavy lifting
• Large # features: Only send statistic results to client
• Types of calculations
∑
Interactive Application
Optimizing Performance
Demo
Agenda
• Overview• Best Practices
- Maximizing Performance- Building expressive web applications with the latest features
• HTML5• Tips & Tricks• What’s next?• Resources
HTML5: 5 Facts
1. It’s not one big thing2. You don’t need to throw anything away
3. It’s easy to get started
4. It already works
5. It’s here to stay
MARK PILGRIM, Dive into HTML5
Evolution of HTML5
By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
HTML5 components in (or soon to be in) the JSAPI
Canvas (pixel control and android graphics)
CSS3 TransitionsCross Origin Resource
Sharing
CPU Intensive Operations (asynch data processing, client geometric operations)
High performance browsers!
CSS 3D Transforms
Example: Store Bookmarks Locally
• Try to store bookmark in local storage.
• If not supported: Cookie
Example: Offline Tiling
• Web Workers• Use Web Storage for Tiles
HTML5 File AccessUsing Drag and Drop
Agenda
• Overview• Best Practices
- Maximizing Performance- Building expressive web applications with the latest features
• HTML5• Tips & Tricks• What’s next?• Resources
JS Beautifier
JSHint / JSLint
Plug-ins
Extents
Demo
What if I don’t want to use Dojo?
• Compatability with other JavaScript frameworks, for example:- jQuery- ExtJS- Multiple versions of Dojo- Leaflet
Where to get help…
• Getting Started• Working with Dojo
Agenda
• Overview• Best Practices
- Maximizing Performance- Building expressive web applications with the latest features
• HTML5• Tips & Tricks• What’s next?• Resources
ArcGIS API for JavaScript Roadmap
• Simplified API• New Widgets such as Placefinder widget• Dojo 1.8• More build profiles • AMD compliance• Full touch support IE 10
Research• Web Workers• Socket Connections• CityEngine WebScenes
Coming soon… Interactive Sandbox
Layers
Configure Development Environment
• Set up web server• IDEs• Debugging & Tools
How to run code from web server (IIS)
esri.request
Your code
Browser Web Server Remote Server
ArcGIS Server
proxy
Proxy
CORS
esri.request
Your code
Browser Remote Server
ArcGIS Server