getting started with the arcgis api for javascript€¦ · arcgis javascript apis – why...
TRANSCRIPT
Getting Started with the ArcGIS API for JavaScript
• Julie Powell, Paul Hann
Esri Developer SummitBerlin | November 19 2012
Getting Started with the ArcGIS API for JavaScript
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
Agenda
• Overview• Using a webmap• Best practices for maximizing performance• HTML5• Tips & Tricks• What’s next?• Resources
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
Code Editors
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
Get the API
Build your first app
1. Reference the API2. Create a map 3. Add a basemap4. Add operational layer
Demo
Agenda
• Overview• Using a webmap• Best practices for maximizing performance• HTML5• Tips & Tricks• What’s next?• Resources
Create a web map
Web Map ID
Working with ArcGIS Online
Replace map with web map
Demo
Agenda
• Overview• Using a webmap• Best practices for maximizing performance• HTML5• Tips & Tricks• What’s next?• Resources
Balancing what you bring client side
• Tiled layers vs. Dynamic
• Feature Services- With power comes responsibility ☺- Generalizing geometries
• Viewing performance stats
• Calculating statistics
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• Using a webmap• Best practices for maximizing performance• HTML5• Tips & Tricks• What’s next?• Resources
HTML5: 5 Facts
1. It’s not one big thing2. You don’t need to throw anything away3. It’s easy to get started4. It already works5. 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
Agenda
• Overview• Using a webmap• Best practices for maximizing performance• HTML5• Tips & Tricks• What’s next?• Resources
Where to get help…
• Getting Started• Working with Dojo
Tips & Tricks : Use Developer Tools (firebug, Chrome, etc)
Tips and Tricks - Beautify Code and Test Syntax
What if I don’t want to use Dojo?
• Compatability with other JavaScript frameworks, for example:
- jQuery- ExtJS- Multiple versions of Dojo- Leaflet
Extents
Demo
Agenda
• Overview• Best practices for maximizing performance• 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