Show Menu
Cheatography
  1. Home >
  2. Programming >

VSCode ArcGIS JS API 4.x snippets Cheat Sheet Cheat Sheet (DRAFT) by

Build compelling web apps that unlock your data’s potential with interactive user experiences and stunning 2D and 3D visualizations.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

HTML: configs, layouts, ...

getApi
Add the API depend­encies from the CDN
dojoConfig
Configure Dojo loader to load our modules
fullMap
Sets the map to cover 100% of the screen
calcite
Add the Calcite depend­encies from the CDN

Basics

apiKey
User esriConfig to set your API Key
map
Create a new Map
basema­pStyle
Supported basemaps using API keys
mapView
Create a new MapView (2D)
sceneView
Create a new SceneView (3D)
webmap
Create a WebMap and a MapView
webscene
Create a WebScene and a SceneView
graphic
Create a new Graphic
spatia­lRe­ference
Spatia­lRe­ference constr­uctor props
disabl­eNa­vig­ation
Disable view navigation
limitV­iew­Extent
Set view constr­aings
Learn more about Maps (2D), Scenes (3D), Spatial references, Basemap layers and Graphics.

MapView events

To learn more about events and watching changes please check these demo apps: MapView events, watch for changes and sketch widget events explorers

Layers

featur­eLayer
Create a new Featur­eLayer
geojso­nLayer
Create a new GeoJSO­NLayer
graphi­cLayer
Create a new Graphi­cLayer
findLayer
Find a layer by it's name
hitTest
Recover clicked geometries
featur­eLa­yerCS
Create Featur­eLayer (clien­t-side)
queryLayer
Server­-side query
queryL­aye­rView
Client­-side query
layerWhen
When layer the instance is created
featur­eRe­duc­tio­nCl­uster
Configures clustering using Featur­eRe­duc­tio­nCl­uster
featur­eEffect
Featur­eEffect constr­uctor props

Popups

popupT­emplate
PopupT­emplate constr­uctor props
fieldInfo
FieldInfo constr­uctor props
expres­sio­nInfo
popup/­Exp­res­sio­nInfo constr­uctor props
action­Button
Action­Button constr­uctor props
popupA­cti­onL­istener
Capture custom action click
popupT­ext­Content
TextCo­ntent constr­uctor props
popupM­edi­aCo­ntent
MediaC­ontent constr­uctor props
popupF­iel­dsC­ontent
Fields­Content constr­uctor props
popupA­tta­chm­ent­sCo­ntent
Attach­men­tsC­ontent constr­uctor props
popupC­ust­omC­ontent
Custom­Content constr­uctor props
chartM­edi­aInfo
Charts constr­uctor props
imageM­edi­aInfo
ImageM­edi­aInfo constr­uctor props
Go to the API reference to learn more about the Popup and PopupT­emplate modules.

Preview popup chart types

Widgets

sketch
Create new Sketch widget
search
Create new Search widget
elevat­ion­Profile
Create new Elevat­ion­Profile widget
swipe
Create new Swipe widget
 

Geometries

pointG­eometry
Point constr­uctor props
polyli­neG­eometry
Polyline constr­uctor props
polygo­nGe­ometry
Polygon constr­uctor props
circle­Geo­metry
Circle constr­uctor props
Use geogra­phi­cTo­Web­Mer­cator and webMer­cat­orT­oGe­ogr­aphic to convert geometries with Geographic coordi­nates (wkid 4326: lon, lat) to Web Mercator (wkid 3857: x, y) and vice versa.

Also use geomet­ryF­romJSON and geomet­ryJ­son­Utils to create a geometry from a JSON object.

Symbols

simple­Mar­ker­Symbol
Simple­Mar­ker­Symbol constr­­uctor props
pictur­eFi­llS­ymbol
Pictur­eFi­llS­ymbol constr­­uctor props
simple­Lin­eSymbol
Simple­Lin­eSymbol constr­­uctor props
simple­Fil­lSymbol
Simple­Fil­lSymbol constr­­uctor props
WaterS­ymb­ol3­DLayer
WaterS­ymb­ol3­DLayer constr­­uctor props
symbol­Fro­mJSON
Init symbol using class method fromJSON()
symbol­Jso­nUt­ils.fr­omJSON
Init symbol using jsonUtils

Symbol types (preview)

Renderers

simple­Ren­derer
Create a new Simple­Ren­derer
unique­Val­ueR­enderer
Create a new Unique­Val­ueR­enderer
classB­rea­ksR­enderer
Create a new ClassB­rea­ksR­enderer
dotDen­sit­yRe­nderer
Create a new DotDen­sit­yRe­nderer
heatma­pRe­nderer
Create a new Heatma­pRe­nderer
dictio­nar­yRe­nderer
Create a new Dictio­nar­yRe­nderer
render­erF­romJSON
Init renderer using class method fromJSON()
render­erJ­son­Utils
Init renderer using JsonUtils
Configure renderers using the new Map Viewer (or the classic one) and then use the JSON object with the render­erF­romJSON or render­erJ­son­Utils snippets to instan­tiate a renderer class.

Read Data-d­riven visual­ization to learn more about renderers.

Preview renderers

Miscelanea

webgl
Detect WebGL support