Chapter 10

Getting started with

ArcGIS API for JavaScript
Instructor
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
• Work with graphics and feature layers

Getting to Know Web GIS, fourth edition

Data sources Desktop tools ArcGIS Online / ArcGIS Enterprise Client apps
CSV files Feature layers
layers Ready-to-use apps and
configurable templates
Shapefiles Raster tile layers
Web Configurable app templates
KMLs Vector tile layers maps/
web ArcGIS StoryMaps
File geodatabases Scene layers
layers scenes Experience Builder/Web AppBuilder
Enterprise geodatabases ArcMap Map image layers
ArcGIS Dashboards
Nonspatial data ArcGIS Pro Image layers ArcGIS Insights
Tools ArcGIS Feeds ArcGIS Collector, Survey123,
Photos/Imagery Drone2Map Stream layers Explorer, QuickCapture, Tracker,
Navigator, and Workforce …
Raster function templates ArcGIS Custom web tools
ArcGIS AppStudio
Sensor and real-time data CityEngine Standard tools ArcGIS Earth
Big data GeoAnalytics tools/big ArcGIS Indoors viewer
data analytics
… ArcGIS VR 360
Real-time analytics
AuGeo
360 VR Experience
…
Geometry services
Custom apps
Living Atlas of the World
ArcGIS
ArcGIS API
API for
forJavaScript
JavaScript
… ArcGIS Runtime SDKs
ArcGIS API for Python
…
Web GIS programming

Database server Client side

GIS server &
side web server side

• SQL • Java Data exchange formats For browsers

• Stored procedures • .NET • JSON • HTML/CSS/JavaScript
• Triggers • PHP • XML
• SQL Server Integration • Python • PBF For desktops and mobiles
Services • … • … • C/C++
• Oracle Data Integrator • Java
• Java • Objective-C and Swift
• .NET • .NET
• Python • Python
• … • …

Getting to Know Web GIS, fourth edition

ArcGIS for Developers

Web Apps

Pro Add-Ins Native

Device Apps
JavaScript
API
Runtime
Pro SDK SDKs

Python
Notebooks ArcGIS Python API,
ArcPy

Provides programming interfaces to support client-side, server-side, and database-side development

Getting to Know Web GIS, fourth edition
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

Getting to Know Web GIS, fourth edition

JavaScript, HTML, and CSS

You need to know all three:

JavaScript
• HTML: a markup language used to package Behavior and
your content user
interaction

• CSS: a formatting language used to style

content HTML CSS

Structure and Presentation

content and style
• JavaScript: creates dynamic and interactive
features for your web pages

Getting to Know Web GIS, fourth edition

Tutorial demo
Learn the basics of HTML, JavaScript, and CSS at
www.w3schools.com

Getting to Know Web GIS, fourth edition

JSON (JavaScript Object Notation)
A lightweight and easy to understand format for storing and exchanging data
{
"students": [{
Syntax:
"name": "John",
• Data is in field_name: value pairs "hobby": "Basketball",
"address": {
• Data is separated by commas
"street": "380
• Curly braces hold objects New York St",
"zip": 92373
• Square brackets hold arrays }
}, {
"name": "Lisa",
Online resources "hobby": "Movie",
• Tutorial: www.w3schools.com/js/js_json_intro.asp
"address": {
"street": "270
• Online validator: http://jsonlint.com State Ave",
"zip": 92000
}
}]
Getting to Know Web GIS, fourth edition
}
ArcGIS API for JavaScript

Getting to Know Web GIS, fourth edition

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

ArcGIS API for JavaScript

Dojo

Internet
Chrome Firefox Safari Others
Explorer
Getting to Know Web GIS, fourth edition
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 responses
HTTP requests

ArcGIS API for JavaScript

Dojo
HTML, CSS, JavaScript

Web browsers
Getting to Know Web GIS, fourth edition
An example

• For example, the REST URL of the second layer (earthquakes) in a feature service is
https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/NaturalDisasters/FeatureServer/1

• The URL to query for earthquakes with magnitudes greater than 5 is

https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/NaturalDisasters/FeatureServer/1/query?wh
ere=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
• Handles the response

Getting to Know Web GIS, fourth edition

ArcGIS API for JavaScript website
https://developers.arcgis.com/javascript

Getting to Know Web GIS, fourth edition

 Views MapView SceneView
Main classes
Map/scene Map WebScene

FeatureLayer GraphicsLayer SceneLayer

Layers
Tasks Portal VectorTileLayer TileLayer MapImageLayer

QueryTask Portal ImageLayer StreamLayer …

IdentifyTask PortalUser
Renderers SimpleRenderer UniqueValueRenderer ClassBreaksRenderer
PrintTask PortalItem

RouteTask PortalQueryParams SimpleMarkerSymbol PointSymbol3D

Geoprocessor PictureMarkerSymbol LineSymbol3D

2D symbols

3D symbols
PortalQueryResult
SimpleLineSymbol PolygonSymbol3D
Geoprocessor PortalQueryResult
SimpleFillSymbol
LabelSymbol3D
TextSymbol
…
…
Getting to Know Web GIS, fourth edition
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({ var map = new Map({

basemap: "streets" basemap: "streets"
}); });

var view = new MapView({ var view = new SceneView({

container: "viewDiv", container: "viewDiv",
map: map map: map
}); });

