building native apps with arcgis api for javascript using ...2014 international developer summit --...
TRANSCRIPT
![Page 1: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/1.jpg)
Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery
Andy Gup, Lloyd Heberlie
![Page 2: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/2.jpg)
Agenda
• Getting to know PhoneGap • jQuery overview • jQuery and ArcGIS API for JavaScript • Putting it all together • Additional information
![Page 3: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/3.jpg)
Technical workshops at Dev Summit • Web
- Building Mobile Web Apps with the ArcGIS API for JavaScript
• Hybrid - You are here!
• Native - Building iOS Apps with ArcGIS Runtime SDK - Building Android Apps with ArcGIS Runtime SDK - Building Windows Store and Windows Phone Apps with ArcGIS Runtime SDK
![Page 4: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/4.jpg)
Application comparison
Web Hybrid Native
Development Cost Reasonable Reasonable Expensive
Development Time Short Short Long
App Portability High High None
Performance Fast Native speed if needed
Very Fast
Native Functionality No All All
App Store Distribution No Yes Yes
Extensible No Yes Yes
PhoneGap Day - IBM, PhoneGap and the Enterprise by Bryce Curtis
![Page 5: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/5.jpg)
Further reading
http://esriurl.com/7478
![Page 6: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/6.jpg)
Lloyd Heberlie
App
![Page 7: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/7.jpg)
What is PhoneGap?
• Application container technology • Core engine is 100% open source • Web view container, plus JS API • HTML5, CSS3, JS = Native App
PhoneGap
![Page 8: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/8.jpg)
PhoneGap architecture
PhoneGap Plugins
PhoneGap Application Code
Native App
![Page 9: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/9.jpg)
PhoneGap Plugins
![Page 10: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/10.jpg)
PhoneGap Plugin options
![Page 11: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/11.jpg)
Setup a developer machine
Source Control
Code quality and verification
web server
![Page 12: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/12.jpg)
Preparing for PhoneGap
![Page 13: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/13.jpg)
Installing PhoneGap and Apache Cordova
![Page 14: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/14.jpg)
Check versions of PhoneGap and Apache Cordova
![Page 15: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/15.jpg)
Updating PhoneGap and Apache Cordova
![Page 16: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/16.jpg)
Creating your first PhoneGap CLI project
phonegap create path/to/my-app "com.example.app" "My App"
![Page 17: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/17.jpg)
Lloyd Heberlie
Hello PhoneGap
![Page 18: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/18.jpg)
PhoneGap Apps
![Page 19: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/19.jpg)
Featured Apps
![Page 20: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/20.jpg)
Featured Apps: Tripcase, Untappd
![Page 21: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/21.jpg)
jQuery overview Lloyd Heberlie
![Page 22: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/22.jpg)
![Page 23: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/23.jpg)
data-attributes
![Page 24: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/24.jpg)
Selections and filtering
![Page 25: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/25.jpg)
Events
![Page 26: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/26.jpg)
Dynamic content
![Page 27: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/27.jpg)
jQuery Mobile page lifecycle
![Page 28: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/28.jpg)
LifeCycle Application
3rd Party JS
Map
Layers
Phone OS
![Page 29: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/29.jpg)
jQuery and ArcGIS API for JavaScript Andy Gup
![Page 30: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/30.jpg)
Jquery Mobile + ArcGIS
Single page map app Multiple page map app Testing use cases https://github.com/Esri/jquery-mobile-map-js
![Page 31: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/31.jpg)
Single Page view
Page Structure Apply CSS, roles and themes
![Page 32: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/32.jpg)
Single Page Map - HTML
![Page 33: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/33.jpg)
Single Page Map - HTML
![Page 34: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/34.jpg)
Single Page Map - HTML
![Page 35: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/35.jpg)
Single Page Map - CSS
![Page 36: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/36.jpg)
Andy Gup
Single page app
![Page 37: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/37.jpg)
Multi Page View
Set up additional pages Set up page navigation Additional CSS
![Page 38: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/38.jpg)
Multi Page View
![Page 39: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/39.jpg)
Multi Page View
![Page 40: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/40.jpg)
Multi Page app – Page 2 HTML
![Page 41: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/41.jpg)
Multi Page app – Page 2 HTML
![Page 42: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/42.jpg)
Multi Page app – Page 2 HTML
![Page 43: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/43.jpg)
Multi Page app – Page 2 HTML
![Page 44: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/44.jpg)
Multi Page app – Page 2 CSS
![Page 45: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/45.jpg)
Multi-page map app
![Page 46: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/46.jpg)
Page Transitions & Orientation Change
• Page and Orientation life cycle • Map destruction and resizing
![Page 47: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/47.jpg)
Page Transitions
Page 1 Page 2
~250 ms
![Page 48: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/48.jpg)
ArcGIS API for JavaScript
jQuery
HTML/CSS
~250 ms ~250 ms ~250 ms ~250 ms ~250 ms animation
![Page 49: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/49.jpg)
Events: leaving page
pagebeforechange pagechange pagechangefailed
http://api.jquerymobile.com/category/events/
![Page 50: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/50.jpg)
Events: entering page
pagebeforeshow pageshow pagechangefailed
http://api.jquerymobile.com/category/events/
![Page 51: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/51.jpg)
Page Transitions & Orientation Change
Page 1 Page 2 Page 2
![Page 52: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/52.jpg)
Page Transitions & Orientation Change
Page 2 Page 1
???
![Page 53: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/53.jpg)
![Page 54: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/54.jpg)
![Page 55: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/55.jpg)
The following won’t work in all use cases: map.reposition(); map.resize();
![Page 56: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/56.jpg)
Use Case - Recenter the map
![Page 57: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/57.jpg)
jQuery Helper library
Page rotation – landscape/portrait Recentering Multiple views var helper = new jQueryHelper(map); https://github.com/Esri/jquery-mobile-map-js
![Page 58: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/58.jpg)
Auto-recenter after orientation change
![Page 59: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/59.jpg)
Multiple page app – Map Life Cycle Listen for “helper-map-loaded” event
![Page 60: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/60.jpg)
Putting it all together PhoneGap + jQuery + ArcGIS
Andy Gup
![Page 61: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/61.jpg)
PhoneGap + jQuery + Arcgis
![Page 62: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/62.jpg)
assets/www/
![Page 63: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/63.jpg)
Host JS libs locally (if possible)
![Page 64: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/64.jpg)
Set PhoneGap config.xml
![Page 65: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/65.jpg)
Native wrapper – home view
![Page 66: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/66.jpg)
Andy Gup
Putting it all together
![Page 67: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/67.jpg)
Going Offline
Why? A need for editing and mapping offline Apps used in areas of limited or no connectivity Re-use JavaScript skills Cross-platform Github.com/esri/Offline-editor-js (sample library)
![Page 68: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/68.jpg)
What does offline JavaScript mean?
Take map tiles offline Storing/syncing feature edits Storing/syncing attachments - TBD These work in browser and with PhoneGap!
![Page 69: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/69.jpg)
Offline Demo – trailyelper
![Page 70: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/70.jpg)
GPS Best Practices
When viewing non-map pages - Do not write points to map - Cache points in localStorage (if needed)
![Page 71: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/71.jpg)
Enable Geolocation* STEP 1 $ cordova plugin add org.apache.cordova.geolocation STEP 2 - in app/res/xml/config.xml STEP 3 - in app/AndroidManifest.xml
![Page 72: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/72.jpg)
GPS Best Practices
When returning to map page - “helper-map-loaded” event - Turn GPS back on (or set a boolean) - Recenter map - Write cache points to map
![Page 73: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/73.jpg)
Working with GPS
![Page 74: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/74.jpg)
Working with other libraries
github.com/esri sencha-touch-map-checkin-js bootstrap-map-js jquery-mobile-map-js dojo-bootstrap-ui
![Page 75: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/75.jpg)
Questions?
Andy Gup Developer Evangelist Team [email protected] @agup Lloyd Heberlie JavaScript API Team [email protected] @lheberlie
![Page 76: Building Native Apps with ArcGIS API for JavaScript Using ...2014 International Developer Summit -- Technical Workshop Presentation, Building Native Apps with ArcGIS API for JavaScript](https://reader031.vdocuments.mx/reader031/viewer/2022011906/5f36e35002b6cc36213c99b4/html5/thumbnails/76.jpg)