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. , 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 • 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