ArcGIS Maps SDK for JavaScript

What's New in ArcGIS Maps SDK for JavaScript (4.29)

The first JavaScript Maps SDK release of the year (v4.29) is out and is packed full of powerful new capabilities and enhancements! It introduces charts components, access to attributes in vector tile layers, interactive editing constraints, 3D Tiles support, and many other frequently requested bells and whistles. Read on to learn about some of the highlights in the release!

Maps SDK components (beta)

At version 4.28, we introduced a brand-new web component library that maximizes productivity of front-end web development. This release brings a new chart components library, enhanced component APIs, and improvements to the documentation and samples.

The new Charts components package offers a series of charting components that can be added to your applications to provide another dimension to maps – for example, emphasize trends or illustrate comparisons in your data. Each chart type provided in charts components can help to learn more about your data in following ways:

They can be configured in Map Viewer and saved to your webmap or layer, then simply loaded in the chart component in your app or defined directly in code using the Chart model class.

Display charts in your app using the new charts components.

In the above example, a chart was first configured in Map Viewer, and saved to the feature layer in ArcGIS Online. In order to display the chart in the app, the chart component is added via HTML:

<arcgis-charts-scatter-plot id="scatter-plot">
  <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
</arcgis-charts-scatter-plot>

The code snippet below gets the configuration from the feature layer, and wires together the layer and config with the chart.

//first get the feature layer that has charts configured with it, then...
const config = layer.charts[0];
const scatterPlot = document.getElementById("scatter-plot");

scatterPlot.config = config;
scatterPlot.layer = layer;

New documentation: We have added new guide topics describing programming patterns for working with web components and how to get started with your preferred frontend setup. More details about components have also been added to the component API reference of each component package.

Component API updates: In an effort to evolve the component API design, updates were made to the map components API. Some of the major changes include:

Visit the component reference for each component to check out the new properties, events, and methods.

The JavaScript Maps SDK’s component library will continue to expand over time with more pre-built ArcGIS experiences (encapsulated into web components) that can be easily brought into your own app.

Access attributes from Vector Tile Layers

Directly access attributes that are published with vector tile layers in 2D map views. When the map is clicked, the hitTest method finds the intersecting features within the vector tile layer and provides access to the features’ attributes. In the example below, attributes from the vector tile layer are displayed in a tooltip.

Note: While this approach is useful for basic scenarios, carefully consider whether feature layers are a better fit for your requirements. For example, as more attributes are published with vector tile layers, performance degrades and can become a slower alternative than feature layers which are highly optimized for working with attributes. Feature layers also provide continuous feature geometries while vector tile layers are limited to feature attributes.

Get features based on drawing order

When viewing pop-ups, features from multiple layers are now displayed in the order they are displayed in the map. This also applies when using the hittest method on a map view. Previously, features were displayed based on the order they were returned from the server.

Editing & sketching improvements

Interactive drawing with constraints: New editing constraints allow for more control and efficiency while drawing in 2D and 3D. By enabling tooltips and pressing Tab, the segment length, angles, and elevation constraints can be set directly in the tooltip. This capability is available in both the Editor and Sketch widgets, along with SketchViewModel.

Directional pad (D-Pad): With the new directional pad widget, you can move the 2D map in eight directions using directional controls, making it easier to pan the map when map navigation is disabled while editing.

Improved date and time editing: Editing date-only, time-only, and timestamp-offset field types are supported in feature table widget. The feature table experience was also updated to use the Calcite Date Picker, Time Picker, and Input Time Zone.

Version management

The new version management component (beta) supports branch versioning workflows in custom web applications, making collaboration on feature datasets easier. Users can access version lists, create versions, switch between versions, and update version settings with the version management component.

3D updates

3D Tiles support: The new IntegratedMesh3DTilesLayer loads integrated mesh data based on a hierarchical data structure defined by the 3D Tiles specification. 3D Tiles are an OGC standard used to visualize large amounts of 3D content, similar to Indexed Scene Layer (I3S) specification for scene layers. Like the existing integrated mesh, 3D Tiles can represent built and natural environments through realistic textures and elevation information can be used in combination with other geospatial content.

