Introduction to developing mapping apps with JavaScript
Hands-on Workshop
GIS in the Rockies - Sep 18, 2018
Andy Gup, Esri
agup@esri.com
github.com/andygup
@agup
Will Reynolds
wreynolds@esri.com
This afternoon's plan...
Build some fun mapping apps
Labs + Discussions
Intro to basic concepts of the ArcGIS API for JavaScript 4.x
12 labs
Hello World Map
Add a layer
Create a layer from scratch
Style a layer
Add point, line and polygon
Configure popup Part 1
Configure popup Part 2
Create a WebMap in ArcGIS Online
Add WebMap to custom app
Style your basemap
Style a feature layer
Add popups in WebMap
First, some cool demos
Before we dive in...
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
Lab 2 - add a layer
Lab 2 - Discussion!
Try out the Challenges at the bottom of the Lab.
Compare the amount of data returned in the Filter Features Challenge
Lab 3 - create a layer
Lab 3 - Discussion!
Take a look at service parameters in the REST API doc
https://developers.arcgis.com/rest/services-reference/feature-service.htm
Lab 4 - style a layer
Lab 4 - Discussion!
Geometries
Symbols
Graphics
Renderers
// 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);Geometries, symbols and graphics
var highwayRenderer = {
type: "simple",
symbol: {
type: "simple-line",
color: [226, 119, 40],
width: 4
}
};Simple Renderer
Lab 5 - add point, line and polygon
Skip the Challenges at the bottom
Lab 5 - Discussion!
Skip the Challenges at the bottom of the Lab. We have a separate lab coming up.
API Reference: esri/geometry/Geometry
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 - create a web map in ArcGIS Online
Lab 9 - add the web map to custom app
Use the appID from Lab 8 to create a custom app
Lab 8 & 9 - Discussion!
Using AGOL webmap uses considerably less code
You can wrap other custom elements and styling around the web map.
Lab 10 - style your basemap
https://developers.arcgis.com/labs/arcgisonline/style-a-vector-basemap/
Objective: use the basemap in a custom app.
Lab 10 - Discussion!
Use cases for styling your own maps?
Lab 11 - style a feature layer in MapViewer
https://developers.arcgis.com/labs/javascript/add-layers-to-a-map/
Objective: Import the featurelayer into a custom app.
Lab 11 - Discussion!
User interface based
Faster and less code than building renderers by hand.
Lab 12 - add popups in WebMap
https://developers.arcgis.com/labs/arcgisonline/configure-pop-ups/
Objective: import the webmap into custom app
Lab 12 - Discussion!
Faster and easier than writing custom code
Popups get inherited with webmap
What's in the API?
Layers
Geometries
Visualization tools - renderers, symbols, arcade
Client-side geometry engine
Widgets
Tasks
Authentication
And much more!