# 📍 New Plugin: Beautiful Maps - Mapbox

**URL:** <https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293>\
**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:** 1

<div class="post-metadata">

**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:** [October 27, 2023, 10:28am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/1 "2023-10-27T10:28:03Z")

</div>

I recently released the [Beautiful Maps - Mapbox](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600) plugin. It allows you to integrate Mapbox into your Bubble app and build beautiful map-based applications 🗺

**Links**

- [Plugin page](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600)
- [Demo page](https://beautiful-maps-mapbox.bubbleapps.io/)
- [Editor link for demo page](https://bubble.io/page?type=page&name=index&id=beautiful-maps-mapbox&tab=tabs-1)

**Some things you can do with the plugin**

Build a custom store locator

![ezgif.com-video-to-gif (1)](https://us1.discourse-cdn.com/bubble/original/3X/8/a/8aec00ba6baf84a123dec071371cb6e709fb18b5.gif)

Locate and track the current user on the map

![ezgif.com-optimize (1)](https://us1.discourse-cdn.com/bubble/original/3X/e/1/e1e91201181df779a26a0bd3d3676342ecb0b2b9.gif)

Add markers to a map

 ![Screenshot 2023-10-27 at 11.09.06](https://us1.discourse-cdn.com/bubble/original/3X/2/8/28eb6b5c2b3c5ab04d3a99d9ca37dcadbc753166.jpeg)

Route navigation

![ezgif.com-optimize (2)](https://us1.discourse-cdn.com/bubble/original/3X/c/c/cc988b20048bc7d08e295b5efb0e00140b17a752.gif)

Drawing mode

![ezgif.com-optimize (3)](https://us1.discourse-cdn.com/bubble/original/3X/0/4/04b10dd83aa7c123fae5bd5e93ead483fdb21d54.gif)

_ **New features are consistently being added to the plugin. If you have a feature you’d like to add you can let me know in the comments below.** _

**Support**

We provide top class customer support for our plugins. If you’re having an issue with the plugin you can let us know in the comments below. I read every comment and WILL respond to your issue 🙂

---

<div class="post-metadata">

**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:** [November 1, 2023, 8:37am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/2 "2023-11-01T08:37:36Z")

</div>

Just released a tutorial on how to build a store locator app with the plugin:

[![](https://img.youtube.com/vi/0HWaLb_QuNY/maxresdefault.jpg "How to build a store locator - Bubble.io tutorial") ](https://www.youtube.com/watch?v=0HWaLb_QuNY)

You can also see the actual store locator app [here](https://starbucks-store-locator.bubbleapps.io/) and the editor behind it [here](https://bubble.io/page?type=page&name=index&id=starbucks-store-locator&tab=tabs-1).

---

<div class="post-metadata">

**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:** [December 10, 2023, 11:03am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/3 "2023-12-10T11:03:47Z")

</div>

**December-23 Update**

Just released a new version of the plugin that applies an offset to markers that have identical coordinates. This means markers with identical coordinates (EG those in the same building) will no longer be ‘stacked’ on top of each other. Instead you get two separate markers like this:

 ![Screenshot 2023-12-10 at 11.03.04](https://us1.discourse-cdn.com/bubble/original/3X/2/1/21363cc08142749b40e371c3500eae90194b96ae.jpeg)

You can specify how much of an offset you want using the ‘Latitude Offset’ field.

---

<div class="post-metadata">

**Author:** ![mayank.m84](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@mayank.m84](https://forum.bubble.io/u/mayank.m84)\
**Post date:** [December 15, 2023, 12:35pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/4 "2023-12-15T12:35:51Z")

</div>

HI ,

Thanks for this pligin. I want to use latitude longitude for markers on Mapbox. This seems more accurate.

As per the tutorial , I have setup the markers on the map on page load. Once loaded , the user can apply filters to narrow down the list of store they are searching from.

How can I reset the markers when the users filter the store list. I see add marker on workflow action. Is there any action to refresh the store list once added ?

---

<div class="post-metadata">

**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:** [December 19, 2023, 9:11am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/5 "2023-12-19T09:11:00Z")

</div>

Hi @mayank.m84, I responded to your email but just wanted to follow-up here for anyone that sees your comment. I’ve added an action to the plugin called ‘_Clear Markers_’.

![2023-12-19 09.07.28](https://us1.discourse-cdn.com/bubble/original/3X/4/f/4f4bbab6ac1d837bbf6e1f2290b0c8e643dfb907.gif)

This should allow you to reset the markers by clearing them from the map when a repeating group changes and then re-adding them.

If you have any questions let me know 🙂

---

<div class="post-metadata">

**Author:** ![mayank.m84](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@mayank.m84](https://forum.bubble.io/u/mayank.m84)\
**Post date:** [December 19, 2023, 2:54pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/6 "2023-12-19T14:54:36Z")

</div>

Wow, that was quick. Surely look like this solves my use case. I’ll update the workflow and include the new action. Thanks 🙂

---

<div class="post-metadata">

**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:** [January 17, 2024, 5:05pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/7 "2024-01-17T17:05:16Z")

</div>

**January-24 updates**

You can now add a single marker to a map (you could previously only add a list of markers):  
 ![2024-01-17 17.04.41](https://us1.discourse-cdn.com/bubble/original/3X/9/0/907d66c5b54cb4a39201d59dbc6e35d011b670d6.gif)

---

<div class="post-metadata">

**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:** [March 5, 2024, 11:06am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/8 "2024-03-05T11:06:32Z")

</div>

**March-24 Updates**  
Just released version 1.5.0 of the plugin. You can now specify the **language** of the Mapbox Map.

How about a map of Tokyo in Japanese…

 ![Screenshot 2024-03-05 at 11.00.07](https://us1.discourse-cdn.com/bubble/original/3X/f/4/f4c724362b419904bdcaa965690ccf8f7edc3329.jpeg)

Or the UK and Ireland in French…

 ![Screenshot 2024-03-05 at 11.04.29](https://us1.discourse-cdn.com/bubble/original/3X/d/3/d3dc670b6528d400b257f09cb63042f0cc18183a.jpeg)

It’s really simple to set a specific language - you just need to add the relevant language tag to the ‘Map Language’ field:

 ![Screenshot 2024-03-05 at 11.05.19](https://us1.discourse-cdn.com/bubble/original/3X/f/5/f55a2bffbcfde094327df3962b79cc3e441f642a.jpeg)

Any questions just let me know 🙂

---

<div class="post-metadata">

**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:** [March 11, 2024, 10:46am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/9 "2024-03-11T10:46:35Z")

</div>

**(more) March-24 Updates**

Version 1.6.1 of the Beautiful Maps - Mapbox plugin comes with more options for **Drawing Mode**. You can now draw Polygons, Lines and Points on your map!

![2024-03-1110.40.53-ezgif.com-optimize](https://us1.discourse-cdn.com/bubble/original/3X/0/0/006a769cbbd67c9535efec48bbd5a09356e8a359.gif)

There is now a separate action called ‘Enable Drawing Mode’ that you can run on page load. You can choose which of the 3 drawing options appear on your map and what the default drawing mode is:

 ![Screenshot 2024-03-11 at 10.45.53](https://us1.discourse-cdn.com/bubble/original/3X/9/c/9c2484d34b84e93cb95bc987135cd81682b3fc10.png)

Any questions just let me know 🙂

---

<div class="post-metadata">

**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:** [April 8, 2024, 11:20am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/10 "2024-04-08T11:20:18Z")

</div>

**April-24 Updates**  
You can now create workflows based on clicks on specific markers!

I released a new version of the plugin this morning ( **version 1.7.0** ) that has:

- A new custom event: ‘ **A Marker is Clicked** ’
- Two new exposed states on the Mapbox Map element: ‘ **Last Clicked Lng** ’ and ‘ **Last Clicked Lat** ’

Combined, they allow you run workflow actions based on when the user clicks on a specific marker.

For example, in my [Store Locator demo app](https://starbucks-store-locator.bubbleapps.io/), each time I click on a specific entry in the repeating group, I change the background colour of that entry and fly to the corresponding marker (using the ‘Fly to Location’ event):

![2024-04-0811.58.51-ezgif.com-optimize](https://us1.discourse-cdn.com/bubble/original/3X/1/6/16fd26590fe02d4e9be1679d3e3b11bedb631daf.gif)

With the latest update, you can also set the background colour of the repeating group entry and fly to the location _when the user clicks on the marker itself._

![2024-04-0812.06.44-ezgif.com-optimize](https://us1.discourse-cdn.com/bubble/original/3X/5/5/555d6e663bfc6a184ddf3bd93738e741d86ed015.gif)

This is the setup used:

- A custom state called ‘Location’ is set on the page
- The ‘When Mapbox Marker is Clicked’ event is triggered whenever a marker is clicked
- When the marker is clicked on, the exposed states ‘Last Clicked Lat’ and ‘Last Clicked Lng’ will be set/updated
- These values in these exposed states can be used to search for the location in the database that corresponds to these values

 ![Screenshot 2024-04-08 at 12.12.11](https://us1.discourse-cdn.com/bubble/original/3X/4/8/48cbe4e2efa7cc8f52bfb8e2c8d5b2a280f355b1.jpeg)

- In the screenshot above, the latitude/longitude values from the exposed states are used to set the state of ‘Location’ custom state
- I’m then setting the background colour of the relevant entry in the repeating group using conditionals

 ![Screenshot 2024-04-08 at 12.16.40](https://us1.discourse-cdn.com/bubble/original/3X/5/9/59e9be7ee17c6f724c77f15be230ac775b32ac48.jpeg)

- You can also scroll to the relevant entry in the repeating group by using the exposed state values to find the corresponding location

 ![Screenshot 2024-04-08 at 12.17.23](https://us1.discourse-cdn.com/bubble/original/3X/2/8/285b7b2a1f009b89574e3ff5a327f2ff770a0c6e.jpeg)

- Finally, you can once again use these values to ‘Fly’ to the location on the map

 ![Screenshot 2024-04-08 at 12.19.08](https://us1.discourse-cdn.com/bubble/original/3X/b/4/b4e14280c2a66fe7276d1cb93d0218f66da057d8.jpeg)

If there are any questions on this new feature, just let me know 🙂

---

<div class="post-metadata">

**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:** [April 9, 2024, 8:54am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/11 "2024-04-09T08:54:14Z")

</div>

Hi all, just a quick note to say I’m currently working on fixing a bug in the latest two versions of the plugin. The bug is causing no markers to load when the ‘Add List of Markers’ workflow action is run AND the custom icon field is left blank.

I expect to have this bug fixed in the next few hours, but please use **version 1.6.2** until further notice.

Apologies for any inconvenience.

---

<div class="post-metadata">

**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:** [April 9, 2024, 10:08am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/12 "2024-04-09T10:08:44Z")

</div>

Just released **version 1.8.0** of the plugin that includes a fix for the issue where markers didn’t load on the map under certain conditions.

Any questions just let me know 🙂

---

<div class="post-metadata">

**Author:** ![stefanof](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stefanof/32/49959_2.png) [@stefanof](https://forum.bubble.io/u/stefanof)\
**Post date:** [April 9, 2024, 1:55pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/13 "2024-04-09T13:55:24Z")

</div>

Hi @alexcooney5 , it would be nice if the drawing feature allows to save the coordinates of the lines, polygons or points. And then being able to keep the drawing when map is loaded. My use case is related to boater users drawing coastal cruising routes for their itineraries. What do you think ?

---

<div class="post-metadata">

**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:** [April 9, 2024, 9:17pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/14 "2024-04-09T21:17:34Z")

</div>

Alex, what a great update.

Two features I think would be useful are:

1. Cursor change on map marker hover to denote some form of clickablity
2. The ability to pull center of the map’s lat / long. This would help dynamically adjust nearby markers as the user moves around the map (assuming there is some form of radius filter set)

Great job overall.

---

<div class="post-metadata">

**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:** [April 10, 2024, 9:26am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/15 "2024-04-10T09:26:55Z")

</div>

Hi @stefanof, thanks for this feedback.

I won’t be able to implement this immediately, but I like the idea. Will put it on the list of features to add.

---

<div class="post-metadata">

**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:** [April 10, 2024, 9:52am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/16 "2024-04-10T09:52:11Z")

</div>

**(more) April-24 Updates**  
@zico.gaeffke, I just released an updated version of the plugin ( **version 1.9.0** ) that allows you to access the **map’s current center coordinates**.

The Mapbox Map element now has two new exposed states:

- Center Lng
- Center Lat

Each time a user shifts location on the map, these exposed states are updated (Please note the exposed states get updated once the map has finished ‘moving’).

See the below example (which is from the [demo app](https://beautiful-maps-mapbox.bubbleapps.io/)):

 ![Screenshot 2024-04-10 at 10.48.48](https://us1.discourse-cdn.com/bubble/original/3X/f/0/f0e4cc67a1c73acfe45713edd0638ba84bbae455.jpeg)

I’ve also added a custom event called ‘When Mapbox Map Transition has Ended’

 ![Screenshot 2024-04-10 at 10.50.04](https://us1.discourse-cdn.com/bubble/original/3X/3/1/31b99196d0611b21f80547d466d5afeb36acf056.jpeg)

This will allow you to re-load markers based on the new center coordinates after the map has stopped ‘moving’

Hope this is useful and any questions let me know 🙂

I have also noted your request to change the cursor when it’s hovering over a marker. Will aim to include this in a future release.

---

<div class="post-metadata">

**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:** [April 10, 2024, 2:30pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/17 "2024-04-10T14:30:21Z")

</div>

Just released a tutorial video on how you can trigger a workflow action based when a user clicks on a marker:

[![](https://img.youtube.com/vi/uJtFK60gg1E/maxresdefault.jpg "Trigger action with marker click - Bubble.io x Mapbox tutorial") ](https://www.youtube.com/watch?v=uJtFK60gg1E)

---

<div class="post-metadata">

**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:** [April 17, 2024, 10:03am UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/18 "2024-04-17T10:03:46Z")

</div>

**How to load map markers that are a certain distance from the current user**

I received a question recently on how you can _only_ load markers that are within a certain distance of the current user. This is a good question, as if you have 10,000 records in your database, you probably don’t want to load every single one each time your Mapbox Map is loaded in your Bubble app.

The solution is fairly straightforward - it involves only searching for locations in your database that are within X kms/miles of the current user.

For example, the current user (me) in the map below is based in London. My database contains a location in London and a location in Paris. If I don’t put any constraint on my search, both markers get loaded when I run the ‘ **Add List of Markers to Mapbox Map** ’ action:

 ![Screenshot 2024-04-17 at 10.54.00](https://us1.discourse-cdn.com/bubble/original/3X/7/0/703b1d10e31b03d07dcbbf2aec805ed081abeb3a.jpeg)

HOWEVER, if I only search for locations in my database where the geographic address is within 300kms of the ‘current geographic position’…

 ![Screenshot 2024-04-17 at 11.00.39](https://us1.discourse-cdn.com/bubble/original/3X/7/3/73485498af73aede3007331caeb610e500f4e474.jpeg)

…only the London marker gets loaded on the Mapbox map:

 ![Screenshot 2024-04-17 at 11.01.31](https://us1.discourse-cdn.com/bubble/original/3X/1/5/1586fa629c37d338cdf1fea7438f45150b895c4a.jpeg)

A couple of additional notes:

- You will need to save down the geographic address of each location to your database for this approach to work
- The search constraint needs to be applied to both the **longitude** and **latitude** values

Any questions just let me know 🙂

---

<div class="post-metadata">

**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 13, 2024, 2:55pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/19 "2024-05-13T14:55:59Z")

</div>

**May-24 updates**  
Just released a new version of the [Beautiful Maps - Mapbox plugin](https://bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600) (version **1.10.0** ) that makes it really easy to add different style marker icons to the same map:

 ![Screenshot 2024-05-13 at 15.49.09](https://us1.discourse-cdn.com/bubble/original/3X/a/e/ae55b23e107212efbbe2f26e5d06bbb880fe1955.jpeg)

The ‘Add List of Markers To Mapbox Map’ action now comes with new field called “Icon Image (Multiple)”. Simply add an image field to your ‘location’ data type (or whatever data type you’re using to load markers) and reference it in this field.

 ![Screenshot 2024-05-13 at 15.52.28](https://us1.discourse-cdn.com/bubble/original/3X/0/6/068ffa57259b8b19a72b7581895f8c8d7ed919f8.png)

Full instructions and an editor setup can be found in the [demo app](https://beautiful-maps-mapbox.bubbleapps.io/) 🙂

Any questions just let me know!

---

<div class="post-metadata">

**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 14, 2024, 4:00pm UTC](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293/20 "2024-05-14T16:00:25Z")

</div>

**(more) May-24 updates**  
Just released a tutorial video that shows how to add different style markers to a map:

[![](https://img.youtube.com/vi/RRl133FBGlM/maxresdefault.jpg "Add Different Style Icons to a Map - Bubble.io Tutorial") ](https://www.youtube.com/watch?v=RRl133FBGlM)

[Next page](https://forum.bubble.io/t/new-plugin-beautiful-maps-mapbox/290293.md?page=2)