šŸ—ŗ Mapbox Maps - Total revamp of one of the most popular Bubble plugins from Zeroqode

@ZeroqodeSupport I am hopeful that you are on the list of alpha plugin builders – because I can’t build a native moblie app without Mapbox and Leafy :slight_smile:

1 Like

Hi @greg18,

Thank you for your message and your interest in our products.

Our development team is actively working on new plugins for the native Bubble environment.

The mobile builder is anticipated to launch around June 2025, and we are excited to test our native plugins once it’s available.

Stay tuned for new updates! :blush:

Best regards,

Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like

Hey @ZeroqodeSupport I recently subscribed to the plugin for a business idea I’m pursuing, and I’m trying to use the live realtime data functionality, on the first place, the map shows all of the users positions and not only the last (which is what one would expect), also when the map loads, It doesn’t center on the last available location (I know this can be triggered but, the map should follow that last position).

Hopefully this is a quick fix to implement.

All the best

Hi @aestela,

Thanks for reaching out to us, and our apologies for the delay in responding!

The Realtime Data feature displays everything that you provide from the database. You can add constraints to show only a specific user’s position based on who is logged in, or other constraints based on your use case. These constraints can be added in the ā€œLive Tracking Dataā€ field, as shown in this screenshot.

Regarding your second concern, when the map loads, it centers based on the coordinates provided in the ā€œInitial Longitudeā€ and ā€œInitial Latitudeā€ fields within the element settings. If you want the map to center on a specific location after it has loaded, you can use the ā€œSet Centerā€ action and provide the desired coordinates.

The map loads with the information you set in it’s settings. Any other preferences such as displaying markers, live location, clusters, routes, and so on, after the page is loaded, needs to be added by using the plugin actions. It does not set itself as it was previously loaded. We hope this clears up your concerns!

Best regards :sunflower:

Browse all Zeroqode Plugins for Bubble
Banner_Last3

Thank for your response, the problem I’m getting now is that the map is not updating automatically when a new record is added to the data type used for the realtime data. The only way to achieve this is to trigger the ā€œAdd live realtime dataā€ action on a recurring basis (every x seconds) which shouldn’t be necessary.

Hi @aestela,

We’ve tested this use case and replicated the same behavior - the new database entries do not appear on the map without a page refresh. We’ve initiated an investigation with the developers to determine if this issue is coming from another source or if we can provide a fix!

We’ll get back to you as soon as updates are available! Feel free to reach out if you have any more questions or concerns.

Wishing you a relaxing weekend ahead!

Best regards :hibiscus:

Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hi @aestela,

Hope you’re doing well and happy Friday!

We wanted to inform you about the latest update for the Mapbox plugin - version 1.166.0. This update fixes the previously observed issue with the Realtime Data feature, specifically the problem where new entries from the database weren’t showing on the map without a page reload.

Please update the plugin on your side by going to the Plugins tab, clicking on the plugin, and selecting the latest version from the dropdown. Once updated, test it on your side to ensure everything is working as expected, and reach out with feedback to let us know if everything is working or if you encounter any unexpected behaviors!

Best regards :sunflower:

Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like

CleanShot 2025-04-21 at 17.17.33@2x
I’m just guessing that this big file is part of the mapbox plugin in some way.
Is it something that someone else has seen in their app?
I haven’t seen it before.

Hi @votterskog ,

Thanks for sharing! :pray:

Based on the screenshot, it seems like the large JSON file could indeed be related to Mapbox, especially if you’re working with spatial data like polygons or other geo-layers. Files like this can get quite large, especially if you’re loading complex datasets or numerous map tiles.

It’s not uncommon for Mapbox to generate sizable files, especially if you’re dealing with things like custom layers, vector tiles, or detailed map features. If the file size is much larger than expected, it could be a sign that a lot of data is being processed at once, which can sometimes slow down your app or cause performance issues.

