33
Kristian Ekenes & MohanRaj Balumuri ArcGIS API for JavaScript: Using Arcade with your Apps

ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

  • Upload
    others

  • View
    31

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Kristian Ekenes & MohanRaj Balumuri

ArcGIS API for JavaScript: Using Arcade with your Apps

Page 2: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Session Goals

Overview of Arcade

Using Arcade in the ArcGIS JS API

Take your apps to the next level

Page 3: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

What is Arcade?

• An expression language primarily designed for ArcGIS web maps and web scenes• ArcGIS Pro• Runtime SDKs• JavaScript API• Web apps

• Used to provide extra bit of logic to make a map more dynamic

Page 4: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Arcade Purpose

Arcade is NOT intended to be a Full Programming / Scripting Language• Goal : Lightweight and Simple• Equivalent to a Spreadsheet Cell Calculation

Not a replacement for Python for geoprocessing and Automation

Input ValuesArcade

ExpressionResult Value

Page 5: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Unit Conversion

Page 6: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Why another language?

Page 7: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

ArcGIS: Make, Share, Anywhere

Page 8: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

ArcGIS: Make, Share, Anywhere - Challenges

Mobile and Native Apps

Browser based Apps

• Size of Executable• Security

• Native Access

• Page Size• Security

• XSS• No Binaries

Traditional Development / Scripting Languages

Page 9: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Arcade Goals

Portable• Write an Expression in Pro, have it run in a Browser, or on a Device

Secure• Ensure that Expressions or Scripting do not compromise Security

Lightweight• Most requirements for Scripts and Expressions are Lightweight. The

language should be small, and fast

Geospatial• Scripts should treat Geospatial as First Class Members

Page 10: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Language Overview

Page 11: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Arcade : Language FeaturesDesigned for Simple Expressions

• Single Line - Implicit Returns • Case Insensitive Language• Dictionary Syntax for Field Access

Has Language Features to Support more Complex Scripts• Type System• Implicit and Explicit Type Casting• Flow Control Statements: IF, FOR• Variable Declaration and Assignments• User Defined Functions

Arcade Scripts run and return a value. They are self contained and cannot alter their environment.

Page 12: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Profiles

Page 13: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Global Variables and Profiles

Popup

LabelingFeature Z

Visualization

Attribute RuleConstrain

Attribute RuleValidation

Attribute RuleCalculation

Field Calculate*

Not implemented in the JS API*Not publicly documented

Page 14: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Exploring Profiles and Functions in the Playground

Page 15: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Arcade and the ArcGIS JS API

ESRI JS APIVersion 3.27

ESRI JS APIVersion 4.10

Page 16: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

ESRI JS API : Arcade Expressions

Expression Properties are set as Literal Strings

Arcade Interpreter will Execute valueExpression for every Feature

var renderer = {type: “class-breaks”,valueExpression: "( $feature.TOT_VOTES / $feature.REG_VOTERS ) * 100",valueExpressionTitle: "Voter turnout"classBreakInfos: [ ... ],

};

Page 17: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

var labelClass = new LabelClass({labelExpressionInfo: {

expression: "$feature.STATION_NAME"},labelPlacement: "below-right",minScale: 2500000

});nameClass.symbol = new TextSymbol();// set the label class to the feature layerfeatureLayer.labelingInfo = [ labelClass ];

Arcade Expressions can be used For Labeling

Page 18: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Practicalities: Scripts in Script

Scripts within Scripts• Lots of String Escaping.• Embed Script in HTML using MIME type text/plain

<script type="text/plain" id="myScript">Proper($feature.CityName)

</script>...var arcadescript = document.getElementById(“myScript").text;

Page 19: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

New FeaturesSince last Dev Summit

Page 20: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

FeatureSet Functions

Represents a connection to a set of Features in memory or in a serverLazy, iterable, and chainable

var publicLandFeatures = FeatureSetByName($map, "public lands", ["class"], true); var sensitiveAreas = Filter(publicLandFeatures, "class = 'sensitive'"); Count( Intersects( sensitiveAreas, $feature ) );

Page 21: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Demos

Page 22: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Generate Arcade for your usersTake your apps to the next level

Page 23: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Demos

Page 24: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Generate Arcade for your users

Page 25: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Generate Arcade for your users

Page 26: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS
Page 27: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Expression sharing

Page 28: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Future

Page 29: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Adding Functions & Profiles

Identifying common operations and use cases

• Let us know what you need!

Page 30: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Finding Arcade Resources

Page 31: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

ResourcesFor Arcade Documentation https://developers.arcgis.com/arcade

Playgroundhttps://developers.arcgis.com/arcade/playground/

Using Arcade with JS APIhttps://developers.arcgis.com/javascript/latest/guide/arcade/index.html

Blogs and Postshttps://www.esri.com/arcgis-blog/?s=#&tag=arcade-expressions

Arcade Expression sharing repohttps://github.com/Esri/arcade-expressions/

Page 32: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS

Complete answersand select “Submit”

Scroll down to find the feedback section

Select the session you attended

Download the Esri Events app and find your event

Please Take Our Survey on the App

Page 33: ArcGIS API for JavaScript: Using Arcade with your Apps€¦ · ArcGIS API for JavaScript: Using Arcade with your Apps. Session Goals. Overview of Arcade. Using Arcade in the ArcGIS