ArcGIS API for JavaScript

What's new in the ArcGIS API for JavaScript (July 2020)

Version 4.16 is released, and it includes many new features and enhancements for building state-of-the-art, unique, and powerful web mapping applications. This blog explores some of the release highlights such as cluster labeling, line and polygon vector symbology, water reflections in 3D scenes, and a new way of bringing your data to life with layer blending. Keep reading to explore the release or jump ahead to the topic you are interested in.

Layer BlendingCluster labelingOGC API FeaturesWater reflectionsIM modificationsBuilding ExplorerVector SymbologyImageryFeature tablePopupsAPI ModernizationMore stuff…

Layer blending

Introducing blend modes! This powerful capability allows you to dynamically apply Photoshop-like effects to maps, all within the browser. Rather than producing a static image, you end up with a live, interactive map. This powerful capability allows you to apply one of more than 30 blend modes to your layers to create interesting effects, or even to produce what seems like a new layer.

In this animation, a layer which shows particulate matter 2.5 (PM 2.5) air quality data for the US between 1998 and 2016 based on NASA SEDAC gridded data is blended using multiply with a hillshade layer which shows an interesting relationship between mountains, valleys and the concentration of air pollution.

So what are blend modes anyway?

In the photography and graphic design world, blend modes are commonly used when restoring or retouching photos. In the mapping world, they are used to blend layers together to create an interesting effect in a layer, or even to produce what seems like a new layer from blending the layers in the map. Unlike the method of using transparency which can result in a washed-out layer, blend modes can create a variety of very vibrant and intriguing results by blending a layer with the layer(s) below it. Blending is supported with all layer types, and you can blend any number of layers together.

To blend layers in your app, you simply set the blendMode property on the layer:

const layer = new FeatureLayer({
    url: “url”,
    blendMode: “multiply”
});

An alternative to implementing blending in your code is using the ArcGIS Online map viewer beta (after the upcoming update) to create a web map with blended layers, and then loading the web map in your app. This is a great way to play around with the layers you want to blend, the variety of modes available, and the ordering of layers.

Cluster labeling

We introduced clustering in the 4.x API last December (4.14). Now you can label clusters – not only with a simple count of features that each cluster represents, but with the full flexibility of the API’s LabelClass capabilities. That means you can:

This example is showing clustered earthquakes. Labels are only displayed when there are more than 100 features in a cluster. To implement this, I set a where clause:

where: “cluster_count > 100
Clustered earthquakes with conditional labeling.

OGC API Features – the evolution of WFS

A new layer type called OGCFeatureLayer allows you to visualize data from a OGC API Features service in both 2D and 3D. The OGC API Features standard is the successor to the earlier OGC Web Feature Service (WFS) specification. The new standard is adopted by several server implementations as it has many improvements over WFS; including faster performance and a modernized design that is consistent and modularized. Support for WFS is still under consideration.

Water reflections

We continue to improve the 3D visual quality of scenes. Earlier this year, we added physically based rendering (PBR) material support and improved overall lighting, and with this release we are introducing water reflections. With this addition, you can achieve a realistic look by displaying reflections of buildings, mountains and other 3D objects in the water by setting view.environment.lighting.waterReflectionEnabled to true. Other properties such as setting the dominant color of the water, the strength of the wave, and the direction of the waves can add to this realistic visualization of water.

Water reflections are enabled and can be seen of trees and buildings in this 3D scene.

Integrated mesh modifications

Change the shape of an IntegratedMeshLayer by applying client-side modifications. A new class SceneModifications allows you to change aspects of an integrated mesh in the following ways:

SceneModifications can be persisted using WebScene.save(), allowing users to share their modified integrated mesh through web scenes.

Integrated mesh modification.

New Building Explorer widget

Better understand comprehensive building data coming from building information models (BIM) using the new Building Explorer widget. A preconfigured and intuitive UI allows you to isolate specific levels, categories, or construction phases for one or multiple buildings in your scene.

You might recognize this widget from the Scene Viewer – now that it is part of the API, you can create a similar experience in your app, or customize the UI for your specific BIM workflows. The widget provides simple options to toggle the UI components’ visibility.

Line and polygon vector CIM symbols

We introduced vector symbology for 2D maps at version 4.12. This gave developers the opportunity to build beautiful maps that display crisp at any scale (see the comparison between a scaled image and a scaled vector symbol below).

