Bookmarks component

This sample demonstrates how to display Bookmarks. The Bookmarks component allows users to quickly navigate to a particular area of interest. It displays a list of bookmarks, which are typically defined inside a web map.

This map shows hurricanes and storms from 1965 to 2015. Use the bookmarks to navigate through time to certain hurricanes.

To enable editing, add the drag-enabled, show-add-bookmark-button and show-edit-bookmark-button attributes in the bookmarks component. This will allow the user to add, edit, reorder, or delete bookmarks from the widget through the component's UI.

1
<arcgis-bookmarks drag-enabled show-add-bookmark-button show-edit-bookmark-button></arcgis-bookmarks>

When a new bookmark is added, the bookmark's viewpoint is set to the current scale, rotation, and extent of the view and a screenshot of the view is added as the new bookmark's thumbnail. The bookmark's timeExtent will also be set to the current timeExtent of the View, if defined.

When editing a bookmark, you can edit the name, update or remove the bookmark's thumbnail, and toggle to include or exclude the time extent (if the View has a timeExtent defined). When you click the "Save" button, the bookmark's viewpoint and timeExtent will update to match the current view.

This app uses a featureEffect to de-emphasize all other features in the layer besides the hurricane from the bookmark that was selected, as shown in the code snippet below. Use the Clear Filter button in the bottom-right to remove the featureEffect from the layer.

1
2
3
4
5
6
7
8
9
10
bookmarks.addEventListener("arcgisSelect", (event) => {
  let hurricaneName = event.detail.bookmark.name.toUpperCase();
  // apply a feature effect for the selected hurricane
  layer.featureEffect = {
    filter: {
      where: "Name = '" + hurricaneName + "'"
    },
    excludedEffect: "grayscale(100%) opacity(30%)"
  }
});