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

Cloud-based IDEs

JSFiddle

Maqetta

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

Can I Use?

http://www.caniuse.com/

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