Custom visualizations and effects in 3D: Custom render nodes allow WebGL level access to the render pipeline of the Scene View to create custom visualizations and effects. These tasks can range from rendering objects, such as animating the moving parts of a windmill, to applying postprocessing effects, like a camera depth of field.

Render nodes are an evolution of the external renderer which allows even more flexibility. Render nodes can inject custom WebGL code in various stages of the render pipeline to alter their outputs. See the following samples to get a sense for the power of custom render nodes: Color modificationDepth of fieldCrossfade slide transitionAnimated Windmills

New 3D basemap styles: New 3D Basemap styles were added and existing 3D basemaps are no longer in beta. See the Basemap Gallery sample to explore the new styles.

Tiled display support: Developers can now surpass the limitations of a single browser to support large, tiled displays with high resolutions and fluid rendering performance. This is achieved using the enhancement to scene view which enables the rendering of a 2D sub-region of the camera.

The Scalable GIS Renderer project on GitHub illustrates how this can be used for viewing 3D ArcGIS online web scenes on display walls.

Oriented imagery: 360-degree images and editing support

360-degree images: Users can display and interact with 360-degree imagery with the Oriented Imagery Viewer widget, providing a panoramic view of the selected location.

Edit oriented imagery layers: Users can add, modify and delete images in an oriented imagery layer using the Editor widget.

Improved performance

Faster feature layers: We improved the performance and load time of feature layers that are styled with multi-layer CIM symbols in 2D map views.

Smart mapping: Generating heat map is 100x faster than version 4.28 when using smart mapping.

Interactive POIs and world view in basemaps

You can add interactive POIs from the places service in the light and dark navigation basemap styles. Additionally, the new world view property allows you to display country boundaries and labels from the perspective of a specific country.

A few widget highlights

Note: All widget updates also apply to their corresponding components.

Layer search: Easily find the layer you are looking for using the new filtering capability in the Layer List, Basemap Layer List, and Table List widgets. You can control whether the filter box is displayed using the visibleElements property.

Simplify the popup: With the newly added visible elements properties in the popup, you can control what parts of the popup experience you want to include in your app. For example, you can create an extremely simple popup that only has the basic popup content by hiding all elements, like this:

Deeper use of Calcite in widgets: While all widgets were designed based on Calcite design specifications and use Calcite icons, many are not using Calcite components internally. We are working to update all widgets to use Calcite components for several reasons, including but not limited to:

In this release, the following widgets were updated with Calcite components: BasemapLayerList, BasemapToggle, Fullscreen, Home, LayerList, Locate, NavigationToggle, ScaleBar, TableList, Track, and Zoom.

Are you working with frameworks?

Today, many developers are using frameworks for their front-end development. To assist with development with frameworks and the JavaScript Maps SDK, we are gradually adding more resources on the SDK site. Many of these resources are focused on using the new web components (beta) which are particularly useful for building apps with the JS Maps SDK and frameworks. Here are some examples of resources that help you with your web app development within frameworks:

Learn more

This release contains many features and enhancements not mentioned in this blog post. Check out the release notes and new samples for CoverageJSON support for imagery tile layer, new client-side raster functions, utility network updates, and more.

Join us at Esri Developer Summit

The Esri Developer Summit is a gathering for geospatial developers to learn about the latest web mapping development trends, capabilities, and best practices! We’ve been working hard on delivering inspiring new demos and technical presentations. This is a great opportunity to connect with the JavaScript Maps SDK product team and network with fellow developers. Attend the technical presentations to expand your knowledge, get your questions answered at the Web Development showcase, and enjoy a variety of fun activities at Palm Springs. Check out our web developer’s guide to 2024 Esri Developer Summit for session recommendations and more!

We look forward to seeing you there! If you are unable to attend please check out videos our presentations that will be published shortly thereafter.

Join us at the 2024 Esri Developer Summit March 12-15 in Palm Springs, California

About the authors

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:

Emily is a mapping and technology enthusiast with a background in GIS and Spatial Analytics from University of Pennsylvania and Wuhan University. She was previously a software engineer for mapping web applications and GIS developer in commercial real estate. Emily is dedicated to leverage her experience in different parts of GIS industry and her global background to help customer build the most suitable web mapping applications.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Global Land Cover Updates

Read this article