📍 New Plugin: Beautiful Maps - Mapbox

Feature suggestion - disable zoom mode! sometimes users don’t want the auto zoom since they’ve set the map to the right zoom length manually.

1 Like

Hi @zico.gaeffke, nice idea. I’ll put it on the to-do list to disable zoom mode fully.

In the meantime, you can implement this yourself by setting the max and min zoom level to the same value. See the below post for full details :slight_smile:

Automatically trigger geolocation - October-24 update
You can now automatically show the current user’s location on a map on page load.

Geolocation - Mapbox Maps

Simply set the ‘Geolocate Control’ and ‘Trigger on Page Load’ fields on the Mapbox Map element to ‘yes’.

Previously the user had to actually press the geolocate button on the map to show their location.

You can also now add/remove the geolocate controls and trigger the geolocation using two new workflow actions:

  • Add Geolocation
  • Remove Geolocation

Any questions just let me know :slight_smile:

2 Likes

Thanks for this extremely useful feature. Appreciate how your team continually upgrades the plugin features and amazing support.

1 Like

No problem @mayank.m84! Thanks for your support and feedback :slight_smile:

Can we get the measurements of polygons?

Just a heads up your demo page is broken and non functional on my mobile browser

Thanks for this Alex! Exactly what I needed.

1 Like

Hi @joe26, yep each Mapbox Map element comes with an exposed state called ‘Area’. You can use this to get the area covered by the polygon (in meters). See below for an example:

Mapbox - Polygon Area

You can also view the ‘Drawing on a Map and Saving Coordinates’ section of the demo app to see the editor setup behind this.

Thanks for the heads up on the demo page. The link is working fine for me, but I can see that some maps aren’t fully loading on mobile - I suspect this is because there c.20 maps and 5 videos being loaded, which might be a lot for a mobile device to handle. I’ll see what I can do :slight_smile:

1 Like

No problem @mon.petit.site.web! :slight_smile:

Hi @alexcooney5 ,

I am testing your plugin (under agency plan) for my use case and I have a couple of questions for you. As background info, I am working with GEOJson files. More specifically with a “FeatureCollection” structure of the Json.

  1. I have noticed that if I just copy and past the content of my GEOJson file in the action “Load GeoJSON MapboxMap” there is no result; maybe because the list of features is not accepted by the plugin; can you please confirm that the plugin does not work with the FeatureCollection" structure of the json ?

  2. I managed to upload my GEOJson as a dataset in Mapbox studio, convert the data set to a tileset and then add it to a style. The map is correct and I was also able to add a new tileset with labels from the properties of the GEOJson.

Schermata 2024-10-17 alle 08.39.51

  1. here is my most important question: how can I click on an area (or a name) and start an action ? In Bubble terms, is there a way to add an event “click on a GEOJson Geometry” and then pass as parameters the feature’s property of that specific geometry ? In my use case, on click in one city area I want to set a custom state or add a URL parameter to the page with the “id” of the city area clicked. My question is not referred to the plugin only (clearly there is no such a thing) but more generally to Mapbox features. I see that inside MapBox I can click on the area and a popup with data comes up. Maybe you have an idea how to get the same behaviour in Bubble ?

  2. last but not least, I need that the map exposed is not zoomable and not draggable. For what concerns the zoom, I used the min/max zoom option in the plugin and it’s ok. But I can’t find a way to block the drag (both with mouse and touch). Do you think that this feature will be added in the future to your plugin ?

Thank you for your help

1 Like

Hi @stefanof, thanks for trying out our plugin!

Correct. I’m afraid the Load GeoJSON Mapbox Map currently only accepts the following formats:

Polygon/Line Format
[longitude, latitude],
[longitude, latitude],
[longitude, latitude]

EG
[-5.681185879392416, 50.09275948474931],
[-4.452754116441156, 51.33393794873945],
[-3.6867818684687848, 50.175962443525464]

Point format
[longitude, latitude]

EG
[-5.681185879392416, 50.09275948474931]

The plugin won’t recognise anything more complex. It handles polygon/line/point GeoJSON differently under the hood, which is why there are separate inputs for each.

On a slightly unrelated note, I realise I’ve used the format [longitude, latitude], rather than the more correct [latitude, longitude]. This won’t affect the functioning of the plugin, but just something to be aware of.

This is not currently possible, but I’m happy to try and add this functionality. What we could do is something like the following:

  • Add the GeoJSON as a layer in Mapbox Studio (like you’ve done)
  • Load the layer as a custom style
  • You would add the name of this layer to the Map element (in a new field I would add)
  • When the layer is clicked, the feature’s properties could get returned to as an exposed state on the Map element
  • I could add an event called ‘When layer is clicked’ that triggers when this layer is clicked and you could access the properties in the workflow via the Map’s exposed state

I’ve been toying around with this and I was able to console log the name of US states and their densities based on a click:

Mapbox Example

Let me know what you think of this approach. I think it would be possible, but I can’t guarantee it. Would be interested to hear if you can think of any other possible approaches :slight_smile:

Yep, I should be able to add this within the next week or so if needed.

Hi @alexcooney5 , thank you so much for your reply. If you release a new “when layer is clicked” feature it would be really awesome ! It solves my use case but it will be also a unique feature in the Bubble maps plugin marketplace. Looking forward to hear some good news :slightly_smiling_face:

1 Like

Hi @alexcooney5,

This plugin looks like it may be a great fit for a new project I’m working on.

One question I had was whether it’s possible to modify the line styling to reflect different types of information on a map. For example: I’d like to show my users if there are any street closures within a few blocks of the address they plug into a location search box (the street closures are structured in geojson as polylines with sets of geographic coordinates). Some of those closures are current, while other are scheduled to occur on dates that are weeks or even months in the future. I’d like to color-code the lines representing those closures on the map, so that users can easily distinguish between current and future closures.

Thanks so much for your guidance!

Thanks @stefanof! It will likely be a few weeks before I get to this, but will keep you updated on progress :slight_smile:

Hi @josh50, thanks for your interest in our plugin!

I’m afraid it’s not currently possible to change the colour of GeoJSON loaded onto the map.

However, I appreciate this would be a useful feature. I’ll add to the list of things to look at, but I can’t promise when or if I’ll get a chance to do so unfortunately.

i’m very interested too by this function : centre lat/long to extract adress

Thanks for the feedback @baxt.be!

There are a few other features I’m looking to add before this, so not sure when I’ll be able to add functionality that lets you get the centre address.

However, you should be able to do this yourself using the Mapbox Geocoding API with the API Connector - see the below post for further details :slight_smile:

Load GeoJSON without letting users draw more shapes - October-24 update
Just released a new version of the Beautiful Maps - Mapbox plugin that lets you load GeoJSON (polygons, lines or points) onto the map without letting users draw additional shapes:

You still need to run the ‘Enable Drawing Mode’ action before loading any shapes (via the GeoJSON action), but you can now effectively disable drawing mode by setting the fields highlighted below to ‘no’:

See the ‘Drawing on a map and saving coordinates’ section of the demo app for full details and a working example.

You could previously set all fields EXCEPT the ‘Enable by Default’ field to no, so this latest update now completely ‘disables’ drawing mode for the end user

Any questions just let me know :slight_smile:

How to change a map marker when hovered (video tutorial) - October-24 update
Released a video tutorial earlier this week that shows how you can change a map marker when it’s hovered by a user.

Any questions just let me know :slight_smile:

1 Like