Null the_geom values in CARTO / Leaflet

Question

I have a CARTO map displayed via Leaflet (specifically via Leaflet within the CARTO.js library) using carto.createlayer().

I simply want to get the_geom values from each marker as they're clicked on. Layer interactivity is set to the_geom but values are being returned as null. I can get the code below to return the values of other columns in my dataset (such as cartodb_id, site_id, etc.), but I don't seem to be able to access the_geom values using data.the_geom.

cartodb.createLayer(map, {
  user_name: 'codemacabre',
  type: 'cartodb',
  sublayers: [{
    sql: 'SELECT * FROM hydrous_sites_geo_map',
    cartocss: '#hydrous_sites_geo_map {marker-fill: #F0F0F0;}',
    interactivity: 'cartodb_id, the_geom'
  }]
})
.addTo(map)
.on('done', function(layer) {
  layer.setInteraction(true);
  layer.on('featureClick', function(e, latlng, pos, data) {
    console.log(data.cartodb_id);
    console.log(data.the_geom); // returns null
  });
});

See the screenshots for the console output (top) and actual dataset values (bottom):

I've read that the_geom can become corrupted when exporting / re-importing (such as in these issues: 1 & 2), but I'm unsure if that's the case here or if the_geom protected somehow or (most likely) if I'm missing something obvious.

Is there a knack to returning the_geom values?

Answer 1

Instead of getting the coordinates from the Leaflet map as explained by @oriolbx, you can first extract the latitude and longitude coordinates from the_geom field using SQL:

  SELECT 
    *,
    st_x(the_geom) as lat,
    st_y(the_geom) as long
  FROM 
    table_name

And then after applying interactivity to your layer, you can show those new fields in a popup:

    cdb.vis.Vis.addInfowindow(
      map, layer, ['lat','long'],
      {
         infowindowTemplate: $('#infowindow_template').html()
      });

Here is a working example.

Answer 2

This example might be useful.

Where the part in which the coordinates are extracted is the next one:

/* Enable mouse events with CartoDB layers */

        // 1- Set CartoDB layer interaction
        layer.setInteraction(true);

        // 2- Custom mouseover event on CartoDB layers
        layer.on('featureOver',function(e,latlng,pos,data){
          lat = (latlng[0]).toFixed(2) // show latitude of clicked point in the console
          lon = (latlng[1]).toFixed(2) // show longitude of clicked point in the console

        // 3- Add coordinates of the selected geometry in the div element 
        //  with id = "box" 
           document.getElementById("lat").innerHTML = lat;
           document.getElementById("lon").innerHTML = lon;
        });