ArcGIS API for JavaScript: Getting Started

Andy Gup – René Rubalcava –

@agup@odoenet

Agenda

Introduction to the ArcGIS API 4.x for JavaScriptFundamentals and PatternsPlatform IntegrationVisualizations (2D and 3D)New FeaturesBonus - Custom BuildsQuestions

Introduction to the ArcGIS API 4.x for JavaScript

Simplified and consistent APIWrite apps in ES6 or TypeScriptModern browser support (IE11+)3D support (No plugin required!)And many more!

Where to begin?

https://developers.arcgis.com/javascript

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

Hello World Map

const map = new Map( basemap: "streets" );

const view = new MapView( container: "viewDiv", map: map );

Fundamentals and Patterns

Map and View

Map

Contains Layers, data model for the worldMapView and SceneView

Responsible for rendering the Map

Map and View Relationship

Map and View Relationship

Basemap, Ground and Operational LayersLayers are separated into 3 main groups.

basemapground

operational layers

basemap and ground gives context to the operational layers .

Basemap, Ground and Operational Layersbasemap and ground can be set by well-know ids:

const map = new Map( /* streets, satellite, hybrid, terrain, topo, gray,

dark­gray, oceans, national­geographic, osm, dark­gray­vector, gray­vector, streets­vector, topo­vector, streets­night­vector, streets­relief­vector, streets­navigation­vector */ basemap: "streets" /* world­elevation */ ground: "world­elevation" );

Basemap, Ground and Operational Layers

or by specifying them

BasemapsA PEN BY odoe

Basemap, Ground and Operational Layersbasemap can also be set by item id.

const map = new Map( basemap: portalItem: id: "8b3d38c0819547faa83f7b7aca80bd76" );

Basemap, Ground and Operational Layers

Map.layers contains Layer objects with the operational data the userinteracts with.

Webinar - Add a FeatureLayerA PEN BY odoe

Basemap, Ground and Operational Layers

GroupLayer

Webinar - GrouplayerA PEN BY odoe

Layers and LayerViewsFeatureLayer TileLayer

GraphicsLayer Grouplayer

MapImageLayer VectorTileLayer

ImageryLayer CSVLayer

GeoRSSLayer KMLLayer

ElevationLayer OpenStreetMapLayer

SceneLayer (3D) PointCloudsLayer (3D)

IntegratedMeshLayer (3D) StreamLayer

WebTileLayer WMSLayer

WMTSLayer

Layers

Layer.fromPortalItem(...)

Portal ItemsA PEN BY odoe

Layers

MapImageLayer

Webinar - MapImageLayer - RendererA PEN BY odoe

Layers

VectorTileLayer

Webinar - VectorTileLayerA PEN BY odoe

LayerViews

LayerViews

LayerViews renders the layers on the screen. API.

Give info about layer renderingGive access to data available to draw on the screen

FeaturesElevation data

LayerView

LayerViews

There is a layerview per layer in the mapexcept if the layer is not supported

incompatible SpatialReferenceincompatible tile cache3D layer and a MapView

Like Map , a view has multiple collection of layerviews.

LayerViewsaccess a layerview with

or

View.whenLayerView()

const map = new Map( basemap: 'topo' ); const mapView = new MapView( map: map, container: 'mapDiv' ); const layer = new FeatureLayer(...) map.add(layer); view.whenLayerView(layer) .then((layerView) => layerView.visible = false );

View.allLayerViews

LayerViews

LayerView - SolutionA PEN BY odoe

AccessorAutocastingProperty watchingConsistent API

AccessorAutocasting

