Just want to ask about Map Element Features

[Chan]

I am trying to build a web app where it uses Airtable Data that connects to a Map, where I can see bunch of location or markers generated from Airtable that I configured on a map.

The question - First, does the map element have features or I could possibly display a multiple data (like basic information of a person or appointment) when clicking the marker? Second, does it have a features or ways that I could implement a filter for markers that displayed on a Map? For example you can filter by assigned users by clicking the name or filter by cities, it could be a button or text. Lastly, I am not sure if the map has group pin on markers.

Any help from you guys would be appreciated. Thank you.

[Joyce]

Hi @Chan

@Chan

First, does the map element have features or I could possibly display a multiple data (like basic information of a person or appointment) when clicking the marker?

Yes, you can setup custom markers to display whatever data you want when the user clicks on them.

@Chan

Second, does it have a features or ways that I could implement a filter for markers that displayed on a Map? For example you can filter by assigned users by clicking the name or filter by cities, it could be a button or text

For example if you clicked on a button that said “Texas”, only markers in Texas would remain on the map? Yes, that’s possible.

@Chan

Lastly, I am not sure if the map has group pin on markers.

What do you mean by this? Could you share an example of a map you’d like to be able to reproduce in WeWeb?

[Chan]

Hello @Joyce

I really appreciate your response and thank you. Below is my response.

@Joyce

Yes, you can setup custom markers to display whatever data you want when the user clicks on them.

I actually tried that one using the data pulled from Airtable Database. But unfortunately I wasn’t able to get/show multiple data that I wanted, only the names that I could get. Please see the image below.

@Joyce

For example if you clicked on a button that said “Texas”, only markers in Texas would remain on the map? Yes, that’s possible.

That’s great news. I actually want to implement that but when I tried I couldn’t see that option or features on map configuration. Can you please give me a relevant documentation or any similar samples that I could look for?

@Joyce

What do you mean by this? Could you share an example of a map you’d like to be able to reproduce in WeWeb?

like this - Imgur: The magic of the Internet

[Chan]

Hi @Joyce

Just wondering if you have a chance to review my replies about those features. Your response will be greatly appreciated. Thank you!

[thisismetrying]

Hello. I’m having the same problem. I want to show more data and customize the marker tooltip. Did you find a solution? Thank you!

Edit: I found a way where you could put HTML code on “name” field. But if there’s a no code way, please let me know!

[jptrinh]

Hi @thisismetrying @Chan
One way to display any content that you want in the marker content is to create a custom one

Custom marker content

1. Create an object variable currentMarker
2. Create a new workflow on the map instance. Select the On marker click
3. In that workflow, you have access to the Event content that contains the rawData (all information retrieved from your source) and the domEvent that indicate where the marker is positionned. You can affect the whole Event object to your variable.
4. Create a card, located in the same container as the map instance. Give it a position absolute and bind the Left an Top position respectively to the x and y value of the domEvent of your currentMarker variable.
5. Add content to your card, and bind any content that you want.

PS: That can create unwanted behavior like when the user moves the map or on screen resize. Might be a way to fix that.

If you still strungle with that, I can put out a step-by-step video to show you how to do this

Marker clusters
I think its possible. But would require some custom code to add parameter to your map instances.
Google maps clusters doc
Mapbox clusters doc

Filtering markers
To do this one, you can add a filter to your list bound to the property you want.

Hope that helps

[thisismetrying]

Thanks for the very detailed response!
This is much appreciated

If you don’t mind, do you know how can I zoom to the marker after I click some text for example?

Use case: I have listings of places on the left side and when I click the place item, I want it to zoom to the marker on the map.

[jptrinh]

If you are not restricted to using Google Map, I would recommend using the Mapbox integration which is easier to play with.
With it you can access the instance and use mapbox methods.
And to achieve a zoom to a location, you could use the flyTo combined with a zoomTo.
You can use those functions with custom code by targeting the instance

[thisismetrying]

Thank you for this! I’ll check it out

[Chan]

@jptrinh

Hi @thisismetrying @Chan
One way to display any content that you want in the marker content is to create a custom one

Custom marker content

1. Create an object variable currentMarker
2. Create a new workflow on the map instance. Select the On marker click
3. In that workflow, you have access to the Event content that contains the rawData (all information retrieved from your source) and the domEvent that indicate where the marker is positionned. You can affect the whole Event object to your variable.
4. Create a card, located in the same container as the map instance. Give it a position absolute and bind the Left an Top position respectively to the x and y value of the domEvent of your currentMarker variable.
5. Add content to your card, and bind any content that you want.

PS: That can create unwanted behavior like when the user moves the map or on screen resize. Might be a way to fix that.

If you still strungle with that, I can put out a step-by-step video to show you how to do this

Marker clusters
I think its possible. But would require some custom code to add parameter to your map instances.
Google maps clusters doc
Mapbox clusters doc

Filtering markers
To do this one, you can add a filter to your list bound to the property you want.

Hope that helps

Hello @jptrinh , Thank you for that response. I appreciate it so much.

I am still having trouble implementing it with Airtable or maybe I missed something. Can you please give us a video on how you do it? Thank you.

[Chan]

@thisismetrying

Hello. I’m having the same problem. I want to show more data and customize the marker tooltip. Did you find a solution? Thank you!

Edit: I found a way where you could put HTML code on “name” field. But if there’s a no code way, please let me know!

Hi @thisismetrying , Unfortunately, I didn’t find any solution and got stuck there.

I tried to put HTML code on “marker name field” but there is no way to put it (can’t edit it).