Break on Through (To The Java(Script) Side) - Smart Development - Esri UK Annual Conference 2017
•Download as PPTX, PDF•
1 like•359 views
In June 2016, Esri retired the ArcGIS API for Flex. This presentation aims to demonstrate the many benefits of migrating existing Flex applications to JavaScript, utilising the full suite of well-documented online resources and additional training options available from Esri. These have enabled Intertek to undertake this transition seamlessly and taking advantage of enhanced features provided by using JavaScript.
Report
Share
Break on Through (To The Java(Script) Side) - Smart Development - Esri UK Annual Conference 2017
- 1. BREAK ON THROUGH (TO THE JAVA(SCRIPT) SIDE) Richard Marlow – GIS & Applications Developer 16th May 2017
- 2. PRESENTATION OVERVIEW Insert Footer Here 2 Introduction The ArcGIS API for Flex The ArcGIS API for JavaScript Project Requirements Available Resources 01 05 04 03 02 06 08 07 Integrating JavaScript Libraries Next Steps Summary
- 3. WHO WE ARE • 42,000 employees in 1,000 locations in over 100 countries • UK-based multi-national, dating back to 1896 • LSE: FTSE 100 company – Support Services Industry Sector • Market capitalisation £4 billion • Annual Revenue £2 billion 3
- 4. WHO WE ARE 4 Planning, Design, Consents & Permitting • Strategic Environmental Assessment • EIA – Environmental Impact Assessment • Permitting & compliance • Regulatory advice & stakeholder engagement • Concept design, feasibility study & FEED • Site investigation/survey • Technical specification & procurement support Metocean, GIS & Modelling • Hydrodynamic Modelling (erosion, wave, sediment transport) • Water Quality Modelling • Geographical Information Systems • Meteorological & oceanographic analysis • Subsea infrastructure route design • Marine logistics planning & scheduling Risk & Asset Management • Project management • ENVID - Environmental risk identification • EMS – Environmental assurance • Environmental Baseline Studies (in collaboration with Intertek labs) • Offshore construction supervision • O&M strategy & support • Decommissioning Intertek Energy & Water Consultancy Services
- 5. BSc. Marine Geography MSc. Coastal Conservation & Management GIS Consultant Passion for maps…marine spatial data Interest in automation… customisation…making things happen! GIS Developer WHO AM I?
- 6. THE ARCGIS API FOR FLEX • Framework for building web applications • MXML and ActionScript languages • ArcGIS Viewer for Flex • No programming required! • Include standard mapping functionality ArcGIS API for Flex • Customisation! • Build rich applications from scratch • However… • Reliant on dependencies • API was retired in June 2016 6
- 7. THE ARCGIS API FOR JAVASCRIPT • Combines modern web technology and powerful geospatial capabilities • 2D and 3D APIs available • Built on Dojo • Comprehensive reference documentation • Extensive collection of samples • Available in several different configurations • Mobile optimisation • Compatibility with other JavaScript frameworks (E.g. jQuery) 7
- 8. THE PROJECT AND CHALLENGE 8 The Project • Intertek employed as Technical Consultant for a cable replacement project • A number of discrete webGIS platforms developed to support the project • Systems migrated into a single application in early 2016 The Challenge • To develop additional tools and integrate new data into the existing webGIS application • Requirement to upgrade and enhance the system • Opportunity to transpose the existing Flex application into a JavaScript Application
- 9. THE PROJECT AND CHALLENGE 9 Existing Flex Application • Created using the ArcGIS Viewer for Flex • Customisations made using Flash Builder • System delivers easy to use functionality via a variety of widgets, including query, drawing and measuring tools
- 10. THE PROJECT AND CHALLENGE 10 New JavaScript Application • Incorporation of data from historic surveys • Creation of a number of bespoke GIS tools: • “Search KP” Tool • “Depth of Burial Profile” Tool • “Show Layer and Attributes” Tool • Inclusion of the existing tools: • Navigation Tools • Get XY Tool • Change Basemap • Drawing Tools • Measuring Tools • Identify Tool • Provision of a Document Management System
- 11. THE PROJECT AND CHALLENGE 11 However… • No experience in developing webGIS applications using Javascript!
- 12. AVAILABLE RESOURCES 12 Online • ArcGIS API for JavaScript Guide: • API Reference • Sample Code • Sandbox • Forums • GitHub: • “Social Coding” solution • Versioned controlled code repositories • Esri provides samples, templates and utilities on GitHub Classroom-Based Training • Developing Web Apps with the ArcGIS API for JavaScript: • Lessons • Samples • Specific questions answered
- 13. 13 AVAILABLE RESOURCES – ARCGIS API FOR JAVASCRIPT
- 14. 14 AVAILABLE RESOURCES – ARCGIS API FOR JAVASCRIPT
- 15. 15 AVAILABLE RESOURCES – API REFERENCE • “The API Reference is your friend” – Grimm, G., (August, 2016)
- 16. 16 AVAILABLE RESOURCES – API REFERENCE
- 17. 17 AVAILABLE RESOURCES – SAMPLE CODE
- 18. 18 AVAILABLE RESOURCES – FORUMS
- 19. 19 AVAILABLE RESOURCES – GITHUB
- 20. 20 AVAILABLE RESOURCES – CLASSROOM-BASED TRAINING • “Developing Web Apps with the ArcGIS API for JavaScript” • 3 day course • Goals: • To develop and deploy applications • Incorporate services • Configure API components • Best practices • Training Guide is “The Bible”: • Working with the Map • Tasks and Widgets • Data Queries • Rendering Data • Using the Geoprocessor • Editing Features • Developing an Application
- 21. 21 FROM FLEX…TO JAVASCRIPT NAVIGATION TOOLS DRAWING TOOLSBESPOKE GIS TOOLS • Search KP • Depth of Burial Profile • Show Layer and Attributes GET XY TOOLIDENTIFY TOOL LAYER & LEGEND WIDGET MEASURE WIDGETBASEMAPS WIDGET ENTER DOCUMENT MANAGEMENT SYSTEM
- 22. 22 • Example: Basemaps Gallery FROM FLEX…TO JAVASCRIPT
- 23. 23 • Example: Show Layer & Attributes FROM FLEX…TO JAVASCRIPT
- 24. 24 INTEGRATING JAVASCRIPT LIBRARIES • jQuery: • Open source, feature-rich JavaScript library • Simplifies JavaScript programming • Cross-browser compliant • EXPERT PROGRAMMING EXPERIENCE NOT REQUIRED! • jQueryUI: • Set of: • Interactions: E.g. Draggable, Droppable, Resizable • Widgets: E.g. Buttons, Datepickers, Menus, Tabs • Effects: E.g. Toggle, Hide, Color Animation
- 25. 25 INTEGRATING JAVASCRIPT LIBRARIES • Example: jQueryUI – “Draggable” • Add references to the jQuery JavaScript files • Check example from online documentation and implement: • Create HTML content:
- 26. 26 INTEGRATING JAVASCRIPT LIBRARIES • CanvasJS: • Rich, lightweight and responsive dashboards • Create a number of different charts • API includes several different themes
- 28. 28 INTEGRATING JAVASCRIPT LIBRARIES • DataTables: • Table plug-in for jQuery • Add advanced table interaction • Search, pagination, column ordering • Extensive documentation
- 29. 29 INTEGRATING JAVASCRIPT LIBRARIES • DataTables example:
- 30. 30 WHERE NEXT? • Continued learning • Esri JavaScript API 4.3 opportunities • Integration of real time data • Review existing code • Share knowledge with others
- 31. 31 SUMMARY • Flex products and API – a solid platform for developing geospatial applications • HOWEVER – reliance on dependencies • ArcGIS API for JavaScript – powerful API for visualising, analysing and interacting with data • Available resources ensure rapid development…even for the inexperienced developer! • Instructor-led Training • “The Bible” • The Sandbox • Esri Forums • Integration of enhanced JavaScript features • Continued learning…continued enhancement of products