ArcGIS Instant Apps Blog

URL parameters can be used to pass along additional information or instructions to many ArcGIS Instant Apps. For example, you can zoom an app to a specific location, zoom in to a specific scale level, find a location, configure a pop-up, and more.

View blog article

This updated blog article shows various URL parameters that you can use, and also includes step-wise instructions for creating custom URL parameters in Instant Apps.

For more information, see Use URL parameters in ArcGIS Instant Apps.

The Interactive Legend Instant App provides a quick and easy way to visualize and filter map content through a selectable legend. When a portion of the legend is selected, the map updates to show only the data corresponding to that selection. This allows easy data exploration in a more granular and focused way, providing deeper insights into the patterns and trends present. This Instant App has been a popular app for several years. However, in the February 2023 update to ArcGIS Online, it received some new enhancements, adding an additional layout option and a new refreshed look.

A second layout option has been added to the app. The side panel layout option docks the legend on either side of the map. This helps provide more room when a legend contains a large amount of content. In addition, this layout option does not overlap with the map and provides a larger area to view and interact with the legend.

To update your Interactive Legend app, navigate to the Interactive Legend section and select Side panel. Directly below the Side panel selection is the location to choose the side of the app it will appear on.

Interactive Legend has a new look with some new functionality as well.  The button style and the ability to collapse individual sections of the legend have been updated to make it easier to interact with the app.  There are no settings required to be enabled to use this functionality. 

Explore additional examples of the Interactive Legend in the product gallery.  We look forward to seeing what you create!

The Public Notification (Beta) template is a new Instant Apps template that allows users to create a list of selected features that they can export as a .csv or .pdf file. The app template also includes theme settings and a basic set of navigation tools to explore the map, such as zoom tools, a legend, the layer list for changing layer visibility, and a basemap switcher.

Use Atlas (Beta), a new Instant Apps template, to allow users to learn about and interact with maps and layers that are shared to a group. The Atlas app template empowers organizations to highlight a collection of curated maps and layers based on a point of interest, a geographic location, or a specific event.  Users can easily discover and explore the content, as well as share the maps they create. Tools to help users explore the map in Atlas include searching locations, switching between 2D and 3D views, measuring distance and area, and zooming to spatial bookmarks. 

The Minimalist template in ArcGIS Instant Apps will be deprecated in the ArcGIS Online Oct 2022 update and the ArcGIS Enterprise 11.1 release. 

Check out this ArcGIS blog by Matthew Payne

https://doc.arcgis.com/en/arcgis-online/create-maps/choose-configurable-app.htm

Configurable apps offer a swift and effective way to share web map content with the right audience.  Each configurable app is built to provide a focused experience for users while answering common spatial questions like what hospitals are nearby?  How complete is my field inspection data?  How are trail conditions based on public reporting?  But often the primary goal of a configurable app is to show off a map with data for users to view and explore.  The Minimalist configurable app has been a popular choice for showcasing a web map with just the right amount of tools and options.  This app puts emphasis on the map with a clean and updated user interface.  With the March 2020 update of ArcGIS Online, we are excited to release a beta version of the next generation Minimalist.

Introducing: Minimalist (beta)

Minimalist (beta) uses the ArcGIS API for JavaScript 4x which includes support for newer functionality such as docked pop-ups, label classes, dot density rendering, and multi-element pop-ups.  Web maps authored from the new Map Viewer Beta that include any 4x specific functionalities will work great in Minimalist (beta).

Multi-element pop-ups are a useful way to incorporate various types of information into a single popup to best describe data to your audience.  There are four types of popup elements than can be used including attribute field data, media such as charts and images, descriptive text, and attachments.  This example shows Minimalist (beta) supporting multi-element pop-ups in the side panel with a dark mode app theme:

Dot density rendering showcased in Minimalist (beta) with a simplistic layout:

New App Configuration

If you are familiar with using configurable apps, you know how simple it is to get an app up and running quickly by choosing from a set of options within the app’s configuration panel.  With this release, we are introducing an upgrade to the configuration panel that is used with Minimalist (beta) that offers new features like Express Setup, mobile device preview, and updates on the fly.  This update makes configuring your app more efficient and streamlined while offering a newer, cleaner look and feel.

Express Setup

When a new Minimalist (beta) app is created, the app configuration initially launches into Express Setup.  This is a simplified step-through of the most essential settings to consider.  Express Setup is intended to get you from map to a published interactive app as quickly and efficiently as possible.  Think of it as the minimum set of decisions needed to produce a well-functioning app.  For Minimalist (beta) this includes choosing a web map, providing basic details about the map, deciding on the popup style, choosing a color theme, and offering the ability to search the map.

If you want to configure the app beyond these essential settings, you can access all of the settings supported in the app by clicking “Switch to Full Setup” at the bottom of the settings panel.  Full Setup contains advanced options such as adding a basemap toggle, deciding on a layout type, disabling mouse scroll from zooming the map, and including social website sharing options.

