1. Starting Fresh with JavaScript 4.x
Marla Kostuk
Bradley Snider

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

3. 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.

4. 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

5. 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?

6. 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.)

7. 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"
});

8. 3D: SceneView Center – focal point Camera – vantage point Heading
X, Y, Z
Center – focal point
X, Y, Z
Camera – vantage point
Heading °
Tilt °
Tilt
X, Y, Z

9. demo
3D Extents

10. 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, ] }

11. demo
Ground

12. 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: "
visible: true
});

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

14. 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

15. Widgets

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

17. Get Properties
Directly from Object

18. Get Properties
Let the get() function do the work

19. Set Properties
On the object

20. Set Properties
Use the set() function

21. Watch Properties
.watch(property, callback)

22. demo

23. Promises
Understand .then()

24. demo

25. Thank you!
Marla Kostuk
Bradley Snider

26. 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