Developing with the ArcGIS API for JavaScript and HTML5 · ArcGIS Online templates •Many...
Transcript of Developing with the ArcGIS API for JavaScript and HTML5 · ArcGIS Online templates •Many...
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
Basemap Gallery
Attribute editing
Tasks
• Many out-of the box API modules for performing common tasks
Identify
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