(more) May-24 updates
Just released a new version of the plugin (version 1.11.0).
The Map element now has a new exposed state called âLast Clicked Marker Unique IDâ
The âAdd List of Markersâ action has a new (optional) field called âUnique IDsâ (list)
This basically lets you link each marker on your map to the unique ID of the associated location in your database.
The use case for this is if youâre using the âWhen Mapbox Marker is Clickedâ event, you can now trigger a workflow action that changes (or uses) the location associated with the marker you clicked.
Previously, this could be achieved by using the âLast Clicked Lngâ and âLast Clicked Latâ exposed states to look up the relevant location in your database.
But that wouldnât always work if youâre using the offset field to separate out markers that have the same address.
Using the âLast Clicked Marker Unique IDâ means that is not longer an issue.
Hey Alex - how about a feature that changes the selected marker icon? Right now, Iâm hacking it by overlaying a new marker based on a set of conditions, but as soon as I select another marker, the previous marker still shows.
Add custom styles from Mapbox Studio - July-24 update
Recently released a pretty simple, but very significant, update to the Beautiful Maps - Mapbox plugin.
You can now add custom styles from Mapbox Studio to maps in your Bubble app.
To add a custom style:
Select âCustomâ as the Style on the Mapbox Map element and then
Add your style URL to the new âCustom Style URLâ field
In this example, Iâve created a custom style in Mapbox studio based on the âSatellite Streetsâ style, but Iâve shown all the âParkingâ areas in purple:
Custom Styles Example
Just wanted to share this example of creating custom styles in Mapbox Studio and then integrating them with your Bubble app.
This map shows the population density of all the US states based on the US Census Bureau data (if you want to get technical, itâs called a choropleth map):
Draggable markers - July-24 update
Just released a new version of the Beautiful Maps - Mapbox plugin (version 1.14.0) that allows you to drag markers on the Mapbox Map:
Itâs really easy to use. Simply set the âDraggableâ field to âyesâ on either the Add List of Markers or Add Single Marker actions.
Design custom maps in Mapbox Studio for your app (video tutorial)
Recently released this video on how you can design custom maps (with your own dataset) in Mapbox Studio and then add them to your Bubble app with the Beautiful Maps - Mapbox plugin:
Hello @alexcooney5
Iâm so impressed with your work. Iâm working on an app where I need to get some info (ex. unique id) about the markers that are visible on current map view. Then, I will use this info to filter my repeating group. Is this something possible?
Another solution could be getting the map boundaries lat & long (in states) and of course these boundaries with change when the user zoom in/out or move the map to other locations.
Please let me know if my idea is already implemented (and iâm not aware) or it is in your road-map.
Hi @melqar, Iâve released a new version of the Beautiful Maps - Mapbox plugin (version 1.15.0). The Mapbox Map element now has 4 new exposed states that allow you to get a Mapâs bounds:
North East Lng
North East Lat
South West Lng
South West Lat
These exposed states get updated each time a map shifts - EG see below:
You should be able to use the bounds to determine which of your markers are currently visible on the map itself.
You can also see an example in the âGetting a Mapâs boundsâ section of the demo app
Can you let know if thatâs what youâre looking for?
Hi @alexcooney5 . This plugin is cool. And the videos are really useful. Great work!
Is it possible to trigger a workflow by clicking the pop-up on the map (I know itâs possible clicking on the marker)?
Basically, Iâm trying to create a user experience similar to Airbnb or Rightmove where:
(Step 1) the user clicks on the marker, which opens a popup containing summary information and,
(Step 2) the user can click on the popup to open a new tab that contains all of the information.
New events/exposed states for marker hover - August-24 updates
Just released a new version (1.16.0) of the Beautiful Maps - Mapbox plugin that lets you trigger actions when a marker is hovered!
In the above example, Iâm showing an alert whenever a marker is hovered. You can see this in the âTriggering a workflow when a marker is hoveredâ section of the demo app (editor link is here).
Hi @rlowe012, Iâve been looking into this and you should be able to navigate to a new tab by using some HTML.
Youâll see in the below example (which you can view here) that Iâm using the âformat as text:â operator to load some custom HTML for each popup:
By following this approach, you should be able to add in a button/text/other element that allows users to navigate to another page. EG something like this:
