Link to plugin page: https://bubble.io/plugin/pricing-map-like-airbnb-1706636553894x314889998798684160
Demo to preview the settings
Introduction
Display your data on a map with an intuitive price visualization, just like Airbnb does. This element will bring the best UX for the costumer to make a buying decision on your app.
How to setup
- Copy Access token
4. Put it in plugin fields
Plugin Element Properties
The plugin contains a Airbnb Map visual element that should be used on a page.
Title | Description | Type |
Initial Long | The longitude value that set the initial center point of the map. | number |
Initial Lat | The latitude value that set the initial center point of the map. | number |
Data type | The data type to be used | Application type |
Data source | A list of location data entries from which markers will be generated on the map. Each location entry contains information about a specific point of interest. | A list of data type |
Data long | The property name or key within each location entry that holds the longitude value. | Data type field(number) |
Data lat | The property name or key within each location entry that holds the latitude value. | Data type field(number) |
Unique id | The property name or key within each location entry that serves as a unique identifier for the location. | Data type field(string) |
Data price | The property name or key within each location entry that contains the price information. | Data type field(number) |
Data description | The property name or key within each location entry that contains the description. | Data type field(string) |
Data image | The property name or key within each location entry that contains the image URL. | Data type field(string) |
Initial Zoom | The initial zoom level of the map when it is first loaded. | number |
Map style | Determines the visual style of the map (e.g., light or dark theme). | Dropdown |
Currency type | Specifies the currency symbol to be prefixed to price values displayed on the markers. | Dropdown |
Decimal place | The number of decimal places to include in the formatted price values. | Dropdown |
Thousand separator | Specifies the character to be used as the thousand separator in formatted price values. | Dropdown |
Show popup | Boolean to show or hide popups on markers. | Yes/No |
Marker color | Marker text color | Color |
Marker Background | Marker background color | Color |
Selected color | Selected marker text color | Color |
Selected background | Selected marker background color | Color |
Element Actions
1. Location selected - Location is selected outside from mapbox
Title | Description | Type |
id | The id of the location selected | string |
Exposed states
Name | Description | Type |
locationid | The ID of the location that was clicked. This allows other elements in the Bubble application to react to marker interactions. | string |
Element Events
Name | Description |
Location inside the map is clicked | Triggered when a marker is clicked. This can be used to execute other actions in the Bubble application, such as displaying detailed information about the clicked location. |
Workflow example
- Place the visual element on the page and adjust the desired configuration
- Set a repeating group with the desired items to be showed on the map
- Use the action Location selected in the workflow , for example on clicking an item in the repeating group
