Introduction to the ArcGIS API for JavaScript
University of Wisconsin, Nov 6, 2018
Our contact info
Andy Gup, JavaScript API
-
agup@esri.com
David Martinez, Python
-
dmartinez@esri.com
First, some cool demos
ArcGIS API for JavaScript
Powerful 2D/3D visualizations
High-performance client-side analysis
Responsive UI widgets
Your first map
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 10
});Lab 1 - build a map
1. Go to DevLabs - https://developers.arcgis.com/labs/
2. Go to JavaScript =>
Lab 1 - Discussion!
Try out the Challenges at the bottom of the Lab.
Open the developer console network tab and reload app
Accessor
Base class of most of the API.
Consistent pattern:
- Universal constructor
- getting and setting properties value
- watching properties change
- unifed object constructor
- computed properties
- autocast
Accessor
Single object constructor, no more 3+ constructors
No more property-change events, Use watch()
In 3.x, listen for extent-change event.
In 4.x extent watchers will be called very often
Accessor
const map = new Map(...);
const view = new MapView({ map: map });
// watch for view scale updates
view.watch('extent', (newValue, oldValue, property, target) => {
console.log(newValue, oldValue, property, target);
})
// Geometry
var polyline = {
type: "polyline",
paths: [
[-111.30, 52.68],
[-98, 49.5],
[-93.94, 29.89]
]
};
// Symbol
var polylineSymbol = {
type: "simple-line",
color: [226, 119, 40],
width: 4
};
// Graphic
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol
});
view.graphics.add(polylineGraphic);Lab 2 - points, lines, polygons
Lab 2 - add point, line and polygon
Skip the Challenges at the bottom
Lab 2 - Discussion!
Skip the Challenges at the bottom of the Lab. We have a separate lab coming up.
API Reference: esri/geometry/Geometry
Lab 3 - create a layer
Many different types of layers
https://developers.arcgis.com/javascript/latest/api-reference/index.html
Lab 3 - create a layer
https://developers.arcgis.com/labs/arcgisonline/import-data/
Make the layers public
Do the Find the URL challenge
Lab 4 - Add Layer to Map
Using custom content
Using the layer from the previous lab, remove the '/0' from the url:
https://developers.arcgis.com/labs/javascript/add-layers-to-a-map/
Lab 4 - Discussion!
Open developer console network tab
Find the feature layer query request. Take a look at service parameters in the REST API doc:
https://developers.arcgis.com/rest/services-reference/feature-service.htm
Renderers
Powerful visualization tools
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html
Sketch & Edit
Lab 5 - Buffer & Intersect
Client-side Geometry engine.
Fast!! No server round-trips needed.
https://developers.arcgis.com/labs/javascript/buffer-and-intersect-geometry/
Lab 5 - Discussion
Lab 6 - configure popup - Part 1
Lab 7 - configure popup - Part 2
https://codepen.io/andygup/pen/bveoKE?editors=1000
Objective: add code to dock the popup
Hint: Use dockEnabled and dockOptions
Lab 6 & 7 - Discussion!
Feature Layers have built-in popups
You can also manually configure popups
Popups can be docked
Lab 8 - Arcade
ArcGIS scripting Engine
Create new values from existing data fields in renderers, popups, labels
https://developers.arcgis.com/javascript/latest/guide/arcade/
Lab 8 - Arcade
Modify this arcade to symbolize trips greater than or less than $6/mile
https://codepen.io/andygup/pen/BwNjMM?editors=1010
Lab 9 - Style Vector Map
Style a vector tile basemap
https://developers.arcgis.com/labs/arcgisonline/style-a-vector-basemap/
When done, go to the item in your ArcGIS Online org and get the root.json URL (hint: View Style button)
Lab 9 - Style Vector Map
Add your new vector map to an app.
Lab 10 - Widgets
Lab 10 - Widgets
Wrap up!
Questions?
Introduction to the ArcGIS API for JavaScript
By Andy G
