Advanced Development with the ArcGIS API for

JavaScript

Jeremy Bartley, Kelly Hutchins, Derek Swingley

Agenda

• FeatureLayer • esri.request and Identity Manager • OO JS • Building your first Dijit • Popups • Working with WebMaps • Layouts • Mobile

esri.layers.FeatureLayer

FeatureLayer Client Side Data

Pagination

Feature Selections

Web Editing

FeatureLayer

Generalization Reduced Precision

10.1 Etag Optimization

High Performance FeatureLayer

esri.request() & esri.IdentityManager

esri.request()

• Low level request method access data from a remote server

• Wraps - Script get via JSONP - XHR Get - XHR Post

• Used by all jsapi components that talk to ArcGIS Server

• Use it to upload files, access xml documents, csv files, …

esri.request() is smart!

• Uses proxy if NEEDED and AVAILABLE • Supports HTML5 CORS • Integrated with the IdentityManager

• Provides a hook to override the request before going

to the server. - esri.setRequestPreCallback(callbackFunction)

• Returns a deferred

Deferred -- Promises

• Simple way to deal with asynchronous requests in response to a value that may not yet be available.

• qtDeferred = qt.execute(query);

• qtDeferred.then(function(queryResult){}); • qtDeferred.addCallback() • qtDeferred.addErrBack() • qtDeferred.addBoth()

IdentityManager

• Work with secure ArcGIS online or ArcGIS server services with the identity manager

• Use when your app needs to illicit credentials from the user

• Seamlessly integrates with all layers, tasks, and requests routed through esri.request()

• Can be extended to change the user experience.

Demo

Object Oriented JavaScript

JavaScript and Classes

• Avoid single-file, spaghetti code apps • Modular, re-usable code • Application maintenance

Dojo and Classes

• declare: create a class • provide: tell dojo about your class • require: load classes • Example: search Instagram

Building your first Dijit

Dojo Dijit

• Collection of UI Widgets • Framework for creating custom UI Widgets

Creating a Dijit

• Standard file structure • JavaScript for custom methods and properties • HTML template for layout elements • Styled with CSS

The Dijit Lifecycle

• Set of methods that fire during dijit creation • Convenient access to the widget as it is created

Custom Dijit

• “Dashboard” style display • Read JSON from an ArcGIS.com webmap • Provide a way to connect to a map

Popups

Info Window • Title + Content

• Place anywhere on map

- InfoWindow.show(mapPoint, anchorPlacement)

• Shown when clicked on a graphicslayer if Graphic has defined infoTemplate

Content of InfoWindow

Let’s go to the doc…

Customize look of InfoWindow

• Simple InfoWindow can be stylized with CSS

• Default InfoWindow can be stylized by creating a new sprite defining the colors and then using it in your app

Extend InfoWindowBase to create your own InfoWindow

• Need to implement a few methods - Hide, show, setContent, setTitle, resize

• Once implemented you can set your new InfoWindow

on the map

• API for working (show/hide) with InfoWindow will remain unchanged.

Popups

• Implementation of InfoWindowBase - Navigate through selection - Zoom and highlight - Maximize the info window

PopupMobile

• Inherits from InfoWindowBase • Designed for small screen size

- Embedded Maps - Mobile

Working with WebMaps

esri.arcgis.utils.createMap()

• Creates an instance of esri.Map initialized with all layers specified in the webmap

• Supports: - All basemap and operational layers - Supports features stored in the map - Supports webmap defined popups

• Constructed from arcgis online webmap ID or by value from JSON

ArcGIS.com webmap popups

• If webmap has defined popups createMap will: - Listen for map click events and when clicked query the

layer for each defined popup - Behaivor can be disabled via ignorePopups option - Selected geometry is generalized if possible

• You can style the InfoWindow that contains the popup using css

- dojo.addClass(map.infoWindow.domNode, "chrome");

Extending createMap’s InfoWindow

• Uses custom InfoWindow extended form InfoWindowBase

• Handles paging, media (one or multiple), and supports full screen view of content

• Includes an actions bar that supports “zoom to”

• You can get the currently selected feature from the InfoWindow. Use it to add your own tool to the actions bar

ArcGIS.com Web application Templates – create your own!

Layouts

Dojo

• Layout elements on page • Border Container

- Contains layout elements - Accordion Container - Content Pane - Stack Container - Tab Container

- Nested

Border Container - Attributes

• Design • Region

- Headline - Sidebar

Grid 960

Columns

• 12 Column - 60 pixels wide - 10 pixel margin

• 16 Column - 40 pixels - 10 pixel margin

CSS Classes

Spaces

• Prefix, Suffix

Mobile Development

Mobile support in JSAPI

• Touch enabled Map control • Touch enabled widgets • Touch enabled move support

iOS

• Best Mobile Browser • Supports two finger pinch zoom on map control • Create and edit geometries • No access to photos/videos from the browser

• Browser supports

- HTML5 Geolocation API - Web Storage - Offline Web Applications - Access to GyroScope

Android

• 2.2 and greater • SVG is not supported on Android.

- JSAPI falls back to canvas

• No support for two finger touch (yet) • Does have access to the camera roll

Mobile Widgets

• Mobile popup • Touch-aware thumbnail gallery

• Displays horizontal scrolling view of thumbnail

images.

• Touch access so users can flick through the gallery to select or view items.

Mobile Frameworks

• Native application look and feel - Animated transitions - Toolbars - Buttons - List views

jQuery Mobile

• Announced in late 2010 • Active user community • Lots of samples and doc • Theme Framework

Dojox.mobile

• Features and behavior similar to jQueryMobile

• Good demos • Poor documentation

Sencha

• Animations and Scrolling • Native Packaging • Built on HTML5 • iPhone, Android, Blackberry