1. Getting started with ArcGIS API for JavaScript
Chapter 10
Getting started with ArcGIS API for JavaScript
Instructor
These slides are for Getting to Know Web GIS, third edition (Esri Press 2018).

2. Chapter objectives Understand the basics of JavaScript API.
Debug JavaScript.
Adapt JavaScript samples.
Develop 2D and 3D GIS apps using JavaScript.
Handle JavaScript events.
Use widgets.
Use tasks.
This chapter is long. It can be split into two meetings:
One focuses on ArcGIS Online standard analysis tools.
The other focuses on custom web tools (i.e. geoprocessing services) and big data tools (i.e. GeoAnalytics tools).
Getting to Know Web GIS, third edition

3. ArcGIS Online / ArcGIS Enterprise Client apps
Data sources
ArcGIS Online / ArcGIS Enterprise
Client apps
CSV files
Shapefiles
KMLs
File geodatabases
Enterprise geodatabases
Database management systems
Imagery
Drone images
Sensor and real-time data
Big data
Layers in portal
Feature layers
Raster tile layers
Vector tile layers
Scene layers
Dynamic map services
Web tools/geoprocessing services
Image services
Stream services
Geometry services
Living Atlas of the World
Server object extension
Server object interceptor
Feature layers
Web
maps/
scenes
Scene layers
ArcGIS API for JavaScript
Ready-to-use apps and configuration templates
Configurable app templates
Story Maps
Web AppBuilder
Operations Dashboard
Solutions apps
Insights
Collector, Survey123, Explorer, and Navigator
Workforce
AppStudio
ArcGIS Earth
ArcGIS Indoors viewers
ArcGIS VR 360
ArcMap
ArcGIS Pro
Drone2Map
CityEngine
Click to add notes.
Custom apps
ArcGIS API for JavaScript
ArcGIS Runtime SDKs
ArcGIS API for Python
Getting to Know Web GIS, third edition

4. Web GIS programming Client side Database server side GIS Server &
Web server side
SQL
Stored procedures
Triggers
SQL Server Integration Services
Oracle Data Integrator
Java
.NET
Python …
Java
.NET
PHP
Python …
Data exchange formats
JSON
XML …
For browsers
HTML/CSS/JavaScript
For desktops and mobiles
C/C++
Java
Objective-C and Swift
.NET
Python …
Click to add notes.
Getting to Know Web GIS, third edition

5. Why learn JavaScript?
The most widely used languages in the world today.
Almost all web pages include some JavaScript code.
A bridge between web browsers and web servers.
Interacts with servers to use the servers’ capabilities.
Works with web browsers to make web pages dynamic and interactive.
Cross-platform (almost), no plugin is needed.
Runs inside web browsers.
Supports mobile platform well with HTML 5 and responsive web design.
Relatively easy.
Powerful (with the development of frameworks)
Dojo, jQuery, Ext JS, d3.js, and Angular.js …
JS is one of (or the) most used programming language in the world.
The JS API is based on Dojo framework, and can work with other frameworks.
**IDE is not even needed – you can start simple, only need a webserver & text editor like notepad.
Getting to Know Web GIS, third edition 5

6. JavaScript, HTML, and CSS
Behavior and user interaction
You need to know all three:
HTML: a markup language used to package your content
CSS: a formatting language used to style content
JavaScript: creates dynamic and interactive features for your web pages
HTML
Structure and content
CSS
Presentation and style
Click to add notes.
Getting to Know Web GIS, third edition

7. Tutorial demo Learn the basics of HTML, JavaScript, and CSS at
Click to add notes.
Getting to Know Web GIS, third edition

