Services Plugins FAQs

Issue with loading list of icons on the Bubble Mapbox plugin

Hi there,

I am trying to use the “List of icons” functionality to load a different icon based on whether that point on the map satisfies a condition or not.

Before adding logic complexity to the list of icons, I started out first with a simple implementation as shown below. The markers are a list of points of interest. Each point of interest has an image stored on the bubble database. I am trying to show the image of all the points of interest using the “List of Icons” field.

The Problem

Only one of the icons is showing - the rest are not loading, and I’m getting an error saying “Failed to load image”. Looking at the console, I can see a number of CORS request errors (one for each image) as well as an “Uncaught TypeError”.

Here are a couple of URL links to the images that the plugin is failing to retrieve:

All are accessible from a standard browser.

Can you point me towards what could be causing this issue please?

Hi @luke1, thanks for reaching out.

The .png file format is not supported by the Mapbox platform. Please try to use the .svg files.

Hope the provided hint will help. Please let me know if there will be any other issue that I can help with.

Regards,

1 Like

Thank you for your reply @Serg .

Unfortunately, SVGs are not working for me at all.

Here’s the screenshot of the console:

Any other ideas of what could be happening here?

Edit:
If it helps, I have tried to use the SVG file as a “Static Image” and it is not working, which makes me think that SVG is not actually supported? I tried the PNG file as a “Static Image” and it has worked.

Hi @luke1. thanks for the reply.

For a better understanding of your user case, would it be convenient for you to add our support@zeroqode.com as a collaborator of your app? That will allow us to check what’s wrong with your setup and test it out in our workspace.

Enter your Bubble editor page → Settings → “Collaboration” tab → Invite a user (email).

(Note: disregard the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.)

I will check your setup and do a few tests in an attempt to find the root cause and help you fix it.
In case it is ok for you, please let me know.

Regards,

P.S. Please also indicate on which page is the mentioned setup, and what user profile to use for testing

Thank you @Serg - I have added the support email as an editor on my app and I’ve sent more details via email on that email address. Let me know if you’d like any more information from my end.

Hi @luke1, thanks for the provided access and details.
Please excuse me for misguiding information about supported formats for marker image (SVG vector images works with Mapbox Studio).
In fact, the Mapbox plugin supports png, webp, or jpg format.

Following this, please use the .png images for your markers. We’ve added few of the kind, see the trip_plan_new page on load.
image
image

Hope the provided hints will help. In any other question will appear, drop a message :wink:

Have a nice weekend ahead!

Regards

Thank you so much @Serg

Apologies for being a pain but it looks like only the first 3 png images are loading. In total there should be 7 points on the map.

Looking at the console I still see the same errors that I was seeing originally.

Originally I also was having a single point loading (out of the same 7), so could it be something in the plugin’s loop that’s adding the images to the Mapbox map?

Thanks again!

Hi @luke1, thanks for your reply.

Please be sure to check all markers to have the proper images uploaded. The shown error might be related to the impossibility to load the missing marker image.

Regards,

Thank you @Serg - we’re getting closer!

You were right, some of the markers were still in SVG and so they weren’t showing up. I have now changed them all to png and more of them are showing up.

However, I am still missing one marker on the map. I should have 7 markers but only 6 are showing up. I have tried running the page in debug mode and I can see that the “List of Icons” is being populated with all the 7 markers (refer to the image below), however, one of them is not displaying on the map.

Screenshot 2022-04-29 at 08.35.09

I also checked the “Markers Source” property and it is also being populated with 7 map objects, so the number of markers/icons are the same in both “Markers Source” and “List of Icons”.

What I have noticed is that it is the first marker that is not being displayed on the map.

Console shows only this error but not sure if it’s relevant here?

Thanks!

Hi @luke1, thanks for your reply.

Please check that all 7 markers have the proper image for display. Following the inspector hint, seems that one of them is not uploaded correctly.
image

Regards,

@Serg I didn’t realise I had 2 markers with the exact same location :see_no_evil: - issue is now solved - thank you so much!

Hi @luke1, glad to hear that mentioned issues have been solved :hugs:

If any other questions will arise, you know where to find us :wink:

Have a good week ahead!
Regards,

@Serg sorry to bother you again. I am now trying to add some more complex functionality on top of this by setting a different coloured marker for “selected” points on the map.

In the debugger I can see that we are getting the list of 7 PNGs correctly (see image below).

However, in the browser console I am getting the following error - “Error: An image with this name already exists.”:

