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

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

 

API Reference

Accessor

esri/core/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

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

Sketch & Edit

Sketch API - SketchViewModel


FeatureForm Widget + Demo


TemplatePicker coming soon






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

Combine geometry operations

 

Demo

 

 

 

 

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

Lab 10 - Widgets

20+ widgets and growing

 

Responsive.

 

Demo

 

 

 

 

 

 

Lab 10 - Widgets

Wrap up!

Questions?

Made with Slides.com