Getting to Know Web GIS, fourth edition

Properties
An object has properties
Heading
• map
MapView • extent Position
• center X, Y, Z
• rotation
• scale
• zoom FOV (field of view
• … in degrees)
Tilt

• map
SceneView • center
• scale (at center) • heading
• zoom (at center) • tilt
• camera • position
• viewingMode • fov
• … • …

Getting to Know Web GIS, fourth edition

Set and get properties

objectName.propertyName view.zoom = 6;
var zoomLevel=view.zoom

or objectName.set("propertyName") view.set({"zoom": 6});

objectName.get({"propertyName":value}) var zoomLevel=view.get("zoom")

Getting to Know Web GIS, fourth edition

Methods
The actions or functions that the objects of a class can perform

Syntax
• objectName.methodName(parameters)

• add()
Map • findLayerById()
• remove()
• …

var featureLayer = new FeatureLayer({

url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"
});
map.add(featureLayer);

Getting to Know Web GIS, fourth edition

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)

queryTask.execute(parameters).then(
function getResults(queryResult) { },
function getErrors(err) { }
);
Getting to Know Web GIS, fourth edition
Steps using the API to build a basic map or scene app

1. Reference the ArcGIS API for JavaScript.

2. Load API modules needed.
3. Create a map or scene.
4. Create a 2D map view or 3D scene view.
5. Define page content.
- Including the spaces (divs) to hold your maps and scene views
6. Style the page.

Getting to Know Web GIS, fourth edition

Tutorial demos
• Section 10.1: Explore the basics of 2D views and 3D views

Getting to Know Web GIS, fourth edition

Load layers via web maps/scenes
Web map var webmap = new WebMap({
portalItem: {
id: "f2e9b762544945f390ca4ac3671cfa72"
Advantages
}
• Already has layers added });
• Already has layers configured var view = new MapView({
o Styles map: webmap,
o Pop-ups
container: "viewDiv"
o Labels
o Visible scale ranges });
• Already has security configured
var scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096"
Much easier than writing your own code to }
add and configure layers, and manage });
access to your map
Web scene var view = new SceneView({
map: scene,
container: "viewDiv"
});

Getting to Know Web GIS, fourth edition

Tutorial demos
• Section 10.2: Load web maps and web scenes

Getting to Know Web GIS, fourth edition

Adapting samples and combining samples

• Adapting samples
1. Replace web map/scene IDs or layer URLs
2. Replace attributes
- Replace field names with names for the new service(s) or layer(s)
- Replace the values of the related fields
3. 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

Getting to Know Web GIS, fourth edition

Widgets

• A widget is a self-contained component that you can easily incorporate into your JavaScript apps
• Examples
- BasemapGallery
- Bookmarks
- LayerList
- Legend
- Popup
- Search
- Edit
- TimeSlider
- ….

Getting to Know Web GIS, fourth edition

Steps to incorporate widgets (add to your view)

Load the module(s) in the Insatiate the widget and Add to your map/scene
require function define its properties view with a position

require([ var legend = new Legend({ view.ui.add(legend, “top-right");

"esri/widgets/Legend", view: view
… });
top-left top-right

bottom-left bottom-right

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=widgets-legend

Getting to Know Web GIS, fourth edition

Integrated development environment (IDE)

• Ease your programming experience

by providing
- Syntax highlighting
- IntelliSense:
- Context-aware
- Code-completion

• Simple IDEs
- Sublime Text
- Notepad++
- …

Getting to Know Web GIS, fourth edition

JavaScript debugging

• The process of finding and fixing the defects in code

• Supported in most web browsers
• Press F12 to access the developer tools

Getting to Know Web GIS, fourth edition

Tutorial demo
• Section 10.3: Debug JavaScript and monitor HTTP traffic

Getting to Know Web GIS, fourth edition

Tutorial

Create several web apps for displaying a park design in 2D and 3D views
• Incorporate widgets in 2D and 3D views
• Handle mouse events to display Google Street View and pop-ups
• Use layers, renderers, and symbols for drive-through simulation in 2D and 3D views

• System requirements
- A web browser
- A JavaScript editor: e.g., Atom or Sublime Text
- ArcGIS Online: Serving services. No accounts are needed.

Getting to Know Web GIS, fourth edition

Tutorial demo
• Create web apps for displaying a park design in 2D and 3D views
• 10.4 Incorporate widgets in 2D and 3D views
• 10.5 Handle mouse events to display Google Street View and pop-ups
• 10.6 Use layers, renderers, and symbols for drive-through simulation in 2D and 3D views

Getting to Know Web GIS, fourth edition

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 typical steps to adapt a sample include: replace URLs (and portal item ids), replace attribute
names (and values), and replace related symbols

Getting to Know Web GIS, fourth edition

Assignment

Develop a web app using JavaScript API

Requirements
• Find a sample or multiple samples on the JavaScript API website
• Adapt the sample(s)
- Use a web map or scene that’s different from the original samples; you can use the web maps and scenes you created
earlier
- Incorporate a widget
- Listen to a type of mouse event and respond to it — for example, open a URL link

Submit
• The URLs of the original samples with which you started
• Your new source code

Getting to Know Web GIS, fourth edition

Discussion

Getting to Know Web GIS, fourth edition