🗺 Mapbox Maps - Total revamp of one of the most popular Bubble plugins from Zeroqode

Hi Zeroqode team.
I had a look with Anthony and it seems like the issue is that adding a new set of markers won’t update existing ones.
Basically he wants to update the image/icon of existing markers, but:

  • Using the action Add list of markers again to erase the existing one doesn’t work
  • Using the action Delete all markers and then Add list of markers with the new markers doesn’t work either - that’s surprising as it looks like there’s a sort of caching.

:pray:

1 Like

Hello @vnihoul77 ,

Thank you for reaching out to us.

We’re excited to inform you that in our latest plugin version, “1.126.0”, we have introduced a feature to clear the icon image cache. This addresses the previous issue with icon image cache and ensures that deleting and re-adding markers now functions seamlessly.

To ensure optimal performance, please make sure the markers are firstly visible on your page by including a list of markers. Then, follow these steps:

  1. Select the marker on your map that you wish to modify.
  2. Update the relevant marker information in your database. (img)
  3. Remove all markers from the Mapbox element.
  4. Wait for about 0.5 seconds to allow the changes to take effect.
  5. Re-add the list of markers with the updated information.

For a practical demonstration, please visit our test page and check out the video walkthrough(link) to see how it works.

We hope this resolves your query. Should you have any further questions or require additional information, please don’t hesitate to contact us.

Thank you once again, and we look forward to your reply.

Best regards,
Zeroqode Support Team

Thank you for the quick response :star2: @haddad.anthony26

1 Like

Thank you very much @ZeroqodeSupport for the update!!

Is there a way to add a search bar directly to the map, like it this photo?

Hey @vnihoul77 and @haddad.anthony26,

Thank you so much for your messages and feedback. :blush:

It’s fantastic to hear that we’ve successfully addressed your inquiry! Please feel free to reach out if you have any more questions or suggestions for plugins. We’re here to ensure everything works smoothly for you.

By the way, if you found our service helpful, we’d be grateful if you could share your experience by rating our plugin under the Plugins tab in your Bubble editor. Additionally, feel free to leave a review on Trustpilot: Zeroqode on Trustpilot. Your feedback not only supports us but also aids the wider Bubble community. :pray:

Thanks again, and have a great week ahead!




Hello @dm8668,

Thank you for reaching out to us.

Yes, you can use the action “Add geocoder MapBoxMap” to directly add a search box to your Mapbox element. However, if you wish to customize it further and achieve the look you presented in your image, you can do so using an HTML element and some CSS styling.

First, add a small HTML element to your page—it can be as small as 1x1 px so it won’t disrupt your page design. Then, insert the following code:

<style>
/* Positions the search box */
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
    margin: 10px 0 0 150px !important;
}

/* Rounds the corners of the search box */
.mapboxgl-ctrl-geocoder input[type='text'] {
    border-radius: 50px !important;
}

/* Removes padding from the geocoder */
.mapboxgl-ctrl-geocoder {
    padding-left: 0px !important;
}


/* Hides the icon */
.mapboxgl-ctrl-geocoder--icon {
    display: none !important;
}
</style>

The .mapboxgl-ctrl-top-left .mapboxgl-ctrl will help center the search box, and you can adjust the values according to your needs(but make sure to set the values in the action to -top-left or to change this accordingly).

The .mapboxgl-ctrl-geocoder will make the box rounder; here, you can also adjust the 50px value.

The last two will remove the icon from the element if you don’t need it. Also you can check this test page: zeroqode-demo-08 | Bubble Editor to see how it works in action.

Could you please try this in your app and let us know the results and if everything is working fine?

Thank you once again and looking forward to your reply.

Best regards,
Zeroqode Support Team

Hi,

When the user is logged in in my app the start location workflow get trigger and looks like this as you can see here: https://www.veed.io/view/dac3e9b7-d01b-403f-9602-f13e7d8c66ed?panel=share

1/ The start location tracking doesn’t have any origin location but it starts from the middle of the ocean
2/ Is it possible to get the map as a globe instead of flat?

Hello @haddad.anthony26,

Thank you for reaching out.

We attempted to access the video you mentioned, but it appears to be set as private (img). As an alternative, you might consider using Loom, which is free and user-friendly. Could you also provide screenshots or a screencast of the workflow related to the action? Specifically, we need to see how you have configured the action.

Regarding your query about setting the map as a globe, it is definitely possible. You simply need to adjust the theme settings in the Mapbox element (img).

Thank you once again for your cooperation, and we look forward to your response.

Best regards,
Zeroqode Support Team

Hi,

Here is the screenshots of the wf setup

Here is an updated link for the video (Loom Message - 5 May 2024 | Loom) it’s black on web but does show the map on mobile.
You can see in the video that the zoom is starting from the sea in the middle of nowhere.
The setting is satellite but I don’t see how to make it as a globe.

Thank you,

Hello @haddad.anthony26,

Thank you for the message.

