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, [Link], and [Link]
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
[Link]
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: [Link]/js/js_json_intro.asp
"address": {
"street": "270
• Online validator: [Link] 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
[Link]
• The URL to query for earthquakes with magnitudes greater than 5 is
[Link]
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
[Link]
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
[Link] [Link] = 6;
var zoomLevel=[Link]
or [Link]("propertyName") [Link]({"zoom": 6});
[Link]({"propertyName":value}) var zoomLevel=[Link]("zoom")
Getting to Know Web GIS, fourth edition
Methods
The actions or functions that the objects of a class can perform
Syntax
• [Link](parameters)
• add()
Map • findLayerById()
• remove()
• …
var featureLayer = new FeatureLayer({
url: "[Link]
});
[Link](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
[Link](property, callback)
[Link]("extent", function(response) {
[Link]("the response object is the new extent");
});
To handle the result of a task or a class, use promise
[Link](callback, errback)
[Link](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({ [Link](legend, “top-right");
"esri/widgets/Legend", view: view
… });
top-left top-right
bottom-left bottom-right
[Link]
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