Note that once you opt into Full Setup you cannot switch back to Express Setup.  The app configuration will always launch Full Setup after you have published the app.  Try out Express Setup and if you feel there are any essential settings we should add please let us know!  Feedback options are included in the last section of the blog below.

Mobile Device Preview

Configurable apps are built mobile first and have an optimized layout for mobile devices.  The new app configuration provides the ability to preview your app in a mobile layout and familiarize yourself with the mobile experience without having to navigate to the app on a device.  The Views option in the configuration panel allows you to preview your app in mobile view, offering both portrait and landscape orientations.

Immediate Updates, Auto-Save, Draft and Publish

We’ve addressed a common request of seeing configuration changes happen on the fly.  In the new configuration, changes that are made in the panel will immediately show in the app preview window; there is no need to hit save to see your changes reflected.  This is also utilizing the new auto-save feature.  As changes are made in the panel they are auto-saved in the app’s draft.  A purple badge shows at the header of the configuration along with the date and time of the last auto-save to provide assurance that your work is accounted for.

Changes to the app configuration will continue to auto-save in the draft until you choose to publish the app.  Publishing the app synchronizes the changes between the draft and published versions.  Once the app is published the badge will update to green and provide the published date and time.  Note that any changes you make that are auto-saved into the draft will not reflect in the published app until you click the Publish button again.

Tips

The updated layout of the configuration includes new tooltips tied directly into specific settings.  A blue “i” icon will appear next to any setting that has a focused tooltip.  Hover the mouse cursor over this icon to access the tooltip.

We’ve also added a new space below the map preview window where we’ve included broader tips to help guide an app creator along with some of our best practice suggestions.  This tip will change depending on which category is active in the settings panel.

More Information and Feedback

Minimalist (beta) can be created from the same place as other configurable apps within an ArcGIS Online organization, including the Map Viewer, Content page, and the item page of a web map.  The 3x version Minimalist will also be available in these locations during the beta.  Once Minimalist (beta) is ready for general availability, the existing Minimalist will move to mature support (later in 2020).

The new app configuration with Minimalist (beta) is supported in Chrome, Firefox, Safari, and Microsoft Chromium Edge.  It is not supported in Microsoft Legacy Edge or Internet Explorer.

This app is currently in beta and we would love to hear your feedback.  Please visit our feedback page on GeoNet or click the Feedback button at the bottom of the settings panel in the Minimalist (beta) app configuration.  On the GeoNet page, submit a question or start a discussion and we will take a look.

The December 2018 release of the ArcGIS API for JavaScript version 4.10 includes a new feature that allows users to take screenshots of a map.

By using the new screenshot capability from the ArcGIS API for JavaScript, along with the “screenshot” functionality of HTML2Canvas (a third-party tool that allows you to take “screenshots” of DOM elements with JavaScript) enables developers to add the capability of combining map screenshots and map component screenshots to web apps. More info on HTML2Canvas can be found here. 

Provided below is a general overview of how this can be done. We’ll simply be modifying the existing screenshot sample found in the documentation of the ArcGIS API for JavaScript.

Please note that the following procedure only highlights the key steps, so be sure to reference this Code Pen example if needed. This is one way of achieving this, and surely, there are other potential routes.

Now, let’s get started!

1. Call the takeScreenshot method from the “esri/views/MapView” class. Optionally, pass in an area of the map that  you would like to screenshot along with other configuration options. If options are not passed in, the screenshot will default to the full extent of the map view. Please refer to the documentation here for possible configuration options. The takeScreenshot method will return a Promise, supplying a Screenshot object once the promise is resolved. The Screenshot object will have a property, dataUrl, where the value is, you guessed it, the data URL that represents the screenshot.

2. Next, create a new canvas element and image element. You’ll want to set the image element’s src property to the value of dataUrl.

3. With the canvas element, in this case, viewCanvas, we’ll be getting the 2D context with getContext(“2d”). Load the  image with onload and draw the image on the 2D context. We now have the map image as a canvas element.

4. Now, by using HTML2Canvas, you can simply pass in a DOM reference to the map component you would like to screenshot and optional configuration options. You can find more details on the configuration options here. In this example, we’ll pass in a DOM element reference to the map Legend. Html2Canvas returns a Promise, which supplies a canvas element of the referenced DOM object once the promise is resolved.

5. Next, create a new canvas element where we can draw both the view and legend canvas elements. To draw the canvas elements side-by-side, we’ll set the x-offset value of viewCanvas to the width of legendCanvas

6. Once the map and legend canvas elements have been drawn to the new canvas element, we need to get the data URL of the screenshot. We can achieve this by using the toDataURL method from the canvas object.

7. Finally, we can reference an empty image element and set it’s src property to the new dataURL.
       

Congratulations! You now have a screenshot of the map view and legend.

Example screenshot:

Bonus: Here's an extra sample that includes a pop-up in the screenshot.