ArcGIS API for JavaScript

An IntroductionJo Fraley & Rene Rubalcava

Outline

• Setup

• First Steps

• Working with layers

• Symbols and Renderers

• Make your map interactive

• Widgets and styling

Presentations accessible on GitHub

• Focusing on version 4.0 for this presentation

• Concepts are similar between 3.x and 4.0

• Version 3.x UC 2015 presentation and demos are available

• https://github.com/Esri/uc-2106-JSAPI-introduction

Where to begin?

https://developers.arcgis.com/javascript

Which API version should I use?

Developer Setup

• Choose an IDE

• Code assist

• Helpful tools

Get the API

• CDN

• Custom builds

• Download API

JSAPI-Resources

• Collection of resources to aid development in the JSAPI

• Some of these include:

- JSHint file

- Helps to detect errors and potential problems in code

- Typescript definition file

- Provides code assist in some IDE’s such as WebStorm and Visual Studio

- Build tools, e.g. Bower for custom builds of the API

- Callback page for popups using OAuth2 for security

CSS

• Main.css

- Contains styles for all of API.

• View.css

- Better choice, if only need CSS for a basic map with default

widgets. Smaller in size.

• Custom css (sass)

- Provide widget css source

First steps

• How will application be written?

• Separate files or one combined file?

• Demos shows separate HTML, CSS,

and JS files

• Reference JSAPI and any additional

references, e.g. CSS, any other

libraries in markup

Make a map

Tip

• Modules out of order

• Blank tiles -> Can’t find CSS

Map View

Add layers

• Layer types

- FeatureLayer

- MapImageLayer

- ImageryLayer

- TileLayer

- VectorTileLayer

- GroupLayer

- SceneLayer

- … and more

Layer coding pattern

1. Load module

2. Create layer

3. Set properties

4. Add to map (or scene)

Working with Properties

• All properties for each class can be set in its constructor

• No need to explicitly call Get/Set for properties

• Watch for property changes

• Use esri/core/watchUtils to aid in watching property changes

Demo: Add layer to sample app

Renderers

• Define a set of symbols to use for the layer

• Set rules on how the symbols should be used

• Basic coding pattern

Symbols

• Renderers make use of symbology

- Points, lines, and polygons

• Pass the symbol to the renderer

Autocasting

• Allows you to pass in a property without having to specifically require it in the code.

- Efficient

- Less code

- Less overhead

• Not sure if a property can use this functionality?

- Check property’s API reference for Autocast label

Demo: Update feature layer renderer

Interactive Map

• Make map interactive

- Popups

- Query

- Filter out features based on a definition expression

Popups

• Responsive widget

• Information about

- Clicked location

- Feature

- Search results

• Customizable

FeatureLayer PopupTemplate

• View has associated popup

• Popup content is set via PopupTemplate

• FeatureLayer has popupTemplate

• Popup’s dockOptions

Popup: Custom Actions

Demo: Add a popup to the map

FeatureLayer definition expressions

• SQL where clause used to filter features on

the client

• Use with large datasets

• View automatically refreshes

Demo: Filtering features using a definition expression

Web map

• Reduce code by using a web map

- No need to write a bunch of code

• Retains all customizations with rendering, popups, filtering, etc.

- Basemap

- Layers

- Popup

- Symbology

- Extent

- Basemap

Demo: Add a web map to an application

Widgets

• BasemapToggle

• Compass

• Home

• Legend

• Search

• Popup

• Track

• Locate

• Print

• LayerList

• SmartMapping

• Specific encapsulated

functionality

Widget coding pattern

• Load module

• Create widget

• Set widget properties

• Add widget to UI

Default UI

Widget coding pattern

1. Load module

2. Create widget

3. Set options

4. Add widget to the UI

Demo: Add widget to app

Customize widget appearance

• CSS

• SASS

Want more info?

• Documentation

- https://developers.arcgis.com/javascript/

• Check out Esri-related training classes and webinars

• Additional Resources

- JavaScript online training classes: free and fee-based

Additional sessions

• ArcGIS API for JavaScript: What's New at v4.x

• ArcGIS API for JavaScript: Advanced Topics

• ArcGIS API for JavaScript: Build 3D Web Apps

• ArcGIS API for JavaScript: Data Visualization

• ArcGIS API for JavaScript: Tips and Tricks for Dev and Debug Apps

Please take our SurveyYour feedback allows us to help maintain high standards and to help presenters

Find the session you want to review

Find your event in the Esri Events App

Scroll down to the bottom of the session

Answer survey questions and submit