const view = new MapView( container: "viewDiv",

map: map, extent: // autocast to an Extent class xmin: ­9177811, ymin: 4247000, xmax: ­9176791, ymax: 4247784, spatialReference: 102100 );

Accessor

Property watching

Property ChangesA PEN BY odoe

Widgets!

~20 Widgets out of the boxWidgets help make great appsLess code for you to writeDesigned with responsive apps in mindWe'll look at a few key widgets

Default Widgets

MapView & SceneViewPopupAttributionZoom

SceneViewNavigationToggleCompass

Widgets: Popup

Responsive DesignSize changes depending on size of viewCan be docked to top, bottom, center and sidesPopup Sample

Popup DockingA PEN BY odoe

Widgets: ExpandCollapsable button/panelCan be used with widgets, dom node, HTMLDesigned for view component use

Widgets: Expand Sample

Expand WidgetA PEN BY odoe

Widgets: Expand Sample (Responsive)

Expand WidgetA PEN BY odoe

R P

ViewUseful for building apps

uipadding

view properties

View UIView has propertyCan has components that can hold...

Widget, DOM node, text, html string

ui

View UI

PositionsA PEN BY odoe

View UI: ComponentsProvide easy way to add/position widgets on a view

const view = new SceneView( ... components: [ "attribution", "navigation­toggle", "compass", "zoom", legend, layeList ] );

Components Demo

ComponentsA PEN BY odoe

Platform Integration

With ArcGIS Portal and ArcGIS Online

Creating Hosted ServicesConsuming those services in the API

Platform Demo

PlatformA PEN BY andygup

Visualizations

Visualizations

Consumable via Portal ItemsSmart Mapping (platform) demo

Smart Mapping Demo

SmartMappingA PEN BY andygup

Visualizations

SimpleRendererA PEN BY andygup

Renderers

VisualizationsArcade Expressions

Simple Arcade Demo

SimpleArcadeA PEN BY odoe

Wind Arcade Demo

Wind ArcadeA PEN BY andygup

Visualizations3D Maps3D SceneLayer3D Local Scenes

New Features

WebGL FeatureLayerBeta feature in 4.5 release

var dojoConfig = has: "esri­featurelayer­webgl": 1 ;

WebGL FeatureLayer

WebGL FeatureLayerA PEN BY odoe

Draw API and SketchViewModel

SketchViewModelconst sketch = new SketchViewModel( view: view, pointSymbol: ... ,

polylineSymbol: ... , polygonSymbol: ... ); sketch.on("draw­complete", (event) => ...); sketch.create("polyline"); // point, polyline, polygon

SketchViewModel

SketchViewModelA PEN BY odoe

Draw APIMore fine-grained control

const draw = new Draw( view ); const action = draw.create(type); // point, polygon, polyline action.on("vertex­add", (event) => ...); action.on("vertex­remove", (event) => ...); action.on("cursor­update", (event) => ...); action.on("draw­complete", (event) => ...);

Draw API

Draw APIA PEN BY odoe

Custom Builds

Custom BuildsDojoWebpack

Dojo Builds

ProsCompactSingle file and layer builds (bundles)

ConsNot fastCan be complicated

Dojo Builds

npmnpm install ­­save arcgis­js­api

bowerbower install arcgis­js­api@4.4.0

Dojo Buildsbuild.profile.js

var profile = ... layers: "dojo/dojo": boot: true,

customBase: true, include: [ "app/main", ... ] , "esri/views/2d/layers/VectorTileLayerView2D": ... , "esri/core/workers/WorkerConnection": ... , "esri/views/vectorTiles/WorkerTileHandler": ... ,

Webpack Builds

ProsFastLots of community support

ConsNot fully compatible with Dojo loaderBuilt apps require CDN

Webpack Buildswebpack.config.js

ignore the esri and dojo modules

module.exports = ... externals: [

function(context, request, callback) if ( /^dojo/.test(request) || /^dojox/.test(request) || /^dijit/.test(request) || /^esri/.test(request) ) return callback(null, "amd " + request); callback(); ] ;

Developer Resourcesgithub.com/esri

JS API ResourcesGeoNet Community for Web Developers

Questions?Help us to improve filling out the survey