Getting Started with the ArcGIS API for JavaScript
• Julie Powell, Paul Hann Esri Developer Summit Berlin | 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
• Desktop Web Mobile Open Server Oriented APIs Architecture USE OGC KML Applications SOAP (clients) • Enabling Web GIS SQL • Rich Application Clients
• High Performance and SERVE scalable Enabled ArcGIS for System Server • Interoperable (Services)
• Dissemination and collaboration AUTHOR ArcGIS Desktop 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 Cloud-based IDEs
JSFiddle
Maqetta 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 Demo 1. Reference the API 2. Create a map 3. Add a basemap 4. Add operational layer 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 thing 2. 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 Can I Use?
http://www.caniuse.com/ HTML5 components in (or soon to be in) the JSAPI
Cross Origin Resource Canvas (pixel control CSS3 Transitions Sharing and android graphics)
High performance browsers!
CPU Intensive Operations (asynch data processing, client geometric operations) 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 Access Using Drag and Drop 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) Proxy
esri.request proxy
ArcGIS Server Your code
Browser Web Server Remote Server CORS
esri.request
ArcGIS Server Your code
Browser Remote Server