1

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):

console output

dataset values

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?

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.

  • Thank you, @ramiroaznar. To access the extracted the_geom values, I've used your first block of code with data.lat and data.long. I've read that CARTO.js doesn't currently support using viz.json, so haven't used the vis function. – mtlewando Apr 27 '17 at 7:57
-1

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;
        });
  • Unfortunately this doesn't help; the issue is specifically with the_geom, not the marker's position or lat / lng. I want to get the actual values of the_geom from the dataset table, but they're being erroneously returned as null. – mtlewando Apr 18 '17 at 19:23
  • This code returns the coordinates of the mouse, not the marker. So, on a large marker, you get many different points. – JMers Dec 3 '18 at 23:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.