Bubble gives me no errors, but what shows up on the map is 7 red markers (when it should return 4 red ones and 3 green ones)

The 7 pngs can be accessed here:

  1. First icon (red)
  2. Second icon (red)
  3. Third icon (red)
  4. Fourth icon (red)
  5. Fifth icon (green)
  6. Sixth icon (green)
  7. Seventh icon (green)

Any ideas of what could be happening here?

In case you need to access the Bubble workflow that is causing this, you can head to the “Group ItineraryStop is clicked” workflow in the “trip_plan_new” page. Support account should still have access to the app.

Hi @luke1, thanks for your message.


The reported issue still relates to the fact that one of the markers doesn’t have a corresponding format and/or the sorting options setup is incorrect.

Allow me to recommend creating a test page, with a simple “Add list of markers” function, which you can complicate step by step to the existing one. It will allow you to identify the stage when the above-mentioned error will appear.

Hope the provided hint will help.

Regards,

Thank you, Serg. Can you just clarify what you mean by “or the sorting options setup is incorrect”?

I’ve ruled out format issues because when I use all red or all green markers they all load up correctly without any issues. The issue arises when I try to merge the two type of markers together into one list.

Let me explain in more detail.

:stop_sign: What is not working

Basically my markers source is now a merge of two lists, instead of just a single list:
Screenshot 2022-05-17 at 09.58.41

And my list of icons is also a merge of two lists’ list of icons (Default_Icon is the red icon, Selected_Icon is the green icon).
Screenshot 2022-05-17 at 09.58.26

:white_check_mark: What is working

Both of these options work well (which is why I do not think that the format is the issue here):
Screenshot 2022-05-17 at 10.01.44

Screenshot 2022-05-17 at 10.01.54

And if you’re wondering whether the searches are returning the same list, I have posted the screenshots in my previous post showing that Bubble is indeed compiling the right lists for both the source and the list of icons, and they are also in the correct format.

Hi @luke1, thanks for your reply and provided additional details.

Regretfully, the Mapbox plugin doesn’t support the load of two merged markers lists or a load of some markers from one list and some from another.
A possible workaround would be to use the conditions, for example, the list of markers loaded by default under certain conditions can be replaced by another list.

As the shown error didn’t provide enough details, that was a supposition on what moment should be paid additional attention to.

Please let me know if there is anything else that I can help with about our plugin.

Regards,

Ok thank you, Serg!

Few last questions so that I can look at what is the best way how I can work around this:

Ultimately what I want to achieve is that when a user clicks on a section on the page, the points on the map relating to that section are highlighted to the user (in this case I am using different). Is there another easier way of doing this with the plugin?

And on another note, if I load all images in a custom state list (originally merged from two sources), then would I be able to load the markers on the mapbox map as a single list from the custom state list?

Thanks!

Luke

Hi @luke1, thanks for your message.

Besides the workaround proposed above, the only thing that I can add is that you also can use the “Fly to a Mapbox Map” action, so the certain point on map with related markers will be shown closer to the user.

Even if it is one merged custom state, it is still using two sources and,regretfully, will not display all markers properly.

Hope the provided answers helped in a way. If there will be any other questions, please let me know.

Regards,

@Serg I cannot find the action to change the list of actions in the conditions. Can you please point me towards where you suggested?



Another workaround

I have tried another workaround - I keep a list of the icons that need to show in the DB, so that when I need to refresh the markers I just get a single list of icons from the DB.

The problem is that the icons do not change from red to green. It seems like the mapbox plugin cannot refresh the markers without having to reload the page?!

If I load the “Green markers” on page load, and then on user click I change them to “Red markers”, they will not change to red - they remain green.Vice versa, if I load the “Red markers” on page load, then on user click I change them to “Green markers”, they will not change to green - they remain red.

This is the error that I see in the console:
Screenshot 2022-05-24 at 09.01.28

I am also using the “Remove all markers” function before I call “Add list of Markers”.

Is it possible to update the plugin so that at least it can refresh the markers when add list of markers is called? (or maybe even when remove all markers is called?)

Thank you.

Hi @luke1, thanks for your reply.

Apologies for a bit unclear reply from my side. The abovementioned conditions should be used within the “Add list of markers” action, having the corresponding action with a list of markers for each case.

As possible solution - you can have two separate data types & lists, marker1 and marker2 for example, which can be loaded/ removed/uploaded in accordance with your case setup.

Maybe I am missing something, but so far, plugin features allows to add /remove/replace one list of markers with another.

Please let me know if still there is something that requires additional help from my side :pray:.

Regards,