Starting Fresh with JavaScript 4.x Marla Kostuk Bradley Snider

Demo overview Benefits of the new API Starting fresh Maps and Views 3D extents Ground UI Widgets and ViewModels Properties Promises Questions

About the ArcGIS API for JavaScript 4.0 Reimagine the API in terms of its support for both 2D and 3D, its ease of use as a JavaScript API, its ability to work with map and layer web resources stored as items in the ArcGIS geoinformation model and its support for building engaging and elegant user experiences.

ArcGIS API for JavaScript 4.0: Reimagining the API Make a 3D map as easily as a 2D map Easily integrate with your web GIS Author, manage, and mash-up layers using layer items Build a great user experience Create meaningful visualizations of your data Enable interactivity using the local geometry engine Bring in vector tile layers Login to the platform and access secured content Integrate GIS workflows using tasks Work with 3rd Party Tools

Why do I need to start fresh? The cleanest approach is to re-write apps from scratch when building with the 4.x API 4.x is a substantial overhaul of the ArcGIS API for JavaScript Significant changes to the object model in order to enable higher productivity and effectiveness. MapViews and SceneViews now handle data visualization within 2D and 3D maps, respectively Methods are no longer needed to get and set properties Watch properties Asynchronous promises Widgets now handle styling and business logic separately, with widget and widgetModel classes 3D SceneViews have camera (view point) and center (focus) properties Parody - Not all 3.x capabilities are included in the initial 4.x release. Does the app need 3D visualization? If so, use 4.x. Do you need a particular functionality from 3.x that's not yet available in 4.x? https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html

Maps and views 4.x adds a key class; the view Map – holds the data Base layers Operational layers Ground (3D, more on this later) View – Contains the visualization information for the data Extent (2D) Center and camera (3D, more on this later) UI (widgets, padding, etc.)

Map instantiation 4.x 3.x var map = new Map({ basemap: "streets" });   var view = new MapView({ container: "viewDiv", map: map, // references map object center: [-118, 34.5], zoom: 8, var map = new Map("mapDiv", { center: [-118, 34.5], zoom: 8, basemap: "streets" });

3D: SceneView Center – focal point Camera – vantage point Heading X, Y, Z Center – focal point X, Y, Z Camera – vantage point Heading 0 - 360° Tilt 0 - 90° Tilt X, Y, Z

demo 3D Extents

Map instantiation 4.x: 3D SceneView 4.X: 2D MapView var view = new SceneView({ container: "viewDiv", map: map, // references map object camera: { position: [-118, 34.5, 707], tilt: 81, heading: 50 } }); 4.X: 2D MapView var view = new MapView({ container: "viewDiv", map: map, // references map object center: [-118, 34.5], zoom: 8, }); center: { position: [-118, 34.5, 207] }, camera: { position: [-115.2, 51.2, 722207] }

demo Ground

Toggle the ground elevation Instantiate with ground elevation map.ground.layers.forEach(function(layer) { layer.visible = layer.visible ? false : true; }); var map = new Map({ basemap: "streets“, ground: "world-elevation“ }); Add an elevation layer var elevationLayer = new ElevationLayer({ url: "https://server.domain.com...“, visible: true });

View UI ui: { components: ["zoom", "compass", "attribution", "home"], padding: 20 }, … view.ui.add(toggle, "top-right");

Widgets 4.x separates the styling and business logic All widgets now have a ViewModel, used to customize the user experience and interface. Benefits: Easier to share logic between widgets and code bases Easier to work with other frameworks, such as Bootstrap Much cleaner code

Widgets

Widgets Note how much cleaner the 4.x code is. 3.x 4.x

Get Properties Directly from Object

Get Properties Let the get() function do the work

Set Properties On the object

Set Properties Use the set() function

Watch Properties .watch(property, callback)

demo

Promises Understand .then()

demo

Thank you! Marla Kostuk Bradley Snider

Please take our Survey Find your event in the Esri Events App Your feedback allows us to help maintain high standards and to help presenters Find your event in the Esri Events App Find the session you want to review Scroll down to the bottom of the session Answer survey questions and submit