Show attributes of features selected in a Mapbox component

App Building
1

Hi guys,

I have a Mapbox component with features whose location (Long/Lat) and attributes are in a table component in the same application.

I want to see the attributes of the feature I click (or hover over) shown in a dialog box or a similar visual.

Is there an example/documentation for me to follow?

Thank you.
Aussie

2

Hello, are you find something like this? when mouse hover the point it will show some notifictaion such as latitude, longitude? Here I write a app for you refer, pls import it to you app and check the detail.
image

4db05b8b-b837-4675-847d-e1832f09d4fb.json (16.6 KB)

You can import json to your app from here.

image

Here are some extra docs for you dig in.

http://community.retool.com/t/use-mapbox-component-to-generate-locations/7472

http://community.retool.com/t/geo-series-part-1-google-maps-driving-directions-mapbox/6405
here is some docs, pls check if ok

3

Hi AnsonHwang

Thank you for the links, unfortunately I could not find in them an example of what I am looking for.

Thanks for the example you sent, using Notifications. I built a simple JS Code to show a 'Hello there' when a point on the map is selected. The OnPointSelected action is not firing the JS. The JS Code itself works; I can see the notification when I do a 'Run' or 'Preview' on the JS directly.

Any guidance on why the Mapbox not firing the JS upon selecting a point will be greatly appreciated.

Cheers
Aussie

Map Trigger not firing
Map Trigger not firing1439×392 39.2 KB

4

Hello, Here is my app json. It work well in onPointSelected.
4db05b8b-b837-4675-847d-e1832f09d4fb (2).json (15.2 KB)

Could you offer your sample app for me to debug?

5

Thank you.

I got to the root of the problem, but not sure how to solve it.

The Mapbox map is not reacting to the mouse when the mouse hovers over, or clicks a point (I can detect that from watching the debug tool at bottom right hand corner in Edit mode).

I would appreciate any headsup about where I should be looking for what is causing this non-reactivity.

Cheers
Aussie

6

Hello again,
The points I have on the map are generated on the fly via a transformer.

The transformer generates a GeoJSON from data in a table which has lat/long coordinates.

My Application thus uses the GeoJSON box rather than the Points box to render points on the map.

So I do not have points in the 'Points' box because I may have tens of thousands of points.

When I placed a tentative point in the 'Points' box, mapbox component reacts correctly to the mouse selections/hovers. But not the points generated by the transormer that are sitting next to the selectable point.

So it appears to me that the Mapbox component will respond to selection of points (or hovering over them) in the map only if the points were specified in the 'Points' box.

Now, is that a limitation of the Mapbox component, a bug or am I missing something?

Thank you.

Aussie

7

Hi @Aussie,

I believe that is a limitation of the component :thinking:

You could try creating your own custom React component if you need extended functionality

When you mention that you don't have points in the 'Points' box because you may have tens of thousands of points, I'm curious if you already tried passing the transformer points to this field? Did the component crash? Is there a formatting issue? I tested this with 8k objects in the Points array & it did show them all on the map (although it wasn't the most performant!)

8

Hi Tess

Thank you for your reply. With respect to the 'Points' box the reason was performance, as you have indicated.

Thanks for the heads up re the React Custom component, I will try that presently.

Cheers
Aussie