The first major dot release of the 4.x library has shipped! Esri has shipped version 4.1 with a list of bug fixes and also a few new features.  So what’s new and good with the Esri JavaScript 4.1 API? This article walks you through the major must-knows about the release. Full release notes can also be found here on the Esri Developers website.

Here’s a high level overview of the new features available in the API.

First, there are these three features: a new Sublayer class, a new IntegratedMeshLayer for 3D rendered views and support for custom popup actions per feature.

We’ll take a look at the custom popup action feature in depth, since that is likely the most relevant to most people reading this article.

Custom Popup Actions with Esri JavaScript 4.1 API

Have you ever built a mapping application without a popup? I know I haven’t.

The sample we are given to use the Esri JavaScript 4.1 API with the custom popup actions is actually a really fun one.  In this example, Esri is querying the OpenBeerDatabase spatial endpoint to plot brew pubs around the United States. Brew pubs! The example uses the popup feature to give detail for each of the points on the map.

The example can be viewed in the Esri sandbox here.

How does the custom popup feature work in the Esri JavaScript 4.1 API?

What the popup is doing here is capturing the trigger-action event of the popup and checking the id of the action.  The popup definition takes an array of actions, which I tried to add to with no success.  So I decided to modify the action to query Google for nearby breweries from the selected brewery from the popup.  Although the OpenBeerDatabase has a nice list of brew houses, the list seemed incomplete to me.  So a Search Nearby feature is very handy (assuming you want to find more places that serve beer). As you can see, the Esri JavaScript 4.1 API can be a little tricky at first, but here is how I made it work.

The following are my changes I made to the JavaScript:

Now when we click the custom action, a new window opens with a query to google with the search phrase of “breweries nearby.” It then tacks on the address, city and state to the end of the query. So far, the Esri JavaScript 4.1 API popup is working for us!

To view full set of code for the breweries nearby functionality, you may download it from our github site https://github.com/gitssp/breweriesnearby.  Once you download the html just open it with a modern browser of your choice to run the code.

Looking Ahead with Esri JavaScript 4.1 API

To keep everybody interested up to date, we’ll be back with more information on the Esri JavaScript 4.1 API. Look out for a post to follow up on the Esri JavaScript 4.1 API when the 4.2 release has shipped.  Cheers!