Bookmarks widget

This sample demonstrates how to display a Bookmarks widget. The Bookmarks widget 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.

When editingEnabled is true, the user can add, edit, reorder, or delete bookmarks from the widget through the widget's UI. 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
bookmarks.on("bookmark-select", (event) => {
  let hurricaneName = event.bookmark.name.toUpperCase();
  layer.featureEffect = {
    filter: {
      where: "Name = '" + hurricaneName + "'"
    },
    excludedEffect: "grayscale(100%) opacity(30%)"
  };
});