Until now, only point symbols were supported. With this release, you can now display lines and polygons in 2D maps. This enhancement allows you to create multi-layered line symbols that allow you to represent cased roads, use custom line patterns, or place markers anywhere along your line. Under the hood this is powered by CIM (via the API’s CIMSymbol class), which is the ArcGIS platform’s cartographic information model. Symbols can have multiple layers which can be controlled separately and dynamically, using expression logic and feature attributes.

Support was also added for reading and writing CIM symbols in web maps.

This trail map of Lake Tahoe shows off the new vector line and polygon symbols.

Powerful client-side capabilities for imagery

Advances have been made in the API in versions 4.15 and 4.16 to enable you to leverage the power of the client for imagery. In the past, imagery projection and rendering were performed on the server and delivered to the client as JPEG/PNG images for display. The new ImageryTileLayer allows you to perform client-side rendering of raster data, and dynamic capabilities such as:

A RasterShadedReliefRenderer is used to show the sun's relative position taken into account for shading the image. Changing the altitude and azimuth properties adjusts the sun's position dynamically in the browser.

Editing in feature tables (beta)

We’ve added editing support to the FeatureTable widget. If the feature service that the table is displaying data for has editing enabled, and the feature table’s editingEnabled property is set to true, end users will be able to edit their attribute data by double-clicking a cell.

Popups: Add custom content

Now, in addition to fields, media, text, and attachments, you can embed just about anything inside a popup element called CustomContent. This type of content element can work with content such as strings, HTMLElements, Widgets, and/or a Promise.

How does it work? A PopupTemplate formats and defines the content of a popup for a specific Layer or graphic. You can specify any combination of popup elements that you want to display in the content section of the popup when the user clicks on a feature such as formatted attribute information, a chart, and your custom content like a button or API widget.

In this example, the API's search widget is embedded in the popup as a custom content element.

API Modernization

At the 2020 Esri Developer Summit, we announced that we are working to modernize how the ArcGIS API for JavaScript is consumed for seamless integration with frameworks and developer tooling. As part of this project, the following updates are included in version 4.16:

Keep your eyes peeled for an upcoming blog all about API modernization.

IE 11 and Edge Legacy Deprecated

Internet Explorer 11 is now deprecated at version 4.16 of the JavaScript API. It is also being deprecated in other parts of the ArcGIS platform; for example ArcGIS Online and ArcGIS Enterprise have announced the deprecation of IE11 and Edge Legacy along with an end of support date in ArcGIS Online by the end of 2020. Users are highly encouraged to move to a modern browser such as Mozilla Firefox, Google Chrome, Apple Safari, or Microsoft Edge. While Internet Explorer 11 continues to be supported, use of Internet Explorer 11 is discouraged, and support will be discontinued at a future release. Additional notice will be provided prior to the removal of support.

There’s a lot more to this release

There is a lot packed into this release. Several other enhancements can be explored in the release notes, such as:

Join us at the virtual 2020 Esri User Conference!

The 2020 Esri User Conference (Esri UC) is a completely virtual event designed to give users and students an interactive, online experience with Esri and the GIS community. There will be multiple ways in which to engage with the ArcGIS API for JavaScript development team including Streaming live technical sessions with Q&A, a virtual showcase with one-on-one meetings and chat rooms. Our team has put together a collection of presentations that cover best practices and explore some of our latest innovations for building powerful and engaging web apps with the ArcGIS API for JavaScript. Check out this virtual tour of the UC for web developers.

Did you know? You can get access to the full conference if you are part of an organization that is current on a maintenance plan or subscription, including users with ArcGIS for Personal Use licenses, distributors and partners. If you are a current student or 2020 graduate, you can see the plenary, and all the presentations. Register here.

Take care and stay healthy, web developers!

About the author

Julie Powell is a Technical Product Manager, with her primary focus on the ArcGIS API for JavaScript. She interfaces with a wide user community to maintain awareness and insight into GIS community needs, meanwhile contributing feedback to development teams in order to help ensure users can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie presents GIS technology trends and innovative solutions at the Esri Developer Summit, Esri International User Conference, Esri Latin American User Conference, and other regional conferences. Julie brings seventeen 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:

Leave a Reply

Please Login to comment

Next Article

Earthquake impact analysis using ArcGIS Online and ArcGIS Living Atlas

Read this article