I have a Google Maps API integration and am using map box component.
I want the Mapbox component to display all of the addresses in my database as points.
My Google resource query only allows me to return strings and not arrays. I can put in a shed load of strings and script them out as points like this:
but this is very time consuming and the code will continually have to be updated every time there is a new piece of data added to the data base.
Is there a way of getting an array in the Google Maps resource?
This seems to be the hold up as the following only seems to return the first value in the database:
Hey @thomasatkinson!
Can you try the following?
{{ SelectAddress.dataArray['0'].Address.join('\n') }}
That should take every address in your array and combine it into one string separated by newline characters which is what it looks like you're doing manually at the moment.
(Note: you can replace \n with any string see the docs here!)
Thanks @Kabirdas that works, Thanks! But then how do I get this list of longitude and latitudes to appear as points in the map using the 'Points' too in the mapbox map?
Hmm... not sure what endpoint you're hitting here - is it maps/api/geocode/json?
If that happens to be the case then I think your query result would be structured something like this:
In which case the following should work:
{{GoogleMapsAPI.data.results.map(result => ({latitude: result.geometry.location.lat, longitude: result.geometry.location.lng}))}}
It maps over the result array to extract the lat and lng properties of the result objects and creates a new {latitude, longitude} object for each one:
If your data is structured differently would you mind posting its structure?
Thanks, that works too. But I hadn't bargained for the disconnect between this any my retool table. I want the map to show the points on my table. The data pulled from the database is an address and this goes into the table but the map is now independent of the retool table even though they're working from the same data.
I have now added two columns to the retool table (lat and lng) and rendered the address column as lat and lng columns.
I now just need to write these as Points in the 'Points' field of the mapbox component but, again, can only render the first row...any final advice @Kabirdas ?
You can try something like:
{{formatDataAsArray(table1.columnMappers).map(row => ({latitude: row['Custom Column 1'], longitude: row['Custom Column 2']}))}}
The fromatDataAsArray will convert table1.columnMappers into an array of objects (instead of an object of arrays) which is what the field expects. From there it's just a matter of changing the keys in each object which is possible by using .map again.
Does that work?
Thanks, almost there but not quite.
The coordinates appear in my table in the wrong order. The Query orders the data by Address, the API spits out the coordinates in the correct order but they don't appear in the table in the right order. Is this because I am using: {{GoogleMapsAPI.data.results[i].geometry.location.lat}} in the custom columns? If so, is there a way to fix this?
Might have to just manually enter the longitude and latitude at point of data collection but would rather not have to do this.
I would expect the table order to match the order of the data that gets passed to it regardless of how you have your custom columns set. Are you transforming the data at all between when you get it from the query and when it gets passed to the table? Could you also share your table settings so we can check if there might be any sorting going on there?
