Announcements

It's here! ArcGIS API for JavaScript 4.0 Released

It is with great pleasure we announce the first release of the 4.x series of the ArcGIS API for JavaScript. You can now starting building web apps with the production release of the ArcGIS API 4.0 for JavaScript!

Version 4.0 and the 4.x series

The 4.x series represents a brand new edition of the JavaScript API that Esri is launching alongside the 3.x series. The goal of the 4.x series is to 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.

Version 4.0 allows developers to build full featured 3D applications powered by Web Scenes that can include rich information layers such as terrainbasemapsimageryfeatures, and 3D objects that can be streamed in via tile, feature, image and scene services. In addition, 4.0 also includes core capabilities for working with 2D Web Maps and Layers that can be used to build compelling 2D applications using the new programming pattern.

Developers will find the programming patterns for working in 2D and 3D to be pleasantly similar if not identical. Not all 2D layers and capabilities supported in the 3.x API are supported in 4.0 (the initial 4.x release). You can reference the Choosing a version guide to help you determine which API version to use for building your app, based on your requirements.

Here are a few of the capabilities of the API that we are excited about.

Make 3D maps as easily as 2D maps

The API presents a unified and elegant implementation for both 2D and 3D application development. With the introduction of map views, developers can render a map with a 2D view or a 3D view (or both) with just a few lines of code. In many cases, you can use the same code agnostically of whether the view is 2D or 3D because both views share the same implementation for layers, renderers, tasks, geometry, symbology, pop¬ups, navigation, and more. 3D adds 3D-specific concepts such as 3D symbols (think of a billboard symbol rather than a flat symbol on the ground), environment (atmosphere and lighting), and the camera. To learn more, see Getting started with 3D scenes and Getting started with 2D maps.

var map = new Map({
  basemap: "dark-gray",
  layers: [imageryLayer]
});

var view = new SceneView({
  container: "viewDiv",
  map: map
});
SceneView with an ocean temperature imagery layer
var map = new Map({
  basemap: "dark-gray",
  layers: [imageryLayer]
});

var view = new MapView({
  container: "viewDiv",
  map: map
});

MapView with an ocean temperature imagery layer

Easily integrate with your web GIS

Many developers have adopted the pattern of authoring a web map in ArcGIS Online and Portal for ArcGIS and consuming it in an app. They create beautiful visualizations of their data, configure pop-ups, and setup bookmarks, and then load the map into their app simply referencing the web map’s ID. With the 4.0 API, you can follow the same pattern with 3D maps using web scenes. This is accomplished by styling your map in ArcGIS Online or Portal for ArcGIS, saving it as a web scene, and then loading it in your app using the web scene’s ID.

var scene = new WebScene({
  portalItem: { 
    id: "3a9976baef9240ab8645ee25c7e9c096"
  }
});
var view = new SceneView({
  map: scene,
  container: "viewDiv"
});
Winter Sun Exposure – WebScene

Author, manage and mash-up layers using layer items

Layer items are similar to web maps in that they allow developers to setup initial extent, rendering, filtering, pop-ups, and other settings. In contrast to web maps, which, consist of the entire map, layer items represent individual map layers. This allows you to choose the individual layers needed for each application. If you are developing in a team environment, others can also consume your layers, which are represented in a meaningful and consistent way. The 4.0 API lets you load layers by referencing the layer item’s ID. For more information, see the Portal class in the API Reference.

Politics and Poverty
Create a layer from a portal item

Build a great user experience

The 4 API was designed to give you the tools to build an app that has a polished user interface and responsive design. Developer-friendly widgets, flexible UI placement, and the API’s new pop-up window are a couple of the capabilities in this new API that will help you build a slick app suitable for any screen size.


Create rich pop-up windows using the APIs new pop-up implementation

API widgets have been built from the ground up with a clean user experience and can be easily placed relative to one of the corners or offset from the edge. You can use widgets as-is or style them using CSS to change specific aspects of the widget such as button color. You can even take it a step further and completely replace the widget UI using the library of your choice such as React or jQuery. Learn more about widgets.


Theme all aspects of your application

Create thematic visualizations of your data

Turn raw data into information with simple layer styling and data-driven visualizations in 2D and 3D.  You can thematically represent data such as population or represent real-world values such as the width of a tree canopy or the height of a building. This is achieved by rendering features’ color, size and/or opacity based on one or more attribute values.

Thematically visualize buildings using continuous color
Scale feature sizes based on real world sizes

Create realistic visualizations of your data

Build cityscapes that accurately depict the geography of your urban landscape.  Use ArcGIS to publish realistic content such as textured buildings, trees, or signs and consume them using the new ArcGIS SceneLayer.  The SceneLayer can be used to display very large data optimized for display at any view.  Your 3D views come alive as you drape your content on top of Esri’s global elevation layer.  In addition, the 3D environment can be controlled to include the sun and stars positioned correctly at any date or time, the visual effect of the earth’s atmosphere, and the effects of the sun as it casts shadows across your buildings.

Realistic view of downtown San Diego
Set realistic environment settings including lighting, shadows and stars

Use the local geometry engine

The API’s local geometry engine enables you to perform operations such as buffer, measurement, and spatial intersect without having to make calls to the server – this means that apps can display immediate feedback to the user, enabling you to build highly interactive apps.

Check it out

Along with a brand new exciting JavaScript API, we are releasing a completely re-engineered web site to go along with the ArcGIS API for JavaScript 4.0 release. The new web site offers a responsive design, integrated search experience and enhanced API Reference.

The SDK site offers a wide variety of samples, conceptual documentation, and a rich API reference to help you get started building your first app with 4.0. The documentation is geared towards developers new to Esri’s JavaScript API, as well as developers that are familiar with 3.x and are considering migrating to 4.0.

As always, connect with other ArcGIS developers and engage with the Esri team on GeoNet. Happy coding!

About the authors

Working daily to elevate user happiness about reading the ArcGIS Maps SDK for JavaScript documentation. Occasionally blogging about the ArcGIS Maps SDK for JavaScript, and technical presenter at the Esri Developer Summit and User's Conferences. A Product Engineer on the Esri ArcGIS Maps SDK for JavaScript team.

Connect:

20+ years of experience with web mapping. Currently lead project engineer for the ArcGIS Maps SDK for JavaScript development team at Esri.

Connect:

Julie Powell is a Principal Product Manager, focusing on Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets. Julie has worked on a wide range of projects and consulting endeavors, including serving as technical lead for web mapping solutions for strategic customers.

Connect:

Next Article

Tighten Up Your Edits with Editing Constraints in ArcGIS Online

Read this article