Linking map selection with table selection

I have a simple table derived from a Google Sheet that when a row is clicked on, the map will adjust to center on the selected point in the map.

Question 1: Is there a way to make the row in the table be selected when the corresponding point is clicked on on the map itself?

Question 2: How would you change the color of the marker when the point is selected in the table? All the markers remain the same shade of red. When I select a marker itself on the map it will turn a darker shade of red. I'd like that to happen as well when clicking on the table.

Thanks much!

1 Like

Hey @NightTimeNoche :wave:

  1. You can run a query on point select that checks what index in the table has that lat/long, then run selectRow(index).

2. How are you currently selecting markers on the map when clicking the table? If they are selected they should be that darker shade of red. Here is an example where I run a query on row click that triggers the two methods in our docs (linked here): selectPoint and setMapCenter

Thanks much for the reply @lauren.gus. Do you have screenshots of what the queries look like? Thanks!

These queries will depend on your data:

  1. If your data is an array, you could use the findIndex method, for example. Here is a link to other array methods and data conversion in our docs for reference as well!
  2. Due to how I structured my data, I needed to remove the first column, so that is what I am doing in the first line of this particular query. The other two are simply calling the methods in our docs that I mentioned :+1:

I do have my data as an array, but still am not having any luck. Do you have a screenshot example utilizing the findIndex method? Thanks much for your time with this, much appreciated!

Hello @NightTimeNoche :wave: Lauren's on her day off of Support so I'm filling in here

1) For selecting the table row via the select point event handler:

And the setRow query uses findIndex() to compare the map's data point, and determine which row in the table is the same data point

table1.selectRow(table1.data.findIndex(x => _.isEqual(x, map.selectedPoint)))



2) For selecting the map point via the select row event handler:

These two functions (turns out) will require that you use latitude and longitude on your points' data field names

So, if you are using other names, you'll still need to supply the required fields. Here's what that would look like if your dataset used "lat" and "long"
(replacing the Run script from earlier with it refactored to a query for readability)

map1.selectPoint( {latitude: table1.selectedRow.data.lat, longitude: table1.selectedRow.data.long, ...table1.selectedRow.data} )

The key here is that both my table and map are pulling from the same data source and thus share the same field names. Can you let me know what dataset structures your datasets are if you run into any trouble?

The table's data source query is the same as that of the map's data source query. (Though not a requirement)

Greetings Amanda,

That all worked brilliantly, thanks so much for your time on this, super helpful!

Hi @NightTimeNoche how did you get the coordinates in your table to feature as points on the map?

In the Points input box I refer to the table which is named "table1" as {{table1.data}}. Screenshot is below:

Screen Shot 2022-12-05 at 12.35.49 PM

Hi @Amanda I'm getting the following error

using your setRow query.

could this be because I have multiple columns that have nothing to do with coordinates in my table?

Any advice?