and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing

Getting Started with Web DevelopmentGetting Started with Web Development

and the ArcGIS API for JavaScriptand the ArcGIS API for JavaScriptHeather Gonzago and Anne Fitz👉 Slides & demos: 👈https://bit.ly/3cnPptf

1

AgendaAgenda

SetupFirst stepsWorking with layersSymbols and renderersMake the map interactiveFiltering dataWidgets

2

Presentations accessible via GitHubPresentations accessible via GitHub

This session focuses on version 4.x

Concepts remain similar between versions 3.x and 4.x

👉 Slides & demos: 👈https://bit.ly/3cnPptf

3

Where do I begin?Where do I begin?

4

Which version of the API is best?Which version of the API is best?

5

Developer SetupDeveloper Setup

6

JSAPI ResourcesJSAPI Resources

IncludesJSHint �leTypeScript de�nition �leBuild tools (Webpack, npm)Working with frameworks

7

Get the APIGet the API

CDNCustom buildsDownload builds

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css"> <script src="https://js.arcgis.com/4.15/"></script>

8

CSSCSS

contains styles for entire API

View.css is smaller in size but better choice if only needing basic CSS (maps,widgets, etc.)

Main.css

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/view.css">

Custom CSS (SASS)

9

First stepsFirst steps

How will your app be written?Separate �les or one combined �le?

10

MapViewMapViewVisualize data within Map or Scene

 const map = new Map({    basemap: "gray-vector" });

const view = new MapView({  container: "viewDiv",  map: map,  zoom: 12,  center: [-117.168, 32.776]});

const view = new SceneView({  container: "viewDiv",  map: map,  camera: {    heading: 210,    tilt: 78,    position: {      x: -8249335,      y: 4832005,      z: 50.7,      spatialReference: {        wkid: 3857     }   } }});

11

Demo: Make a mapDemo: Make a map

12

Common GotchasCommon GotchasModule order makes a differenceMissing moduleMissing CSS

13

Add layersAdd layers

1. Load module 2. Create layers 3. Set properties 4. Add to map or scene

Basic steps remain the same

Various layer types

14

PropertiesPropertiesNo need for a bunch of get/set statements

can be set in constructor

const map = new Map();map.basemap = "streets";const view = new MapView();view.center = [-100, 40];view.zoom = 6;

Properties

const map = new Map({  basemap: "streets"});const view = new MapView({  map: map,  center: [-100, 40],  zoom: 6});

15

Watch for property changesWatch for property changes

for changes

Can also use utility methods

See this in action with the sample

Watch

layer.watch("loadStatus", function(status) {// do something});

esri/core/watchUtils

Watch for Changes

16

Demo: Add layer to sample appDemo: Add layer to sample app

17

RenderersRenderers

a set of symbols to use for the layer

Sets the rules on how the symbols are used

Basic coding pattern

De�ne

const layerRenderer = new UniqueValueRenderer(); // Set the rendererconst featurelayer = new FeatureLayer({  url: "featurelayer url",  renderer: layerRenderer // pass in renderer to featurelayer using default properties})

18

SymbolsSymbolsRenderers use symbology, e.g. points, lines, polygonsCan set symbology via a renderer's visual variables

const sizeVisualVariable = {  type: 'size',  field: 'WIND_SPEED',  minDataValue: 0,  maxDataValue: 60,  minSize: 8,  maxSize: 40}// Apply visual variable to rendererrenderer.visualVariables = [sizeVisualVariable]// Create the layerconst featureLayer = new FeatureLayer({  url: '<URL to feature layer',  outFields: ['*'],  renderer: renderer // Add the renderer to the feature layer})

19

AutocastingAutocasting

No need to Require() the module

Look for the label in the API Reference

shows autocasting in action

Read more about in the Guide

Create a layer from portal item sample

Autocasting

20

Demo: Update a feature layer's rendererDemo: Update a feature layer's renderer

21

Map interaction using popupsMap interaction using popups

Responds to mouse clicks

Provides info on:feature attributeslocationsearch results

Customizable

22

PopupTemplatePopupTemplateView has a default instance of FeatureLayer has associated propertyPosition the popup using

popuppopupTemplate

dockOptions

const popupTemplate = new PopupTemplate({  title: "Title of the popup",  content: [{    // Set the content here }]});

const featurelayer = new FeatureLayer({  url: "url to the feature layer",  outFields: ["*"],  popupTemplate: popupTemplate,  renderer: renderer});

23

Demo: Add a popup to the mapDemo: Add a popup to the map

24

Filtering dataFiltering data

All data is �ltered on the client = better performance

FeatureFilterFeatureLayerView

switch (selectedCrimeAmount) {  case '100':    crimeLayerView.filter = {      where: "CrimeCnt >= '" + selectedCrimeAmount + "'"   }    break  case '50-99':    crimeLayerView.filter = {      where: '(CrimeCnt >= 50)' + 'AND' + '(CrimeCnt <= 99)'   }    break  case '49':    crimeLayerView.filter = {      where: "CrimeCnt <= '" + selectedCrimeAmount + "'"   }}

25

Demo: Filter features within a layerDemo: Filter features within a layer

26

Using web mapsUsing web maps

Reduces coding effortRetains all customizations with rendering, popups, etc.

const map = new WebMap({  portalItem: {    id: "f9a9a7e3857d4d51b2c801cf8c399add" // Remember portalItem is autocasted }});

27

Demo: Add a web map to an applicationDemo: Add a web map to an application

28

WidgetsWidgets

Similar coding pattern across all widgets Encapsulates functionality

view.when(function){  const featurelayer = map.layers.getItemAt(1);  // 1. Create the widget  const legend = new Legend({    // 2. Specify properties for widget    view: view,    layerInfos: [{        layer: featurelayer,        title: "Name"   }]});  // 3. Add widget to the view UI  view.ui.add(legend, "top-right");});

29

View UIView UIPosition widgets

AddMoveRemove

view.ui.add(legend, "bottom-left");view.ui.add(swipe);

30

Demo: Add widgets to the applicationDemo: Add widgets to the application

31

Where can I get more info?Where can I get more info?SDK DocumentationEsri-related training and webinarsJavaScript online training, free and not-so-freeUser forums, e.g. , , , etc.GeoNet StackExchange Spatial Community in Slack

32

33