How to Remove Single or Multiple Markers with the Mapbox Plugin

[harrisonalley]

In my app: https://route-manager.bubbleapps.io/index1 I have MapBox markers added to mapbox map with an ID = uniqueid of the location in my database so that the user can then remove individual locations from the mapbox map.

I would like to also have the user click a button and remove all markers from the map. However, I don’t know how to remove all markers when the IDs of each individual marker are unique.

I have tried scheduling an API workflow on the backend but the remove marker option isn’t available in the backend.

Can you help me brainstorm a way to add markers to my map in such a way that I can remove them individually or in bulk?

[alexandru]

Hi there @harrisonalley, sorry for delayed response. Let me check on this use case and I’ll get back with a reply asap.

[alexandru]

Hi @harrisonalley,

So, the way you remove whether a single or multiple markers, is by using the Remove Marker A MapBox Map action.
However, if you add a single marker on the map:

You have to specify its Marker ID with a value that, based on, you are going to remove it later on:

But, if you are using the action to place multiple markers on the map:

You have to specify the Marker Cluster ID, based on which you are going to remove the whole list of markers later on:

So, if you want to remove markers in bulk, you do it with remove action based on the cluster ID of the whole list of markers that you add. If you want to remove a single marker, you do it with the same remove action, but you just specify or point to the marker ID based on the single item being clicked.

Please check our demo editor here zeroqode-demo-08 | Bubble Editor to see how it works.

Hope it helps!

[harrisonalley]

@alexandru thanks for the response!

I understand mechanically how to remove a single marker or all markers based on ID. However, I need to be able to do both: have the user remove markers one by one or click a button and remove them all/start over.

So if all the markers have the same ID, you can remove them in bulk but not one by one.

If they all have different IDs, you can remove them individually but not in bulk.

I need to be able to do both.

Can you add the remove marker by ID to the backend workflows?

[alexandru]

Hi @harrisonalley,

Sorry, but we cannot provide exact solutions on this matter as it is beyond our services. We can only show how our product works or help with occurring errors to be fixed. I can understand your request, but it is a custom implementation based on your app that you are trying to build with its Bubble logic behind.
However, I could probably point into a direction that might help.

@harrisonalley

Can you add the remove marker by ID to the backend workflows?

Unfortunately, it is not possible. However, why would you need to schedule a workflow for this use case. You can simply remove a single marker when user clicks on the X icon, but it is necessary to indicate the right Marker ID of the current cell for that action that is being clicked. As I can see in your app, it just indicates the current cell’s text:

As for multiple markers, you can only remove them in bulk if you add them in bulk, having one cluster ID, unfortunately.

Thank you for understanding.