Edit Attributes and geometry of Carto layers from leaflet map

Question

I want to create a webmap application which should be able to update attributes of CARTO layers.

I've Googled it, but the sites I've consulted do not help very much.

https://carto.com/blog/read-and-write-to-cartodb-with-the-leaflet-draw-plugin/

http://duspviz.mit.edu/web-map-workshop/cartodb-data-collection/

What I need basically is to take some attributes of the CARTO layers and be able to edit it.

What I've get is this:

• Get the CARTO tables.
• Get the properties I want.
• Create a input box inside the popup.

What I need now is to submit the data inserted in the input box to the CARTO layer.

I don't know how to reach this.This is the code I'm writing.

var map = L.map('map').setView([41.64087,-0.89802], 13); 

//CAPAS BASE
var capaBase1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 18
        }).addTo(map);

//Funcion PopUp
function onEachFeature(feature, layer) {

    // Create an input
    var input = L.DomUtil.create('input', 'my-input');
    // Set a feature property as value
    input.value = feature.properties.name;
    // Add a listener to watch for change on input
    L.DomEvent.addListener(input, 'change', function () {
        // Input changed, change property value
        feature.properties.name = input.value;
    });
    // Bind popup to layer with input
    layer.bindPopup(input);
}

//CAPAS CARTO

var suc = $.getJSON("https://luismi.carto.com/api/v2/sql?format=GEOJSON&q=SELECT * FROM suc_zgz", function(data) {geojson = L.geoJson(data, {
    onEachFeature:onEachFeature

}).addTo(map)});
var crs = $.getJSON("https://luismi.carto.com/api/v2/sql?format=GEOJSON&q=SELECT * FROM cr_s", function(data) {geojson = L.geoJson(data, {
    onEachFeature:onEachFeature,
    pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, geojsonMarkerOptions);}
}).addTo(map)});    

//ESTILOS
    //puntos
var geojsonMarkerOptions = {
    radius: 6,
    fillColor: "red",
    color: "#fff",
    weight: 1,
    opacity: 1,
    fillOpacity: 1
  };

Answer 1

Why the blog post does not help? It explains how to create a procedure to make modifications on your tables and your request is even easier. In the end you need to create a procedure with the security definer, grant the public user and then use it with SQL API from your front end code.