Mapbox, Please Help!

[patopt]

I’m trying to make a custom popup in Mapbox where when someone clicks on a mapped point it shows more than just one item, I’d like to show user picture, additional data, etc. For example:

I know that I must do this with custom Javascript to map points in mapbox based on some feedback I’ve received on another thread The Biggest Headaches I'm Dealing With - #4 by patopt

To get started I am just trying to make basic point mapping work, I’m referencing this guide from Mapbox which shows two fixed points being mapped to keep this as simple as possible: Add a default marker to a web map | Mapbox GL JS | Mapbox

I have Mapbox plugin initiated on my page:

And I’m using Javascript to try and map the two basic points from the Mapbox documentation:

However as you can see in the WeWeb editor I am seeing: ReferenceError: mapboxgl is not defined

I’ve also tried to publish the page as I’ve seen some wonkiness running JS directly in the WeWeb editor, but the points still don’t map and I’m seeing some errors in the console:

Does anyone have any idea what I’m doing wrong here? I’ve been stuck on this far too long and really need to make some progress on this. I would really appreciate any help anyone could provide.

[jaredgibb]

You don’t have access to the mapbox instance via code as far as I know.

You could however, create an on click event to show a div with the item info on click and position the visual display near the click event x,y

[patopt]

Thanks. Do you have any example of how this would be done?

[patopt]

@Joyce I have a ticket open for this, is there any way you all can help?

[Joyce]

Hi @patopt

I can rope in @Alexis who might be able to help because he worked on the Mapbox plugin

[patopt]

@Alexis Can you please take a look at my post and provide some direction? It would be really helpful to have some examples of passing customized data into mapbox to build this out.

[Alexis]

Hi, sorry it took so long to handle your post!

So, here you don’t need to use javascript. You can bind an array or a collection, where every item contained is a marker, then you will be asked to choose which item property is the lat/long, which item property is the name, which property to use as a color etc.

Exemple =>

[
  {name: 'myCity1', lat: 55.608166, long: 12.65147, color: 'black'},
  {name: 'myCity2', lat: 55.70651, long: 554729, color: 'blue'}
]

Edit: Sorry I misunderstood, if you want a custom popup be aware you can put an html element inside content instead of a text.

We will release a new update so you can access the x/y position of the cursor on marker click and position a custom popup in absolute position instead. It should be live Monday.

[patopt]

Thanks Alexis, I will play around with this some this weekend. Honestly the MOST helpful thing you could do would be to change the Market Content to not associate to a single item, and to be a formula someone could build. This way someone could either write in custom HTML, could combine multiple items together, etc. Right now only being able to bind one thing really restricts what you can do with this.

[Alexis]

You’re absolutely right, its a frustrating limitation and we will take care of removing it, not only for the mapbox element but for every element where you have to select a path, we want to replace them with custom formula, and/or add a new feature to transform your data when you bind your list

[patopt]

Thank you! Yeah I know that the Google Maps plugin also has this same limitation on the marker data, but yes you are right, anywhere you select a path it should be the formula component so that you can build what you need.

Do you know how long it’s going to take to at least make this change to the mapbox component?

[patopt]

@Alexis I have another question was well, it looks like the popup element is fixed to 240px

What would be the way to modify the max width in weweb? If I manually edit in the CSS I can do this, however don’t see a way to overwrite this in weweb

Example where I change it to Auto

[patopt]

HI @Alexis just wanted to bump this back to the top of your inbox after the weekend.

[Alexis]

Hi, I implemented several improvements today. We will try to release them tomorrow morning (CET).

You will be able to get the x/y position from a marker click to position a custom modal. But if you want to stay on the native popup you will be able to configure the max width and others couple of options like removing the default close button.

For the path issue we dont have a clear roadmap yet sorry but its really an important subject for us. In fact we already developed the feature but was unable to release it and now we have to rework it a little before its ready again.

[patopt]

Thanks Alexis, will be excited to try that out. Yes the path issue is a big one, but it would unleash quite a bit more potential on the platform which we will hopefully see soon.

Could you take a look at my question around the popup styling? Right now you are currently fixing the popup to 240px rather than auto or to let the user adjust it. I tried overriding through CSS but all approaches failed since it’s being set in the div itself. Could you change that to auto by chance?

What would be the way to modify the max width in weweb? If I manually edit in the CSS I can do this, however don’t see a way to overwrite this in weweb

Example where I change it to Auto

[Alexis]

As I said in my previous message we will let you configure the max width yourself through a new option.

[Alexis]

The new version has been released. You can now create your own popup using the x/y position provided by the marker click/mouseenter/mouseleave events (under the domEvent property).

You can also configure the max width you want along side many new options if you prefer continue to use the native popup from mapbox.

We also added a new center component variable so you can get the center when you need it.

Finally, we added two new triggers => On map drag start / On map drag end, so you can react when your user is dragging the map to move inside.

[patopt]

@Alexis You are awesome!!! I have been trying to pull this off for MONTHS and just got it working. I cannot thank you enough. Still have a bunch of work to do, but here you can see the end result I was looking to achieve when mapping people.

If you guys end up changing the binding on the content item to allow someone to combine multiple objects this becomes even easier. Right now I’m just running a javascript loop on the array, which is fine, but that will greatly simplify things even more.

Thank you so much for your help with this!!!

[Alexis]

Looks really great!

In case you consider using another method for the popup here a little video I made to demonstate how to combine our modal element with the new on marker click domEvent position to build a custom popup in WeWeb => Loom | Free Screen & Video Recording Software | Loom

The advantage => You will be able to build a fully custom designed popup as a standard WeWeb element. And you can even do it on hover instead (with the marker mouse enter trigger instead of click)

The drawback => You will have to manage yourself how to position the popup (sometime you will need more calculation if you dont want the popup to be put out of the screen for example but its perfectly doable).

[patopt]

Oh interesting, I never thought of using a modal as the popup, that would actually make this even more powerful, love it.

I did have one follow up question, my ultimate goal is to enable Mapbox Clustering, when I map a bunch of people on a map it gets crowded and to deal with some data points that may have the same lat/long and to be visible.

Create and style clusters | Mapbox GL JS

How do I go about referencing the marker data in sources and layers so that I can enable the clustering features?

[Broberto]

I think @jaredgibb managed to do this? Clustering via some layer.