read data from columns for google maps

read data from columns for google maps

crcucbcrcucb Posts: 72Questions: 23Answers: 0

I am working on the ability to create a map that displays locations from the current datatable. I found the below example but the data isn't being populated.


var mapData = $('#maintable').DataTable().rows().data().map(function (row) { return { latitude: row.Addresses.latitude, longitude: row.Addresses.longitude_column, // Add other relevant data for your map markers/features name: view_Addresses.Full_Address }; }).toArray(); console.log('mapdata=',mapData);

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,889Questions: 1Answers: 10,745 Site admin
    edited August 11

    Assuming the data you load into the table has those properties, that looks like it should give you an array of objects.

    Can you link to a test case showing the issue please?

    Allan

  • crcucbcrcucb Posts: 72Questions: 23Answers: 0

    Thank you, this link should work:
    https://www.jyorkejudge.org/addresses_opentest.php

    The button on the page is called 'map test'
    Below is the current code. It's writing to console.log what, if any, filters are currently applied and the value of the array mapdata.

              {
                   text: 'map test',
                    action: function (e, dt, node, config) {
                            if (  maintable.search()== '') {
                               // Table is not filtered
                               console.log('not filtered ');
                            } else {
                             // Table is filtered
                         
                                 console.log(' filtered ', maintable.search());
                         
                            };
                     
                          var dtable = $('#maintable').DataTable();
                          console.log( 'search builder ',maintable.searchBuilder.getDetails() );
    
    
    
                            var mapData = $('#maintable').DataTable().rows().data().map(function (row) {
                             return {
                                 latitude: row.Addresses.latitude,
                                 longitude: row.Addresses.longitude,
                                // Add other relevant data for your map markers/features
                                name: view_Addresses.Full_Address
                                };
                            }).toArray();
                                       
                            console.log('mapdata=',mapData);
                    }
                },
    
  • kthorngrenkthorngren Posts: 22,237Questions: 26Answers: 5,115
    edited August 11 Answer ✓

    Copying this:

    $('#maintable').DataTable().rows().data().count()
    

    Into the console results in 0 rows returned. Looks like the table id is Addresses not maintable. Use this instead:

    $('#Addresses').DataTable().rows().data().map(function (row) {
                             return {
                                     latitude: row.Addresses.latitude,
                                 longitude: row.Addresses.longitude,
                                // Add other relevant data for your map markers/features
                                name: row.view_Addresses.Full_Address
                                };
                            }).toArray();
    

    Note also you have name: view_Addresses.Full_Address but it should be name: row.view_Addresses.Full_Address - missing row..

    Better might be to use the maintable variable which has an instance of the API, like this:

    maintable.rows().data().map(function (row) {
                             return {
                                     latitude: row.Addresses.latitude,
                                 longitude: row.Addresses.longitude,
                                // Add other relevant data for your map markers/features
                                name: row.view_Addresses.Full_Address
                                };
                            }).toArray();
    

    Paste either of these into the page's console to see they both work.

    Kevin

  • crcucbcrcucb Posts: 72Questions: 23Answers: 0

    thank you.

  • crcucbcrcucb Posts: 72Questions: 23Answers: 0

    I ran into another snap. I am using paging with serverside set to true and the below only returns what is on the visible page:

    var mapData = maintable.rows().data().map(function (row) {
    return {
    lat: row.Addresses.latitude,
    lng: row.Addresses.longitude,
    // Add other relevant data for your map markers/features
    title: row.view_Addresses.Full_Address
    };
    }).toArray();

    I want to return all rows in the datatable, but take into account any filters applied via the global search or search builder. I tried:
    var mapData = maintable.rows({ search: 'applied' }).data().map(function (row) {

    but I get the same results (current page only)

  • allanallan Posts: 64,889Questions: 1Answers: 10,745 Site admin

    serverside set to true

    In this mode, the other rows don't exist on on the client-side. The whole point of server-side processing is that the DataTable only has the rows needed for the current display.

    If you need all of the rows, you'd need to make some kind of call to the server-side to get all of the data, or disable server-side processing.

    Allan

  • crcucbcrcucb Posts: 72Questions: 23Answers: 0

    Okay, I suppose if I do that, I will need to apply any filters that are applied. I was analyzing the what's returned from maintable.searchBuilder.getDetails() and I think it would be a challenge to parse through the array, pass it to the server, take it analyze it and try to apply the filters there.
    Is there a way where I could call the PHP and somehow apply the filters from the dt?

  • kthorngrenkthorngren Posts: 22,237Questions: 26Answers: 5,115
    edited 6:25PM

    One option is to set the page.len() to -1 to fetch all the data from the server to allow Datatables to perform the filtering. Although this negates enabling server side processing in the first place.

    The best option is to gather the filtering info you are interested in and sending it via jQuery Ajax() to the server then have the server script gather the coordinate info to return in the JSON response. In the success function handle the JSON response as appropriate.

    The plugin mentioned in the Buttons SSP FAQ does something similar to allow for server side exporting of the filtered data. You might be able to leverage it and add the searchBuilder.getDetails() details to perform your search. It will need refactoring to fit into your requirements. Or maybe it will help get you started with your own Ajax request parameters.

    Kevin

Sign In or Register to comment.