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

27. 27
INTEGRATING JAVASCRIPT LIBRARIES

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

32. RICHARDMARLOW
richard.marlow@intertek.com
+44 1428 728552
intertek.com/energy-water/