# šŸ“ New Plugin: Beautiful Maps - Mapbox **URL:** \ **Category:** Showcase\ **Created:** [October 27, 2023, 10:28am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293 "2023-10-27T10:28:03Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [May 23, 2024, 4:06pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/21 "2024-05-23T16:06:10Z")
**(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. Any questions let me know šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [May 29, 2024, 8:34am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/22 "2024-05-29T08:34:07Z")
**(more) May-24 updates** Released a new version of the plugin (version 1.12.0)! A new exposed state has been added to the Mapbox Map element called ā€˜ **All Markers Loaded** ā€™. This is a ā€˜yes/noā€™ field that changes to ā€˜yesā€™ once all markers have been loaded using the ā€˜Add List of Markers to Mapbox Mapā€™ action. This can be useful if youā€™re loading a large amount of markers and want to show a loading screen while theyā€™re loading. ![2024-05-2909.32.11-ezgif.com-optimize](https://us1.discourse-cdn.com/bubble/original/3X/e/5/e59dcb0950496defb976f7c4315edfe39e7c6522.gif) ---
**Author:** ![zico.gaeffke](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/zico.gaeffke/32/210883_2.png) [@zico.gaeffke](https://forum.bubble.io/u/zico.gaeffke)\ **Post date:** [June 6, 2024, 10:54pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/23 "2024-06-06T22:54:48Z")
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. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [June 10, 2024, 8:06am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/24 "2024-06-10T08:06:23Z")
Hey @zico.gaeffke - nice idea. Iā€™ve a pretty busy product roadmap for the next while, but Iā€™ll add this to the list of features to investigate adding. Thanks for the feedback as always šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [July 2, 2024, 1:50pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/25 "2024-07-02T13:50:14Z")
**Add custom styles from Mapbox Studio - July-24 update** Recently released a pretty simple, but very significant, update to the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600). You can now add custom styles from [Mapbox Studio](https://studio.mapbox.com/) 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 ![Screenshot 2024-06-29 at 19.34.06](https://us1.discourse-cdn.com/bubble/original/3X/d/4/d4d406e3f99721d9691005706d3a8809e810c4b9.png) 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: ![Screenshot 2024-07-02 at 14.46.12](https://us1.discourse-cdn.com/bubble/original/3X/a/5/a55014feed56edf737616b24118f590b938df988.jpeg) The [demo app](https://beautiful-maps-mapbox.bubbleapps.io/) has been updated with instructions on how to do this šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [July 16, 2024, 2:22pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/26 "2024-07-16T14:22:27Z")
**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): ![Screenshot 2024-07-16 at 15.10.46](https://us1.discourse-cdn.com/bubble/original/3X/2/1/212e9df1641ff6d0005fb062166d499dfa83707f.jpeg) You can see this map in the [Beautiful Maps - Mapbox demo app](https://beautiful-maps-mapbox.bubbleapps.io/) (scroll to the section called ā€˜Custom Map Stylesā€™) **Link to Mapbox tutorial:** > **[Make a choropleth map, part 1: create a style | Help](https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-1/)** > > Upload custom data to Mapbox Studio, add it to a template style, and use filters to style your data. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [July 17, 2024, 4:37pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/27 "2024-07-17T16:37:04Z")
**Draggable markers - July-24 update** Just released a new version of the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600) ( **version 1.14.0** ) that allows you to drag markers on the Mapbox Map: ![2024-07-17 17.28.33](https://us1.discourse-cdn.com/bubble/original/3X/b/3/b38ad25b0ac30aeb5840251e668adea6177ed0b3.gif) 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. ![Screenshot 2024-07-17 at 17.32.49](https://us1.discourse-cdn.com/bubble/original/3X/2/4/24fb4ed51af450a6e7ffc08d5455357f2a509ce7.png) There is also 3 new new exposed states on the Mapbox Map element: - Last Marker Dragged Unique ID - Last Marker Dragged Lng - Last Marker Dragged Lat And 1 new event: - A Mapbox Map Marker Drag Ended This can be useful if you want to make changes to the location associated with the marker AFTER the marker drag has been completed. Any questions just let me know šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [July 25, 2024, 8:08am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/28 "2024-07-25T08:08:18Z")
**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](https://www.mapbox.com/mapbox-studio) and then add them to your Bubble app with the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600): [![](https://img.youtube.com/vi/-yxToGCdac4/maxresdefault.jpg "Add custom maps to your Bubble.io app with Mapbox (tutorial)") ](https://www.youtube.com/watch?v=-yxToGCdac4) Any questions, just let me know šŸ™‚ ---
**Author:** ![melqar](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@melqar](https://forum.bubble.io/u/melqar)\ **Post date:** [August 3, 2024, 7:59pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/29 "2024-08-03T19:59:32Z")
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. Regards, Hussain ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 5, 2024, 6:35am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/30 "2024-08-05T06:35:25Z")
Hi Hussain, thanks for the kind words! This isnā€™t currently possible, but I should be able to implement functionality where the mapā€™s boundaries are available via an exposed state. Give me a day or so to look into this and Iā€™ll get back to you with an update šŸ™‚ ---
**Author:** ![melqar](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@melqar](https://forum.bubble.io/u/melqar)\ **Post date:** [August 5, 2024, 6:54pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/31 "2024-08-05T18:54:29Z")
Hello @alexcooney5, Thanks for your reply, sure take your time. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 7, 2024, 12:35pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/32 "2024-08-07T12:35:02Z")
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: ![Mapbox - Bounds](https://us1.discourse-cdn.com/bubble/original/3X/f/3/f35cb1a3f388791912166e3e88dccc1d7e2c9768.gif) 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](https://beautiful-maps-mapbox.bubbleapps.io/) šŸ™‚ Can you let know if thatā€™s what youā€™re looking for? ---
**Author:** ![melqar](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@melqar](https://forum.bubble.io/u/melqar)\ **Post date:** [August 7, 2024, 9:20pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/33 "2024-08-07T21:20:20Z")
@alexcooney5 wooooow this is exactly what I need. Million thanks you made my day šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 8, 2024, 1:24pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/34 "2024-08-08T13:24:27Z")
Great to hear @melqar! šŸ™‚ ---
**Author:** ![zico.gaeffke](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/zico.gaeffke/32/210883_2.png) [@zico.gaeffke](https://forum.bubble.io/u/zico.gaeffke)\ **Post date:** [August 19, 2024, 9:37pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/35 "2024-08-19T21:37:37Z")
Hi Alex - Any luck on map marker hover & clicked states?! How about extracting the mapā€™s formatted address using cntr long&lat? Best, Zico ---
**Author:** ![rlowe012](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rlowe012/32/214966_2.png) [@rlowe012](https://forum.bubble.io/u/rlowe012)\ **Post date:** [August 19, 2024, 9:41pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/36 "2024-08-19T21:41:20Z")
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. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 20, 2024, 11:01am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/37 "2024-08-20T11:01:07Z")
**New events/exposed states for marker hover - August-24 updates** Just released a new version (1.16.0) of the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600) that lets you trigger actions when a marker is hovered! ![Mapbox - Marker Hover](https://us1.discourse-cdn.com/bubble/original/3X/5/7/57da124a0423a26a1f1b0b1f4878cec330a0d76e.gif) 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](https://beautiful-maps-mapbox.bubbleapps.io/) (editor link is [here](https://bubble.io/page?id=beautiful-maps-mapbox&tab=tabs-1&name=index&type=page)). The plugin now has the following new events: - Mapbox Marker is Hovered - Mapbox Marker Marker Hover Ended and the following exposed states: - Last Marker Hovered Unique ID - Last Marker Hovered Lat - Last Marker Hovered Lng Any questions just let me know šŸ™‚ ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 20, 2024, 11:09am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/38 "2024-08-20T11:09:27Z")
Hi @zico.gaeffke, Iā€™ve just released a new version of the plugin that allow you to trigger workflows when a marker is hovered. > [@round\_pushpin New Plugin: Beautiful Maps - Mapbox](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/37): > > New events/exposed states for marker hover - August-24 updates Just released a new version (1.16.0) of the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600) that lets you trigger actions when a marker is hovered! [Mapbox - Marker Hover] 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](https://beautiful-maps-mapbox.bubbleapps.io/) (editor link is [here](https://bubble.io/page?id=beautiful-maps-mapbox&tab=tabs-1&name=index&type=page)). The plugin now has the following new events: Mapbox Marker is Hovered Mapbox Markerā€¦ The plugin already has an event called ā€˜ **When Mapbox Marker is Clicked** ā€™ > [@round\_pushpin New Plugin: Beautiful Maps - Mapbox](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/17): > > Just released a tutorial video on how you can trigger a workflow action based when a user clicks on a marker: [[Trigger action with marker click - Bubble.io x Mapbox tutorial] ](https://www.youtube.com/watch?v=uJtFK60gg1E) Is this what youā€™re looking for? Let me know if Iā€™m missing something on this šŸ™‚ > [@zico.gaeffke](#): > > How about extracting the mapā€™s formatted address using cntr long&lat? Do you mean the address of the location with the centre leg/lat coordinates? If so, I can look into this and see what I can do. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 20, 2024, 11:13am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/39 "2024-08-20T11:13:08Z")
Thanks for the kind words @rlowe012! Let me look into this and see whatā€™s possible. Will report back in the next day or two with an update. ---
**Author:** ![alexcooney5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexcooney5/32/206227_2.png) [@alexcooney5](https://forum.bubble.io/u/alexcooney5)\ **Post date:** [August 20, 2024, 1:17pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/40 "2024-08-20T13:17:18Z")
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](https://starbucks-store-locator.bubbleapps.io/version-test/store-locator-demo)) that Iā€™m using the ā€˜format as text:ā€™ operator to load some custom HTML for each popup: ![Screenshot 2024-08-20 at 14.10.57](https://us1.discourse-cdn.com/bubble/original/3X/c/6/c6563a4d9a09405f71fa471c2b22e539f539fa6d.jpeg) 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: ![Screenshot 2024-08-20 at 14.16.04](https://us1.discourse-cdn.com/bubble/original/3X/6/0/6094a215aca718d965dbfc0c1d94ce6abb51bea9.jpeg) Let me know if that helps šŸ™‚ [Previous page](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293.md?page=1) [Next page](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293.md?page=3)