<mosaica-selection>¶
A card showing the counts and marks inside the selected region.
Use the selection card beside a map so that viewers can see what is inside the region they have
drawn. It reads the store's selected region, or the region you set. It counts the items inside
that the filters match, the items the viewer may see there and the marks drawn there. The drawn
marks are listed below the counts, and clicking one picks it.
The region acts as a filter, which means the map and every other count narrow to it once it settles. Outside flips it to everything outside the shape, and Clear removes it. The counts are approximate when the server had to count an area around the shape, and the state line's tooltip says when that is so. Export and Save as artifact are shown disabled because they are not available yet.
import '@mosaicajs/components/selection';
Attributes¶
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
viewer-url |
viewerUrl |
string |
'' |
The base URL of the Mosaica viewer server, for the store the element builds: a full URL such as https://maps.example.org, or a path such as /mosaica. Unset, the page's own origin. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store. |
token |
token |
string |
'' |
A viewer token for the store the element builds. Without token or authorise, only an open server (serve.open) answers. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store. |
artifacts-per-tile |
artifactsPerTile |
number | null |
null |
The most artifacts one level of a layer shows per map tile, for the store the element builds. Unset, 50, or the server's selection.max_artifacts_per_tile if lower. A value above that maximum is refused. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store. |
Properties¶
Set as JavaScript properties; they have no attribute.
| Property | Type | Default | Description |
|---|---|---|---|
region |
RegionProjection | null |
null |
A region to show instead of the store's region projection. |
store |
Store | null |
null |
The store to use, ahead of one from context or one the element would build. The element never disposes it. |
authorise |
TokenSupplier | null |
null |
A function that returns a viewer token, used instead of token and called again before the token expires. A different function builds a new store, so keep it stable across renders. Set it together with viewer-url: a store built from viewer-url alone first sends a request with no token, and is replaced when authorise arrives. |
activeStore |
Store | null |
read-only | The store this element is using, or null if it has none. |
source |
StoreSource |
read-only | Where activeStore came from. |
Methods¶
| Method | Returns | Description |
|---|---|---|
dispose() |
void |
Dispose of the store this element built. Removing the element from the page does not, so call this when you are done with the element. A store you passed in is left to you. |
Events¶
Each bubbles and is composed. Events gives each detail.
| Event | Fired when |
|---|---|
mosaica-selectchange |
Clear, Outside or Inside was pressed. |
Parts¶
Styled from outside the element with ::part().
| Part | Description |
|---|---|
title |
The heading, with the shape's kind. |
state |
The state line, with data-state. Its tooltip says whether the counts are exact for the shape. |
refusal |
The words "Selection refused", or "Server busy", with data-code set to the refusal's code. |
reason |
The server's reason for the refusal, under "Selection refused". |
retry |
The Retry button, shown if the server was too busy to count the selection. |
counts |
The counts. |
count-served |
The <mosaica-count> of marks shown inside. |
count-matched |
The <mosaica-count> of items the filters match inside (or outside). |
count-visible |
The <mosaica-count> of items the viewer may see inside (or outside). |
label |
The heading above the list. |
items |
The list of drawn marks inside. |
item |
One drawn mark, by mosaica_id. |
actions |
The action buttons. |
action |
One action button. |
CSS custom properties¶
The theme tokens apply to this element.