advanced development with the arcgis api for javascript · • collection of ui widgets ... • set...
TRANSCRIPT
![Page 1: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/1.jpg)
Advanced Development with the ArcGIS API for
JavaScript
Jeremy Bartley, Kelly Hutchins, Derek Swingley
![Page 2: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/2.jpg)
Agenda
• FeatureLayer • esri.request and Identity Manager • OO JS • Building your first Dijit • Popups • Working with WebMaps • Layouts • Mobile
![Page 3: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/3.jpg)
esri.layers.FeatureLayer
![Page 4: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/4.jpg)
FeatureLayer Client Side Data
Pagination
Feature Selections
Web Editing
![Page 5: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/5.jpg)
FeatureLayer
Generalization Reduced Precision
10.1 Etag Optimization
High Performance FeatureLayer
![Page 6: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/6.jpg)
esri.request() & esri.IdentityManager
![Page 7: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/7.jpg)
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, …
![Page 8: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/8.jpg)
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
![Page 9: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/9.jpg)
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()
![Page 10: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/10.jpg)
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
![Page 11: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/11.jpg)
Object Oriented JavaScript
![Page 12: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/12.jpg)
JavaScript and Classes
• Avoid single-file, spaghetti code apps • Modular, re-usable code • Application maintenance
![Page 13: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/13.jpg)
Dojo and Classes
• declare: create a class • provide: tell dojo about your class • require: load classes • Example: search Instagram
![Page 14: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/14.jpg)
Building your first Dijit
![Page 15: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/15.jpg)
Dojo Dijit
• Collection of UI Widgets • Framework for creating custom UI Widgets
![Page 16: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/16.jpg)
Creating a Dijit
• Standard file structure • JavaScript for custom methods and properties • HTML template for layout elements • Styled with CSS
![Page 17: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/17.jpg)
The Dijit Lifecycle
• Set of methods that fire during dijit creation • Convenient access to the widget as it is created
![Page 18: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/18.jpg)
Custom Dijit
• “Dashboard” style display • Read JSON from an ArcGIS.com webmap • Provide a way to connect to a map
![Page 19: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/19.jpg)
Popups
![Page 20: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/20.jpg)
Info Window • Title + Content
• Place anywhere on map
- InfoWindow.show(mapPoint, anchorPlacement)
• Shown when clicked on a graphicslayer if Graphic has defined infoTemplate
![Page 21: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/21.jpg)
Content of InfoWindow
Let’s go to the doc…
![Page 22: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/22.jpg)
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
![Page 23: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/23.jpg)
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.
![Page 24: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/24.jpg)
Popups
• Implementation of InfoWindowBase - Navigate through selection - Zoom and highlight - Maximize the info window
![Page 25: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/25.jpg)
PopupMobile
• Inherits from InfoWindowBase • Designed for small screen size
- Embedded Maps - Mobile
![Page 26: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/26.jpg)
Working with WebMaps
![Page 27: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/27.jpg)
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
![Page 28: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/28.jpg)
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");
![Page 29: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/29.jpg)
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
![Page 30: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/30.jpg)
ArcGIS.com Web application Templates – create your own!
![Page 31: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/31.jpg)
Layouts
![Page 32: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/32.jpg)
Dojo
• Layout elements on page • Border Container
- Contains layout elements - Accordion Container - Content Pane - Stack Container - Tab Container
- Nested
![Page 33: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/33.jpg)
Border Container - Attributes
• Design • Region
- Headline - Sidebar
![Page 35: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/35.jpg)
Columns
• 12 Column - 60 pixels wide - 10 pixel margin
• 16 Column - 40 pixels - 10 pixel margin
![Page 36: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/36.jpg)
CSS Classes
![Page 37: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/37.jpg)
![Page 38: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/38.jpg)
![Page 39: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/39.jpg)
Spaces
• Prefix, Suffix
![Page 40: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/40.jpg)
Mobile Development
![Page 41: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/41.jpg)
Mobile support in JSAPI
• Touch enabled Map control • Touch enabled widgets • Touch enabled move support
![Page 42: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/42.jpg)
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
![Page 43: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/43.jpg)
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
![Page 44: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/44.jpg)
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.
![Page 45: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/45.jpg)
Mobile Frameworks
• Native application look and feel - Animated transitions - Toolbars - Buttons - List views
![Page 46: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/46.jpg)
jQuery Mobile
• Announced in late 2010 • Active user community • Lots of samples and doc • Theme Framework
![Page 47: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/47.jpg)
Dojox.mobile
• Features and behavior similar to jQueryMobile
• Good demos • Poor documentation
![Page 48: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/48.jpg)
Sencha
• Animations and Scrolling • Native Packaging • Built on HTML5 • iPhone, Android, Blackberry
![Page 49: Advanced Development with the ArcGIS API for JavaScript · • Collection of UI Widgets ... • Set of methods that fire during dijit creation • Convenient access to the widget](https://reader034.vdocuments.mx/reader034/viewer/2022051607/602eace18b5e6c2c096da9e1/html5/thumbnails/49.jpg)