Bookmarks

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute

auto-destroy-disabled

Default value

false

A collection of Bookmarks. These are typically defined inside of a WebMap, but can also be defined manually, as shown in the code snippet below.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const bookmarksElement = document.querySelector("arcgis-bookmarks");
// define bookmarks manually
bookmarksElement.bookmarks = [
  new Bookmark({
    name: "Angeles National Forest",
    viewpoint: {
      targetGeometry: {
        type: "extent",
        spatialReference: {
          wkid: 102100
        },
        xmin: -13139131.948889678,
        ymin: 4047767.23531948,
        xmax: -13092887.54677721,
        ymax: 4090610.189673263
      }
    }
  }),
  new Bookmark({
    name: "Crystal Lake",
    viewpoint: {
      targetGeometry: {
        type: "extent",
        spatialReference: {
          wkid: 102100
        },
        xmin: -13125852.551697943,
        ymin: 4066904.1101411926,
        xmax: -13114291.451169826,
        ymax: 4077614.8487296384
      },
      rotation: 90
    }
  })
];

Indicates whether a component is closed. When true, the component will be hidden.

Attribute

closed

Default value

false

Specifies how new bookmarks will be created if showAddBookmarkButton is set to true. Can be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current view when a bookmark is created. See BookmarkOptions for the full list of options.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const bookmarksElement = document.querySelector("arcgis-bookmarks");
bookmarksElement.showAddBookmarkButton = true;
bookmarksElement.defaultCreateOptions = {
  // whenever a new bookmark is created, a 100x100 px
  // screenshot of the view will be taken and the rotation, scale, and extent
  // of the view will not be set as the viewpoint of the new bookmark
  takeScreenshot: true,
  captureViewpoint: false,
  captureTimeExtent: false, // the time extent will not be saved in the bookmark
  screenshotSettings: {
    width: 100,
    height: 100
  }
};

Specifies how bookmarks will be edited, if showEditBookmarkButton is set to true. Can be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current view when a bookmark is edited. See BookmarkOptions for the full list of options.

When true, the component is visually withdrawn and cannot be interacted with.

Attribute

disabled

Default value

false

Indicates if a Bookmark is able to be dragged in order to update its position in the list.

Attribute

drag-enabled

Default value

false

Defines the text used as a placeholder when showFilter is set to true.

Attribute

filter-placeholder

Default value

""

Defines the text used to filter the bookmarks when showFilter is set to true.

Attribute

filter-text

Default value

""

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

Read more...

Indicates the heading level to use for the message "No bookmarks" when no bookmarks are available. By default, this message is rendered as a level 2 heading (e.g. <h2>No bookmarks</h2>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• Heading Elements

Example

1
2
// "No bookmarks" will render as an <h3>
bookmarksElement.headingLevel = 3;

Attribute

heading-level

Default value

2

Determines whether the component should be rendered within its built-in flow component.

Attribute

hide-flow

Default value

false

Indicates whether the thumbnail associated with the bookmark is hidden.

Attribute

hide-thumbnail

Default value

false

Indicates whether the time (h:m:s) displayed next to the date is hidden if the bookmark has a time extent defined.

Attribute

hide-time

Default value

false

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

• Calcite Icons

Attribute

icon

Default value

"bookmark"

The component's default label.

Attribute

label

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

Attribute

position

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

• Associate components with a Map or Scene component

Attribute

reference-element

Indicates whether to display the button to add a new bookmark.

Attribute

show-add-bookmark-button

Default value

false

Indicates whether to display the close button.

Attribute

show-close-button

Default value

false

Indicates whether to display the collapse button.

Attribute

show-collapse-button

Default value

false

Indicates whether to display the button to edit a bookmark.

Attribute

show-edit-bookmark-button

Default value

false

Indicates whether to display the bookmark filter.

Attribute

show-filter

Default value

false

Indicates whether to display the heading.

Attribute

show-heading

Default value

false

The current state of the component.

Attribute

state

Default value

"ready"

Indicates whether to disable the time capability of the Bookmarks component.

Attribute

time-disabled

Default value

false

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Bookmarks component will be associated with a map or scene component rather than using the view property.

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisBookmarks = document.querySelector("arcgis-bookmarks");
document.body.append(arcgisBookmarks);
await arcgisBookmarks.componentOnReady();
console.log("arcgis-bookmarks is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Zoom to a specific bookmark.

Parameters

Returns

Promise<void>

Fires when a Bookmark is edited.

Example

1
2
3
4
5
// once an edit has been made, enable the "Save Webmap" button
//    to allow the user to save their changes
bookmarksElement.addEventListener("arcgisBookmarkEdit", (event) => {
   saveBtn.disabled = false;
});

Fires when a Bookmark is selected.

Example

1
2
3
<arcgis-expand expanded>
 <arcgis-bookmarks></arcgis-bookmarks>
</arcgis-expand>

1
2
3
4
5
6
7
8
const bookmarksElement = document.querySelector("arcgis-bookmarks");
const expandElement = document.querySelector("arcgis-expand");

// collapses the associated Expand component
// when a bookmark is selected
bookmarksElement.addEventListener("arcgisBookmarkSelect", (event) => {
  expandElement.expanded = false;
});

Emitted when the component's close button is clicked.

Emitted when the value of a property is changed. Use this to listen to changes to properties.

Emitted when the component associated with a map or scene view is ready to be interacted with.