javascript - Reading JSON features from a Google spreadsheet using Tabletop into Leaflet web map?

I'd like to read a table of JSON formatted cells into a Leaflet map using the Tabletop extension of leaflet.

However, my script only reads the first object. Any advice on how to create an array of features that can be visualized? I feel that I need a for loop, but I can't figure out where that should go given my current architecture.

I have a feeling the adjustment needs to be at this point:

  for (var row in data) { 
    var geojsonStates = JSON.parse(data[row].geometry);
  }

Note that I'm building off the good work from Chris Arderne.

function init() {

var polyURL = "https://docs.google.com/spreadsheets/d/1-m5yUoIJph-Kyi7-lnUOL-hAMUxRi2SAepaswd3043Q/edit?usp=sharing";

  Tabletop.init( { key: polyURL,
    callback: addPolygons,
    simpleSheet: true } );
}

window.addEventListener("DOMContentLoaded", init);

var map = L.map("map").setView([40, -100], 4);

var basemap = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png", {
  attribution: '© OpenStreetMap © CartoDB',
  subdomains: "abcd",
  maxZoom: 19
});
basemap.addTo(map);


var sidebar = L.control.sidebar({
  container: 'sidebar',
  closeButton: false,
  position: 'right'
}).addTo(map);

panelID = 'my-info-panel'
var panelContent = {
  id: panelID,                     

  tab: '', 
  pane: '
',       
  title: '
 No state selected
',  
  position: 'top'               
};
sidebar.addPanel(panelContent);

map.on('click', function (feature, layer) {
  sidebar.close(panelID);


});


var polygonLayer;
var pointGroupLayer;


function addPolygons(data) {
  if (polygonLayer != null) {


    polygonLayer.remove()
  }
  var geojsonStates = {
    "type": "FeatureCollection",
    "features": []
  };


  for (var row in data) {


    var geojsonStates = JSON.parse(data[row].geometry);


  }


  var polygonStyle = {"color": "#2ca25f", "fillColor": "#99d8c9", "weight": 1.5};
  var polygonHoverStyle = {"color": "green", "fillColor": "#2ca25f", "weight": 3};

  polygonLayer = L.geoJSON(geojsonStates, {

    onEachFeature: function (feature, layer) {
      layer.on({
        mouseout: function(e) {
          e.target.setStyle(polygonStyle);
        },
        mouseover: function(e) {
          e.target.setStyle(polygonHoverStyle);
        },
        click: function(e) {


          L.DomEvent.stopPropagation(e);

          $('#sidebar-title').text(e.target.feature.properties.name);
          $('#sidebar-content').text(e.target.feature.properties.summary);
          sidebar.open(panelID);
        }
      });
    },
    style: polygonStyle
  }).addTo(map);

}

Answer

Your problem is that you iterate through rows of data without processing them, and so at the end when loop is finished you process only last row.

Taken into account that each of your rows contains one feature, you could in your loop first combine them into feature collection. This way you would process whole collection at once in your L.geoJSON call.

Your loop (simplified for proof of concept) could look something like this (tested):

var featureCollection = {"type":"FeatureCollection", "features":[]};

function init() {
  Tabletop.init( {key: 'https://docs.google.com/spreadsheets/d/1-m5yUoIJph-Kyi7-lnUOL-hAMUxRi2SAepaswd3043Q/edit?usp=sharing',
                  callback: showInfo,

                  simpleSheet: true } )
}

function showInfo(data, tabletop) {
  for (var row in data) {
    featureCollection.features.push(JSON.parse(data[row].geometry));
  }
  featureLayer = L.geoJSON(featureCollection).addTo(map);
  map.fitBounds(featureLayer.getBounds());
}


window.addEventListener('DOMContentLoaded', init);