If you haven’t encountered this before, it could be related to how the data is structured or loaded in your app. Have you been using specific Mapbox features, such as dynamic data layers or a large amount of geospatial data? Sometimes optimizing or simplifying the data before it’s sent to the map can help reduce file size and improve performance.

It might also help to check if you’re fetching the entire dataset at once, as lazy loading or breaking it into smaller chunks could reduce the load.

Looking forward to your reply. :sunflower:

Regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

It is related to mapbox, I can see it in chrome dev tools.
I don’t use any polygon stuff, I’ve searched my app, and I’m sure.
I only use the map and set route.
Although no one would like the look of a 27mb file in the network.
It seems load time in firefox dev tools is 0ms, and 352ms in chrome.

It would be interesting if anyone else can see this 27mb file in ā€œfirefox developer editionā€ browser.

Another note:
Mapbox was really slow for me for a good while after the unpkg issue. I finally found what the problem was — I have a custom button for location tracking, with ā€œdo every timeā€ to turn off/on based on a custom state. However this really caused issues after, it was visible in the console. I solved it by adding more custom states. I know this is not making much sense. All I’m trying to say is that if anyone else is having problems with abnormal loading times of the mapbox maps plugin, look in the console and look for any error messages related to the mapbox plugin, it’s fixable.

Hi @votterskog,

Thanks for the update and additional details!

After reviewing your situation, it seems like we haven’t observed anything like this on our end with the Mapbox plugin. A 27MB file size definitely seems larger than usual, especially for a basic map and route setup. Given the differences in load times between Firefox and Chrome, it could be related to browser-specific optimizations or how the data is being handled by the two browsers.

A few things to consider:

  1. It’s possible that Chrome might be handling the data differently than Firefox, leading to the noticeable delay. In some cases, Chrome might cache assets differently, which could explain the slower load time.
  2. You might want to check if any external assets, such as tiles or additional resources, are being loaded that could be contributing to the file size. Sometimes, external APIs or resources can increase the overall load.
  3. If you haven’t already, try optimizing the data being sent to Mapbox, especially if you’re using routing or dynamic data. Minimizing the amount of data sent on each request can help improve performance and reduce file sizes.
  4. As you mentioned, checking the console for any related errors is crucial. Any issues or warnings related to Mapbox can help identify the root cause of slow load times. It’s great that you found a workaround for the custom state issue!

If anyone else in the community has encountered something similar, we’d be happy to hear about it and see if there’s a pattern we can address.

Let us know if you need further assistance!

Best,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like

Hello @ZeroqodeSupport
I hope you’re doing well. I’m using the Mapbox Maps plugin in Bubble.io and encountering an issue when I call the ā€œRemove all markersā€ workflow action. The console logs the following error:

The plugin Mapbox Maps / action Remove all markers a MapBox Map threw the following error:
TypeError: Cannot read properties of undefined (reading 'forEach')
    at eval (PLUGIN_1521096392586x373091021041696800/Mapbox-Maps-element_action--MapBox-Map-Remove-all-markers-.js:3:1262)
    at https://goods2map.com/.../run_debug.js:567:331

It appears that the plugin is unable to iterate through its internal marker list. Could you please advise:

  1. What is causing this forEach undefined error?
  2. How should I correctly remove all markers that were added via the plugin’s ā€œAdd markerā€ or ā€œAdd list of markersā€ workflow actions?
  3. If I’m using dynamic markers bound in the Map element’s data source, is there a recommended pattern to clear them programmatically?

Any guidance or example workflows would be greatly appreciated.

Thank you in advance for your help!

Best regards,
Moby

Hi @goods2map0415 ,

Thanks for reaching out! :pray:

It looks like the error you’re seeing is due to the plugin attempting to iterate through an undefined list of markers. This typically happens when there’s no marker data or the markers haven’t been properly initialized before calling the ā€œRemove all markersā€ action.