8. JSON (JavaScript Object Notation)
A lightweight and easy to understand format for storing and exchanging data {
"students": [{
"name": "John",
"hobby": "Basketball",
"address": {
"street": "380 New York St",
"zip": 92373 }
}, {
"name": "Lisa",
"hobby": "Movie",
"street": "270 State Ave",
"zip": 92000 }]
Syntax:
Data is in field_name: value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
Click to add notes.
Online resources
Tutorial:
Online validator:
Getting to Know Web GIS, third edition

9. ArcGIS API for JavaScript
Click to add notes.
Getting to Know Web GIS, third edition

10. ArcGIS API for JavaScript
Provides a lightweight way to embed maps and tasks in web apps
Built on top of HTML5 (HTML, JavaScript, and CSS) and Dojo
Full integration with ArcGIS platform
Interacts with servers to access mapping, querying, editing, and analysis functions
Displays server responses in maps, views, pop-ups, charts, and other formats
Interacts with users
Cross browsers and cross devices
Click to add notes.
ArcGIS API for JavaScript
Dojo
Chrome
Firefox
Safari
Internet Explorer
Others
Getting to Know Web GIS, third edition

11. Interacts with ArcGIS REST API
Relies on ArcGIS REST API to interact with ArcGIS Online & ArcGIS Enterprise
ArcGIS Online
ArcGIS Enterprise
ArcGIS REST API
HTTP requests
HTTP responses
Click to add notes.
ArcGIS API for JavaScript
Dojo
HTML, CSS, JavaScript
Web browsers
Getting to Know Web GIS, third edition

12. An example
For example, the REST URL of the second layer (earthquakes) in a map service is
The URL to query for earthquakes with magnitudes greater than 5 is
where=MAGNITUDE%3E5&outFields=LOCATION%2CMAGNITUDE%2CYEAR&returnGeometry=true&f=pjson
ArcGIS API for JavaScript
Builds the URL for you,
Sends the request to the server, and
Handles the response
Click to add notes.
Getting to Know Web GIS, third edition

13. ArcGIS API for JavaScript website
Click to add notes.
Getting to Know Web GIS, third edition

14. Main classes MapView SceneView Views Map WebScene Map/scene CSVLayer
FeatureLayer
GraphicsLayer
SceneLayer
StreamLayer
ImageLayer
MapImageLayer
VectorTileLayer
TileLayer
Layers
Tasks
Portal
QueryTask
Portal
IdentifyTask
SimpleRenderer
UniqueValueRenderer
ClassBreaksRenderer
Renders
PortalUser
PrintTask
PortalItem
SimpleMarkerSymbol
PictureMarkerSymbol
SimpleLineSymbol
SimpleFillSymbol
TextSymbol
2D symbols
PointSymbol3D
LineSymbol3D
PolygonSymbol3D
LabelSymbol3D
3D symbols
RouteTask
PortalQueryParams
Click to add notes.
Geoprocessor
PortalQueryResult

15. Classes, objects, and constructors
A class contains constructors that are invoked to create objects from the class blueprint.
An object is an instance of a class.
Syntax: var anObj = new aClassName(parameters);
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map
var map = new Map({
basemap: "streets"
});
var view = new SceneView({
container: "viewDiv",
map: map
Click to add notes.
Getting to Know Web GIS, third edition

16. Properties Heading Position X, Y, Z fov (field of view in degrees)
An object has properties
Position
X, Y, Z
Heading
Tilt
fov (field of view
in degrees)
MapView
map
extent
center
rotation
scale
zoom …
SceneView
map
center
scale (at center)
zoom (at center)
camera
viewingMode …
heading
tilt
position
fov …
Click to add notes.
Getting to Know Web GIS, third edition

17. Set and get properties objectName.propertyName
or objectName.set("propertyName")
objectName.get({"propertyName":value})
view.zoom = 6;
var zoomLevel=view.zoom
view.set({"zoom": 6});
var zoomLevel=view.get("zoom")
Click to add notes.
Getting to Know Web GIS, third edition

18. Methods Syntax objectName.methodName(parameters)
Methods are the actions or functions that the objects of a class can perform
Syntax
objectName.methodName(parameters)
Map
add()
findLayerById()
remove() …
Click to add notes.
var featureLayer = new FeatureLayer({
url: "
});
map.add(featureLayer);
Getting to Know Web GIS, third edition

19. Events
“Things" that happen to HTML elements. JavaScript can "react" on these events
To monitor an object’s property change, use obj.watch(property, callback)
mapView.watch("extent", function(response) {
console.log("the response object is the new extent");
});
To handle the result of a task or a class, use promise
obj.then(callback, errback)
Click to add notes.
queryTask.execute(parameters).then(
function getResults(queryResult) { },
function getErrors(err) { } );
Getting to Know Web GIS, third edition

20. Steps using the API to build a basic map/scene app
Reference the ArcGIS API for JavaScript.
Load API modules needed for your functions.
Create your map or scene.
Create your 2D map view or 3D scene view.
Define page content & the spaces (divs) to hold your maps and scene views.
Style the page.
Click to add notes.
Read:
Getting to Know Web GIS, third edition

21. A 2D map view sample
Demo:
Click to add notes.
Getting to Know Web GIS, third edition

22. A 3D scene view sample
Demo:
Click to add notes.
Getting to Know Web GIS, third edition

23. Load your layers manually
Not recommended
Use a web map or a web scene:
Easy, with styles and pop-ups already configured
Add layers manually:
Your need to choose the right layer types
CSVLayer
FeatureLayer
MapImageLayer
TileLayer
VectorTileLayer
StreamLayer …
Note several class names have changed.
Getting to Know Web GIS, third edition

24. Load layers via web maps/scenes
recommended
Web map
var webmap = new WebMap({
portalItem: {
id: "f2e9b f390ca4ac3671cfa72" }
});
var view = new MapView({
map: webmap,
container: "viewDiv"
Advantages
Already has layers added
Already has layers configured
styles
pop-ups
labels
visible scale ranges
Already has security configured
Much easier than writing your own code to add and configure layers, and manage access to your map
Web scene
var scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096" }
});
var view = new SceneView({
map: scene,
container: "viewDiv"
Click to add notes.
Getting to Know Web GIS, third edition

25. Adapting samples and combining samples
Replace web map/scene id or layer URLs
Replace attributes
Replace field names with names for the new service(s) or layer(s)
Replace the values of the related fields
Replace related symbols
To match the new feature layers and graphics
Combining samples:
Need to load the required modules for all samples
More work to be done based on the specific situation
Click to add notes.
Getting to Know Web GIS, third edition

26. Widgets
A widget is a self-contained component that you can easily incorporate into your JavaScript apps
Examples:
BasemapToggle
Compass
Legend
Locate
Popup
Search
Track ….
Click to add notes.
Getting to Know Web GIS, third edition

27. Steps to incorporate widgets (add to your view)
Load the module(s) in the require function
Insatiate the widget and define its properties
var legend = new Legend({ view: view
});
Add to your map/scene view with a position
view.ui.add(legend, “top-right");
top-left
top-right
bottom-left
bottom-right
require([
"esri/widgets/Legend", …
Click to add notes.
Getting to Know Web GIS, third edition

28. IDE (Integrated development environment)
Ease your programming experience by providing
Syntax highlighting
IntelliSense:
context-aware
code-completion
Simple IDEs:
Sublime Text
NotePad++ …
Click to add notes.
Getting to Know Web GIS, third edition

29. JavaScript debugging
The process of finding and fixing the defects in code.
Supported in most today’s web browsers.
Press the F12 key to access the developer tools.
Click to add notes.
Getting to Know Web GIS, third edition

30. Tutorial demos
Sample code for this demo is available at
Or find demos at ArcGIS Dev Labs:
Click to add notes.
Getting to Know Web GIS, third edition

31. Tutorial Create several web apps for the following tasks:
Display earthquakes and tectonic boundaries in 2D and 3D views.
Link two views so that the 3D view will follow the 2D view as you pan, zoom, and rotate the 2D view.
Add a widget.
Add the query capability.
System requirements:
Chrome web browser.
A JavaScript editor: e.g., NotePad++ or Sublime Text
ArcGIS Online: Serving services. No accounts are needed.
Click to add notes.
Getting to Know Web GIS, third edition

32. Summary
Built on top of JavaScript and Dojo framework, ArcGIS API for JavaScript provides libraries for you to develop custom web GIS apps.
The API interacts with GIS servers via ArcGIS REST API. Server responses are typically in JSON format.
The API has core classes corresponding to 2D/3D views, maps/scenes, various layers, renderers, symbols, portal, and various tasks.
The steps to develop a basic app using the API include: reference the API, load required modules, create your map or scene, create the view, define the spaces (divs) to hold the view, and style the page.
The steps to adapt a sample include: replace URLs (and portal item ids), replace attribute names (and values), and replace related symbols.
Click to add notes.
Getting to Know Web GIS, third edition

33. Assignment Develop a web app using JavaScript API Submit Requirements:
Find a sample or multiple samples on the JavaScript API website or ArcGIS Dev Lab.
Adapt the sample(s).
Use a web map/scene or layers different from the original sample(s).
Incorporate a task (query, geoprocessor, or other types).
Incorporate a widget.
Submit
The URL of the original sample(s) with which you started.
Your new source code.
Click to add notes.
Getting to Know Web GIS, third edition

34. Reading: Chapter 10, Getting to Know Web GIS, third edition
Questions?
Reading: Chapter 10, Getting to Know Web GIS, third edition
Click to add notes.
Getting to Know Web GIS, third edition