Developing with the ArcGIS API for JavaScript and HTML5 · ArcGIS Online templates •Many pre-configured templates built with JS API •Common layouts and functionality •Downloadable

Developing with the

ArcGIS API for JavaScript

and HTML5

Agenda

This seminar is designed to help you understand:

1) Getting started with the ArcGIS API for JavaScript

2) Writing your first JavaScript application

3) Enhancing your applications with HTML5 and Modern Dojo/AMD

Getting started with the

ArcGIS API for JavaScript

ArcGIS API for JavaScript

• Web browser based API

• REST

• Many advantages

• Browser support

• Mobile devices

• Hosted at Esri

• Active development

http://www.esriurl.com/js

Dojo Toolkit

• ArcGIS API for JavaScript is built on top of the Dojo Toolkit

• Automates common JavaScript tasks and workflows

• Delivers mobile app layouts

• Provide common UI components

• Works with other frameworks

http://www.dojotoolkit.org

Resources

API Reference Samples

Sandbox

The Basics

• The foundation of a Web mapping application

• Create a simple HTML document

• Reference the ArcGIS API for JavaScript

• Load modules

• Ensure the DOM is available

• Create the map

• Define the page content

• Style the page

W O

R K

F L

O W

Building from the foundation

• Add map elements

• Incorporate data layers

• Use feature layers for display and querying

• Map with dynamic requests

• Create an editing application

• Work with tasks and widgets

• Getting started with the JavaScript API

Demonstration I

Review and Questions

• Getting started with the JavaScript API

Building JavaScript

Applications

Integrate with ArcGIS Online

• Utilize ArcGIS Online services

• Adding basemaps

• Geocoding addresses

• Adding hosted feature services

• Publish and share customized templates

• ArcGIS Online users can build applications

• Enable configuration settings

ArcGIS Online templates

• Many pre-configured templates built with JS API

• Common layouts and functionality

• Downloadable

• Ready-to-use

• Configurable

• Customizable

Using templates

• Share web apps to preview and download

Configuring templates

• Review and edit template configuration

• Building from the foundations – starting from an ArcGIS Online application template.

Demonstration II

Review and Questions

• Building from the foundations – starting from an ArcGIS Online application template.

Enhancing ArcGIS API for

JavaScript applications

Cross domain applications

• Native CORS (Cross-origin resource sharing)

• Server-side Proxy - referenced by JavaScript API

CORS-Enabled

Web Browser Remote Server

Access-Control-Allow-Origin: *

Web Browser

(no CORS)

Remote

Server Web Server

Proxy.ashx

esri.config.defaults.io.corsEnabledServers

esri.addProxyRule(rule)

or

esri.config.defaults.io.proxyUrl

Widgets

• Specialized widgets created by Esri for the JS API

• Map surround elements

Legend

• Application functions

InfoWindow

Geocoder

Directions

• Editing tools

Template picker

Overview Map

Print

Basemap Gallery

Attribute editing

Tasks

• Many out-of the box API modules for performing common tasks

Identify

Print

Locator

Route

Many more…

Query

Geoprocessing

GeometryService

ClosestFacility

HTML5

• Targeted use of key Web browser capabilities to improve the user experience

• Geolocation API

• Web storage

• Drag and drop

• Web workers

• Web sockets

• Application cache (offline apps)

• Video playback

• Canvas

• HTML5 CORS

• Browser History

CSS3

• Advanced styling with CSS3

• Responsive screen size based design

• Rounded corners

• Drop shadows

• Web fonts

• Multi-column text layout

• Animation and transitions with events

Browser Compatibility

• Leverage existing tools and resources to workaround/detect HTML5/CSS3 feature support

• html5shim

• Modernizr.com

• css3generator.com

• caniuse.com

• Don't code from scratch - leverage APIs/Libraries:

• Dojo/Dojox (included with the ArcGIS API for JS)

• jQuery

• Ext.JS … many more.

AMD and Modern Dojo

• Asynchronous Module Definition

• dojo.require('app.Module') …

replaced by

require(["app/Module"],function(Module){ … })

• Modern Dojo

• Replaces many common dojo.* methods

• dojo.connect() replaced by dojo.on()

• Legacy methods continue to be supported

• Some API modules, and documentation/samples still in transition

• HTML5/CSS3 and Modern Dojo/AMD

Demonstration III

Review

• HTML5/CSS3 and Modern Dojo/AMD

• In this Web Seminar you learned about...

1) Getting started with the ArcGIS API for JavaScript

2) Writing your first JavaScript application

3) Enhancing your applications with HTML5 and Modern Dojo/AMD

Summary

Resources

• Finding developer resources

• http://developers.arcgis.com/en/javascript

• http://esri.github.com

• http://gis.stackexchange.com

• http://dojotoolkit.org

• Learning JavaScript and HTML5

• http://eloquentjavascript.net

• http://diveintohtml5.info

• http://yuiblog.com/crockford

Resources

• Related Training Courses

• Building Web Applications Using the ArcGIS API for JavaScript

• Upcoming Web Seminars & Events

• Implementing the ArcGIS Workflow Manager - Aug. 22

• Publishing Story Maps with ArcGIS - Sept. 26

• Data Quality Control Using ArcGIS Data Reviewer - Oct. 24

twitter.com/EsriCanada facebook.com/EsriCanada