'How to migrate Leaflet map from Tabletop to Papa Parse keeping the same settings?

I am a geographer with no academic training in programming. I still managed to create a webmap during 2019, learning from GitHub and Stack Overflow. Unfortunately it doesn't work anymore because Tabletop had problems and I need to migrate my code to Papa Parse to request information from Google spreadsheets. I have not found an example similar to my code, since it has layer selectors, loops, among others. I will be very grateful for your help.

Here the code using Tabletop:

    var sheetsUrlPuntos ="https://docs.google.com/spreadsheets/d/1ivSOvLzHI8z7hG0KqPcmTdHr2kJ7iZ2S3md-ruGHDMQ/edit#gid=0"

function init() {
    Tabletop.init({
        key: sheetsUrlPuntos,
        debug: true,
        callback: addPoints,
        simpleSheet: true
    })
}

function addPoints (data, tabletop) {
    
    var points = {
    "type": "FeatureCollection",
    "features": []
    }
    
    for (var row in data){
        
        var coords = JSON.parse(data[row].geometry);
        points.features.push({
            "type": "Feature",
            "geometry": {
                "type": "MultiPoint",
                "coordinates": coords
            },
            "properties": {
                "Nombre": data[row].nombre,
                "Categoria": data[row].categoria,
                "Subcategoria": data[row].subcategoria,
                "Descripcion": data[row].descripcion,
                "Institucionejecutora": data[row].institucionejecutora,
                "ProgramaoFondo": data[row].programaofondo,
                "Estado": data[row].estado,
                "Fechainicio": data[row].fechainicio,
                "Fechatermino": data[row].fechatermino,
                "Beneficiarios": data[row].beneficiarios,
                "Direccion": data[row].direccion,
                "Foto": data[row].foto,
                "Hipervinculo": data[row].hipervinculo
            }
        });
                
        PointMarkers = L.geoJSON(points, {
            pointToLayer: function (Feature, coords){
                switch (Feature.properties.Categoria){
                    case "Plan Maestro Plades": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8,                      
                        fillColor: "#d76780",
                        pane: "PointsPane"});
                    case "Gestión local y barrios": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#50a6b7",
                        pane: "PointsPane"});
                    case "Proyectos convenio municipal 2019-2020": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#dbc85e",
                        pane: "PointsPane"});
                    case "Centro Plades": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#9bbe6b",
                        pane: "PointsPane"});
                    case "Municipalidad": return L.circleMarker (coords, {
                        color: "#1f140f", 
                        weight: 1,
                        radius: 8, 
                        fillColor: "#ff9f71",
                        pane: "PointsPane"});
                    case "Los Lagos": return L.circleMarker (coords, {
                        color: "#da597a",
                        weight: 1,
                        radius: 8,
                        fillColor: "#da597a",
                        pane: "PointsPane"});
                }
            },  
            onEachFeature: function (Feature, layer) {
                layer.bindPopup("<b>"+Feature.properties.Nombre+"</b>");
                layer.on({click: openSidebar});
                function openSidebar(e){
                    sidebar.show();
                    {sidebar.setContent("<h3>"+"<a href="+Feature.properties.Hipervinculo+" target=_blank>"+Feature.properties.Nombre+"</a></h3>"+"<img src = "+Feature.properties.Foto+" width=100%>"+"<p>"+Feature.properties.Descripcion+"</p>"+"<ul>"+"<li><b>Instituci&oacute;n ejecutora:&nbsp;</b>"+Feature.properties.Institucionejecutora+"</li>"+"<li><b>Programa o Fondo:&nbsp;</b>"+Feature.properties.ProgramaoFondo+"</li>"+"<li><b>Estado:&nbsp;</b>"+Feature.properties.Estado+"</li>"+"<li><b>Fecha inicio:&nbsp;</b>"+Feature.properties.Fechainicio+"</li>"+"<li><b>Fecha t&eacute;rmino:&nbsp;</b>"+Feature.properties.Fechatermino+"</li>"+"<li><b>Beneficiarios:&nbsp;</b>"+Feature.properties.Beneficiarios+"</li>"+"<li><b>Direcci&oacute;n:&nbsp;</b>"+Feature.properties.Direccion+"</li>"+"</ul>")
                    }
                };      
                switch (Feature.properties.Subcategoria){
                    case "Vialidad y transporte": return vyt.addLayer(layer);
                    case "Áreas verdes": return av.addLayer(layer);
                    case "Equipamiento social y centro cívico": return eqycc.addLayer(layer);
                    case "Recuperación de barrios": return recbar.addLayer(layer);
                    case "Gestión local y barrios": return glybar.addLayer(layer);
                    case "Proyectos convenio municipal 2019-2020": return prymun.addLayer(layer);
                    case "Centro Plades": return ctrpld.addLayer(layer);
                    case "Seguridad pública": return segpub.addLayer(layer);
                    case "Red eléctrica": return redelec.addLayer(layer);
                    case "Soluciones sanitarias": return solsan.addLayer(layer);
                    case "Agua Potable Rural (APR)": return apr.addLayer(layer);
                    case "Fondo de Apoyo a la Educación Pública (FAEP)": return faep.addLayer(layer);
                    case "Fondo Nacional de Desarrollo Regional (FNDR)": return fndr.addLayer(layer);
                    case "Fondo Regional de Iniciativa Local (FRIL)": return fril.addLayer(layer);
                    case "Plan Mejoramiento urbano (PMU)": return pmu.addLayer(layer);
                    case "Terrenos vivienda/municipales": return vivmun.addLayer(layer);
                    case "Posibles proyectos": return posib.addLayer(layer);
                    case "Otros proyectos": return otros.addLayer(layer);
                };
            }
        });     
    }
    console.log(data);  
}

