0

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
  };
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.

  • Hi Jorge, where should I write the security definer function? And then, I should change the fields I want to update, right? After that, I think I should write the persistOnCartoDB function inside the function triggered in the addListener function, rigth? Thanks a lot for your reply!! ^^ – Luismi Nov 25 '16 at 12:20
  • You can write the function on the SQL panel of CARTO web interface or using directly the SQL API. You need to code the SQL function that updates or modifies your tables. Once you can call it via SQL API you can pass to code the frontend part, yes. – Jorge Sanz Nov 25 '16 at 14:25

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.