Map Popup | Flo.w

<flow-map-popup>

Stable

The map popup component defines popup content and configuration.

Add a Map Popup sub-component to a map to define a popup template for use with the Map Data Source component. Content and configuration from the Map Popup component is used to display a popup when a map feature is clicked. To associate the Map Popup template with a Map Data Source and enable automatic popups, set the selection-popup attribute of the Map Data Source component to the ID of the Map Popup component.

HTML within the <flow-map-popup> opening and closing tags will be cloned and used as the popup content. Specify additional attributes to configure aspects of the popup. Note that the attributes of the Map Popup component match the properties of FlowCoreMapPopupOptions, which is used when programmatically opening a popup.

# Examples

Specify the track-location attribute to automatically track the location of the map feature associated with the popup.

In the demo below a Map Data Source is updated every second to simulate a moving point. Click on the point to open the popup.

# Properties

Property	Description	Type	Default
`closeButton` `close-button`	Set to `true` to enable 'close' button.	`boolean`	`true`
`closeOnClick` `close-on-click`	Set to `true` to close popup when map is clicked.	`boolean`	`false`
`closeOnMove` `close-on-move`	Set to `true` to close popup when map is moved.	`boolean`	`false`
`fireTrackImmediately` `fire-track-immediately`	Move popup to `trackLocation` immediately.	`boolean`	`false`
`maxWidth` `max-width`	Maximum width of popup in CSS units.	`string`	`'300px'`
Deprecated `name`	Use `id` attribute instead. The unique popup ID.	`string`
`popupClass` `popup-class`	Specify a CSS class to add to the popup.	`string`
Reactive `trackLocation` `track-location`	Move popup when feature location changes. Specify `true` to enable automatic location tracking as map feature moves or specify a reactive expression returning lng/lat as a 2-element array.	`boolean \| string`	`false`

# Slots

Slot	Description
`(default)`	The popup content.

← Map Data Join Progress Bar →

# Map Popup

# Examples

# Displaying a Popup That Tracks a Moving Feature

# Properties

# Slots