window.addEventListener('DOMContentLoaded', init)

Here the code preview using Papa Parse:

    var sheetsUrlPuntos ="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3YSnHHrUo-V_txtKzIja5bwbUb5SvdrvXdq5RGptkA6pz9MIlZzt6LDd8amkBY5-B8cZAGRgQYs9b/pub?output=csv";

function init() {
    Papa.parse(sheetsUrlPuntos,{
         download: true,
         header: true,
         complete: addPoints
    })
}
     
function addPoints (results) {
    
    var data = results.data

    var points = {
    "type": "FeatureCollection",
    "features": []
    }
    
    for (var row in data){
        
        var coords = JSON.parse(data[row].geometry);
        points.features.push({
            "type": "Feature",
            "geometry": {
                "type": "Mul    tiPoint",
                "coordinates": coords
            },
            "properties": {
                "Nombre": data[row].nombre,
                "Tipo": data[row].tipo,
                "Categoria": data[row].categoria,
                "Descripcion": data[row].descripcion,
                "Institucionejecutora": data[row].institucionejecutora,
                "ProgramaoFondo": data[row].programaofondo,
                "Estado": data[row].estado,
                "Fechainicio": data[row].fechainicio,
                "Fechatermino": data[row].fechatermino,
                "Beneficiarios": data[row].beneficiarios,
                "Direccion": data[row].direccion,
                "Foto": data[row].foto,
                "Hipervinculo": data[row].hipervinculo
            }
        })}
                    
        PointMarkers = L.geoJSON(points, {
            pointToLayer: function (Feature, coords){
                switch (Feature.properties.Tipo){
                    case "Plan Maestro Plades": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8,                      
                        fillColor: "#d76780",
                        pane: "PointsPane"});
                    case "Gestión local y barrios": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#50a6b7",
                        pane: "PointsPane"});
                    case "Proyectos convenio municipal 2019-2020": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#dbc85e",
                        pane: "PointsPane"});
                    case "Centro Plades": return L.circleMarker (coords, {
                        color: "#1f140f",
                        weight: 1,
                        radius: 8, 
                        fillColor: "#9bbe6b",
                        pane: "PointsPane"});
                    case "Municipalidad": return L.circleMarker (coords, {
                        color: "#1f140f", 
                        weight: 1,
                        radius: 8, 
                        fillColor: "#ff9f71",
                        pane: "PointsPane"});
                }
            },  
            onEachFeature: function (Feature, layer) {
                layer.bindPopup("<b>"+Feature.properties.Nombre+"</b>");
                layer.on({click: openSidebar});
                function openSidebar(e){
                    sidebar.show();
                    {sidebar.setContent("<h3>"+"<a href="+Feature.properties.Hipervinculo+" target=_blank>"+Feature.properties.Nombre+"</a></h3>"+"<img src = "+Feature.properties.Foto+" width=100%>"+"<p>"+Feature.properties.Descripcion+"</p>"+"<ul>"+"<li><b>Instituci&oacute;n ejecutora:&nbsp;</b>"+Feature.properties.Institucionejecutora+"</li>"+"<li><b>Programa o Fondo:&nbsp;</b>"+Feature.properties.ProgramaoFondo+"</li>"+"<li><b>Estado:&nbsp;</b>"+Feature.properties.Estado+"</li>"+"<li><b>Fecha inicio:&nbsp;</b>"+Feature.properties.Fechainicio+"</li>"+"<li><b>Fecha t&eacute;rmino:&nbsp;</b>"+Feature.properties.Fechatermino+"</li>"+"<li><b>Beneficiarios:&nbsp;</b>"+Feature.properties.Beneficiarios+"</li>"+"<li><b>Direcci&oacute;n:&nbsp;</b>"+Feature.properties.Direccion+"</li>"+"</ul>")
                    }
                };      
                switch (Feature.properties.Categoria){
                    case "Vialidad y transporte": return vyt.addLayer(layer);
                    case "Áreas verdes": return av.addLayer(layer);
                    case "Equipamiento social y centro cívico": return eqycc.addLayer(layer);
                    case "Recuperación de barrios": return recbar.addLayer(layer);
                    case "Gestión local y barrios": return glybar.addLayer(layer);
                    case "Proyectos convenio municipal 2019-2020": return prymun.addLayer(layer);
                    case "Centro Plades": return ctrpld.addLayer(layer);
                    case "Seguridad pública": return segpub.addLayer(layer);
                    case "Red eléctrica": return redelec.addLayer(layer);
                    case "Soluciones sanitarias": return solsan.addLayer(layer);
                    case "Agua Potable Rural (APR)": return apr.addLayer(layer);
                    case "Fondo de Apoyo a la Educación Pública (FAEP)": return faep.addLayer(layer);
                    case "Fondo Nacional de Desarrollo Regional (FNDR)": return fndr.addLayer(layer);
                    case "Fondo Regional de Iniciativa Local (FRIL)": return fril.addLayer(layer);
                    case "Plan Mejoramiento urbano (PMU)": return pmu.addLayer(layer);
                    case "Terrenos vivienda/municipales": return vivmun.addLayer(layer);
                    case "Posibles proyectos": return posib.addLayer(layer);
                    case "Otros proyectos": return otros.addLayer(layer);
                };
            }
        })
    console.log(data);  
}

window.addEventListener('DOMContentLoaded', init)

The console shows me the following error:

Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

An example of data (image): The green header is the spatial information in GeoJSON format; the turquoise header are information that are used for the layer selector; the yellow header are hypertext information and the orange header are hyperlinks

The spreadsheet link is https://docs.google.com/spreadsheets/d/1ivSOvLzHI8z7hG0KqPcmTdHr2kJ7iZ2S3md-ruGHDMQ/edit#gid=0

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to migrate Leaflet map from Tabletop to Papa Parse keeping the same settings?

Sources

Related Questions