Here’s what I recommend to resolve this issue:

  1. Check if markers are being added correctly: Ensure that your markers are being successfully added through the ā€œAdd markerā€ or ā€œAdd list of markersā€ actions before calling the ā€œRemove all markersā€ action. The error you’re seeing occurs when the plugin tries to loop through an empty or undefined list.
  2. Clear dynamic markers: If you’re using dynamic markers that are bound to a data source you might need to clear or reset the data source that holds these markers first, before calling the ā€œRemove all markersā€ action.
  3. Compare your setup: I highly recommend comparing your setup with our demo page to ensure that all the actions and workflows are configured correctly. Here’s the link to the demo for reference:
    Zeroqode Demo Page - Mapbox Maps.

Looking forward to hearing from you! :sunflower:

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

1 Like

Hey @levon,

I’m working on a feature where users can dynamically choose the map style that appears on their screen, and it’s important to achieve this while using only a single map element.

What would be the best way to handle this, given that the plugin interface does not currently allow dynamic selection of the map style? Would it be possible for your team to include this modification if there isn’t already a workaround available today?

Hello @theo4 ,

Thank you for reaching out.

I reviewed our demo page, and the exact case you’re describing is already configured there — it checks all the boxes:

  • The map style changes dynamically based on user input
  • A single Mapbox Map element is used

The style update is triggered via a workflow action tied to the button. For example, here’s a workflow that updates the style to light: Workflow Example.

You can also achieve a similar effect by setting conditional expressions in the plugin element’s Conditionals tab, which allows some additional customization.

For more details, please check our documentation: Mapbox Maps Plugin Docs.

Let me know if this helps, or if you’d like me to walk you through setting it up in your app.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hello @theo4 ,

I just wanted to follow up and check if you had a chance to implement the workflow I suggested in your app. Were you able to trigger the map style update dynamically based on user input?

If you’re still facing any issues or need further assistance setting up the workflow or conditionals, please feel free to let me know. I’d be happy to guide you through it.

Looking forward to hearing from you!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hi @ZeroqodeSupport team,

I’d like to suggest two improvements that would greatly enhance user experience when interacting with markers on Mapbox maps.

:one: Rich info card for markers
It would be great to have a built-in option to display a rich info card when a marker is clicked — similar to how apps like Uber show location details on their maps.
Currently, Mapbox only supports basic popups or custom HTML markers, which require a lot of manual HTML/CSS and event handling to achieve a modern card-style design with image, title, distance, and rating.
A native customizable popup layout would make it much easier for developers to create elegant, data-driven, and visually engaging map interfaces.

:two: Interactive cursor on hover
It would also be helpful if Mapbox provided a simple option to automatically change the cursor to a ā€œpointerā€ when hovering over a clickable marker.
While this can be done with custom JavaScript or CSS, having it as a built-in feature (for example, an option like cursor: "pointer" on hover) would make marker interaction more intuitive and consistent across different projects.

Both features would improve usability and help developers build map experiences that feel as smooth and interactive as leading mobility or discovery apps.

Thanks for considering these enhancements!
Best,
Moby

Hi @goods2map0415 ,

Great ideas — thank you for sharing them. We’ve forwarded your suggestions and the examples you provided to our dev team so they can review and assess next steps. We don’t have an ETA at the moment, but we’ll post an update in this thread as soon as we hear back from them.

Tell us which channel you prefer for follow-ups (this forum, the chat on our page, since you also reached out via it) and we’ll continue wherever is easiest for you.

Thanks again — your input is really helpful.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like

Hi @goods2map0415 ,

Great news! The Mapbox Maps plugin has been successfully updated to version 1.178.0, introducing the new Rich Card Popup Markers feature :tada:

This update lets you display visually rich and dynamic popups directly through the plugin — no need for complex manual HTML setups anymore. You can check out the new version on our plugin page and review setup examples in the documentation.

Regarding the cursor behavior, unfortunately, we’re unable to add more specific cursor styles at this time due to library limitations. It’s currently possible to have one type for the map and markers, and another for the card.

Looking forward to hearing your opinion after you test the update.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3