Initially, the map element defaults to starting at the intersection of the prime meridian and the equator, at a latitude and longitude of “0,0” , known as Null Island. This is the standard initial setting for Mapbox Maps. However, you can easily configure the map to open at a specific location by adding an action at page load, tailored to your use-case.

Regarding your query about displaying the map as a globe, the Satellite style you are using employs the Mercator Projection, which appears 2D, please check this link. If you are looking for a satellite globe view, you might consider using the “satellite-streets” style, as it almost the same. Additionally, if you wish to create and use your custom style, please refer to this Mapbox Library documentation (link).

Hope you find this information helpful. Have a great week ahead!

Best regards,
Zeroqode Support Team

Hi @ZeroqodeSupport

Thank you for your reply.

Is it possible to change the user’s location icon (the blue dot) by another image (dynamic ideally)?

Thank you,

Thank you

Hello @haddad.anthony26,

Thank you for your message.

Regarding your query, you can customize the location icon as desired by using a simple HTML element on your page coupled with some CSS:

  • First, add a small HTML element to your page—it can be as small as 1x1 px so it won’t disrupt your layout.
  • Next, insert the following code into the HTML element (img):
<style>
.mapboxgl-user-location-dot, .mapboxgl-user-location-dot:before, .mapboxgl-user-location-dot:after {
    border-radius: 50%; 
    height: 35px !important;
    width: 35px !important;
    background-color: transparent !important;
    background-image: url('https://stickershop.line-scdn.net/stickershop/v1/product/23701012/LINEStorePC/main.png?v=1') !important;
    background-size: cover !important;  
    animation: none !important;
}

.mapboxgl-user-location-dot:after {
    display: none !important;
}
</style>

In this code, adjust the height and width to change the size of the icon. Replace the link in the background-image with the image you want, use background-size: cover to ensure the image fits, and animation: none to remove the pulsating effect from the location icon.

For further customization, please refer to this documentation about CSS styling: [link].

Hope this guidance proved helpful for you. Please let us know about your progress, or if there are any other questions. :pray:

Thank you once again and have a great day ahead!

Best regards,
Stefan

So I suppose it’s impossible to get a user dynamic image this way?

Hi @ZeroqodeSupport
I have a quite urgent issue with the plugin, every time a marker is clicked users get this error. It was working well before and nothing has changed.

It’s not the first time I get this kind of errors on the same wf which works most of the time.
How to avoid these error messages and make this wf more reliable in the future?

Thank you,

Hello @haddad.anthony26,

Thank you for the message.

Regarding your question:

actually, you can indeed use a dynamic value in the HTML element, it’s not limited to static text only(img).

The error message shown in your screenshot appears to be related to the “Check if point is in geofence around the marker” action configurations. Could you please provide us with more details from your workflow? Specifically, we would like to know if there is any event triggered when you click on a marker. Please show us the workflow related to this and, in particular, how you configured the “Check if point is in geofence around the marker” action(screenshots or screencast).

Additionally, could you please share a step-by-step video from the moment you open the app to the actions that lead to this error message? Make sure to check every action to see how exactly this error pops up, and share the video link with us.

This information will help us better understand your use case and provide a more accurate response.

Thank you once again, and we look forward to your reply.

Best regards,
Zeroqode Support Team

Hi @ZeroqodeSupport,

Regarding the dynamic image, I’m using this code but it doesn’t wrapped well the image. Do you know how to fix it?
mapboxgl-user-location-dot {
border-radius: 50%;
height: 30px !important;
width: 30px !important;
border-color: transparent !important;
background-color: transparent !important;
background-image: url(‘’) !important;
background-size: cover !important;
animation: none !important;
}

.mapboxgl-user-location-dot:before, after {
display: none !important;
height: 80px !important;
width: 80px !important;
}

Hello @haddad.anthony26,

Thank you for your message.

Indeed, to ensure that everything looks just as you desire and to further customize your design, you’ll need to explore additional CSS properties. Experiment with them to find the best fit for your needs.

For more precise customization, open the console, select an element, and use its class name to modify the style attributes, as demonstrated in this image, and the use them in the HTML element on your page. This method also enables you to adjust the styling of other elements within Bubble. Additionally, there are numerous online resources available on CSS styling that you might find useful.

Hope you find this information helpful. Have a great day ahead!

Best regards,
Zeroqode Support Team

Hi @ZeroqodeSupport

Here is the video screening of the app launch and the action which trigger the error, it only display the error on mobile - not on web.
here is the screenshot of the wf.

Thanks a lot for your help

Hello @haddad.anthony26,

Thank you for reaching out.

We understand from your message that the app functions correctly in a web browser but you encounter some difficulties on the mobile version.

To help us better understand the situation, could you please clarify whether you have wrapped your app for mobile devices or are you referring to accessing it via a mobile browser? It’s important to note that our plugins are primarily designed for web applications, and we cannot guarantee compatibility with all native applications wrapped by third-party services.

If you are referring to the mobile browser, could you please specify the device, browser, and OS version you have tested with? Also could you please record a video on device showing the exact error you are getting.

Thank you once again for your cooperation. Looking forward to your response.

Best regards,
Zeroqode Support Team