Mapbox Map Bubble Plugin Issue

[barijit]

I am repeatedly getting this error -“failed to load marker image”- when trying to load mapbox with 3 markers from database data using “Add list of markers” action in a workflow. I tried with png, jpg, svg files but no luck. Anyone has any idea why this might be happening?

I even tried sample icon files from internet but the error does not go away at all.

[mina.rotari]

Hey @barijit ,

Thanks for reaching out!

You mentioned you’re using the “Add list of markers” action in a workflow to load three markers from your database, and you’ve tried PNG, JPG, and SVG files (even sample icons from the internet), but the error persists. I’d need a bit more info to narrow down the cause. Could you share a few details?

• What’s the exact URL or file path you’re using for the marker images in your database? Are these images stored in Bubble’s file storage, or are they external URLs?
• Are you seeing any other errors in the browser console (you can check this by right-clicking on your page, selecting “Inspect,” and looking at the “Console” tab)?
• Which browser and device are you testing on?

Here are a few ideas to try in the meantime:

• Check Image URL Accessibility: The MapBox Maps plugin needs to access the image files directly. If the URLs in your database are broken, private, or not in a supported format, the plugin might fail to load them. Try opening the image URL in a new browser tab—if it doesn’t load, the plugin won’t be able to use it either.
• Supported Formats and Size: While PNG, JPG, and SVG are supported, stick to PNG or JPG for now, as SVGs can sometimes cause issues depending on the browser. Also, ensure the images aren’t too large or corrupted.
• Workflow Setup: In the “Add list of markers” action, confirm that the “Marker Image URL” field is correctly mapped to your database field with the image URLs. If this field is empty or misformatted, you might see this error.
• Timing Issue: If the map hasn’t fully loaded when the action runs, it could cause issues. Try adding a 1-second delay before the “Add list of markers” action, or trigger it after the “Map is loaded” event (listed in the plugin’s Element Events).

I’d also suggest checking out our demo page here to compare your setup. It shows a working example of the MapBox Maps plugin with markers, which might help spot any differences in your configuration.

If you can share the details I mentioned, I’d be happy to dig deeper and help resolve this for you!

Looking forward to your reply.

Regards,
Support Team

Browse all Zeroqode Plugins for bubble

[barijit]

Thank you for your response and the details within.
My app is a very simple test page - I have put a mapbox element on the page, have a database table with latitude, longitude, geographic address etc and then through a button click event i call the add list of markers action. The marker image is uploaded from a location in my computer. Attached is a screenshot of the same. Let me know if you need more details.

I have tried all formats - svg, png, jpg and the same result. I can also browse the file in browser when i click on the “see” link against marker icon.

I also tried your suggestion of adding a pause, but same error. Looked at the demo page and did not find any noticeable differnce - only thing i noticed is in the demo page the marker location is shown as a full url, whereas in my case it points to a relative location.

I am using Macbook Pro with iOS 18 and Chrome browser. Looking forward to your help on this matter. Thanks!

[barijit]

The error screenshot also attached.

[mina.rotari]

Hey @barijit,

Thanks for the detailed reply and the screenshot.

Since you’re able to view the image and have already tested PNG, JPG, and SVG formats with no luck, let’s dig a bit deeper with a few targeted checks and tweaks:

• Icon Size Check: The image size might be throwing things off. Open one of your marker images and verify its dimensions—aim for something small like 32x32 or 64x64 pixels, and keep the file size under 100KB. Oversized images can trip up the plugin, so resizing could be a quick fix.
• Full URL Needed: Noticed your marker image in the screenshot uses a relative path. The plugin likely needs a full URL (e.g., “https://s3.amazonaws.com/appforest_uf/…”). Check your database field in Bubble—make sure it’s storing the complete URL, not just a partial one.
• Timing Adjustment: Instead of triggering “Add list of markers” on the button click, let’s shift it to fire after the map’s ready. Set up a workflow using the “Map is loaded” event (find it in the MapBox element’s events in Bubble) and run the action there. This ensures the map’s fully initialized first.
• Single Marker Test: To narrow things down, try the “Add a marker” action with one of your image URLs. If it works, the issue might be specific to the list action handling multiple markers at once.
• Console Dive: Pop open Chrome’s developer tools (right-click page > Inspect > Console tab) and watch for errors when you trigger the workflow. Look for stuff like “404” (file not found) or CORS issues—those details could pinpoint the problem.

Give these a shot and let me know how it turns out! If you’re still stuck, drop any console errors you spot, and I’ll dig further with you.

Looking forward to your reply!
Regards,
Support Team

Browse all Zeroqode Plugins for bubble

[barijit]

Hello,
The image is uploaded from my local computer and not stored in database. So the url is generated by bubble and not specified by me in any way. The file size as it appears in MacOS file system is 1 KB only and the dimensions are 60x60 pixels.

I have already tried with a single marker when i was getting the error initially to isolate if its a data issue - same error.

I tried the Mapload event you recommended, and to my surprise, i find that it is not getting trigerred at all. I added an action to hide/show some elements and nothing works. Maybe that is the issue.

Could be a problem with the Map configuration? I am attaching the properties I have filled up in the page itself for your reference. “Plugin version is set at 1.165.0 - Fixed Library Import”.

[barijit]

Hello,
I finally found the issue, and it appears the error code was misleading and led us into a completely different direction.
My API Key had expired and hence the map was not loading, and thereby the markers and the images too. Once I fixed the API key everything works.

Sorry to have taken up your time and thanks for all the help and suggestions.

Maybe one improvement here could be to make sure the error code is more accurate so that debugging could be faster.

[mina.rotari]

Hi @barijit ,

Im glad you tracked down, an expired API key can definitely throw things off! No worries about the time , happy to assist. Good call on the error code suggestion—more accuracy could speed up debugging for sure. I’ll pass that along.

Regards,
Support Team

Browse all Zeroqode Plugins for bubble