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...

Sign up for your free

ArcGIS Developer Account

developers.arcgis.com

&

Introduction to Codepen.io

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

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

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!

We just touched the surface!

Over 200 samples and 16+ DevLabs

Getting Help

Introduction to developer mapping apps with Javascript

By Andy G

Introduction to developer mapping apps with Javascript

  • 1,706