Bookmarks

Use dark colors for code blocksCopy
1
import "@arcgis/map-components/components/arcgis-bookmarks";

Bookmarks component allow end users to quickly navigate to a particular area of interest. It displays a list of bookmarks, which are typically defined inside the WebMap.

Demo

Properties

PropertyAttributeType
auto-destroy-disabled
boolean
disabled
boolean
drag-enabled
boolean
filter-placeholder
string
filter-text
string
hide-flow
boolean
hide-thumbnail
boolean
hide-time
boolean
icon
string
label
string
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
reference-element
ArcgisLinkChart | ArcgisMap | ArcgisScene | string
show-add-bookmark-button
boolean
show-close-button
boolean
show-collapse-button
boolean
show-edit-bookmark-button
boolean
show-filter
boolean
show-heading
boolean
state
readonly
state
"loading" | "ready"

autoDestroyDisabled

Property
autoDestroyDisabled: boolean

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

bookmarks

Property
bookmarks: Collection<Bookmark>

A collection of Bookmarks.

Read more...

defaultCreateOptions

Property
defaultCreateOptions: BookmarkOptions

Specifies how new bookmarks will be created if visibleElements.addBookmarkButton is set to true.

Read more...

defaultEditOptions

Property
defaultEditOptions: BookmarkOptions

Specifies how bookmarks will be edited, if visibleElements.editBookmarkButton is set to true.

Read more...

disabled

reflected

Attribute changes are reflected on the DOM.

Property
disabled: boolean

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

Read more...

Attribute
disabled
Default value
false

dragEnabled

Property
dragEnabled: boolean

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

Read more...

Attribute
drag-enabled
Default value
false

filterPlaceholder

Property
filterPlaceholder: string

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

Read more...

Attribute
filter-placeholder

filterText

Property
filterText: string

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

Read more...

Attribute
filter-text

hideFlow

Property
hideFlow: boolean
Attribute
hide-flow
Default value
false

hideThumbnail

Property
hideThumbnail: boolean
Attribute
hide-thumbnail
Default value
false

hideTime

Property
hideTime: boolean
Attribute
hide-time
Default value
false

icon

Property
icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.

Attribute
icon
Default value
"bookmark"

label

Property
label: string

The component's default label.

Attribute
label

position

Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Attribute
position
Default value
"bottom-left"

referenceElement

Property
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
Attribute
reference-element

showAddBookmarkButton

Property
showAddBookmarkButton: boolean
Attribute
show-add-bookmark-button
Default value
false

showCloseButton

Property
showCloseButton: boolean
Attribute
show-close-button
Default value
false

showCollapseButton

Property
showCollapseButton: boolean
Attribute
show-collapse-button
Default value
false

showEditBookmarkButton

Property
showEditBookmarkButton: boolean
Attribute
show-edit-bookmark-button
Default value
false

showFilter

Property
showFilter: boolean
Attribute
show-filter
Default value
false

showHeading

Property
showHeading: boolean
Attribute
show-heading
Default value
false

state

readonlyreflected

Attribute changes are reflected on the DOM.

Property
state: "loading" | "ready"

The view model's state.

Read more...

Attribute
state
Default value
"ready"

Methods

MethodSignature
componentOnReady(): Promise<void>
destroy(): Promise<void>

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns
Promise<void>

destroy

Method
destroy(): Promise<void>

Permanently destroy the component

Returns
Promise<void>

Events

EventType
BookmarksBookmarkEditEvent
{ name: "state"; }
undefined
BookmarksBookmarkSelectEvent

arcgisEdit

Event
arcgisEdit: BookmarksBookmarkEditEvent
bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisPropertyChange

Event
arcgisPropertyChange: { name: "state"; }

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

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisReady

Event
arcgisReady: undefined
bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSelect

Event
arcgisSelect: BookmarksBookmarkSelectEvent
bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.