1

How would I add several properties into a set of leaflet LineStrings from google spreadsheet via Tabletop?

I've created LineStrings from the google spreadsheet linked above and need to add the data from columns B-D into the properties of the json using the key IDs in column A, which match the IDs in the JSON string in the geometry column. I've tried a loop (and several others) that I thought would add the data into a new properties field, but it doesn't work.

I believe the issue surrounds the following:

var values = data.toArray;// thought this would grab the data improvementsHeaders = ["code", "include", "summary"]; for (var j = 0; j < improvementsHeaders.length; j++) { featureCollection.properties[improvementsHeaders[j]] = values[row][improvementsHeaders.indexOf(improvementsHeaders[j])]; };

The current script is throwing flag, Uncaught TypeError: Cannot read property '51' of undefined Uncaught TypeError: Cannot read property '4' of undefined, which suggests there's something wrong with interplay between headers and the indexing loop.

var polygonLayer;
var pointGroupLayer;

function addPolygons(data) {
  if (polygonLayer != null) {
    polygonLayer.remove()
  }

  var featureCollection = '{"type":"FeatureCollection", "features":[';
  var delim = '';

  for (var row in data) {
    featureCollection = delim + featureCollection + data[row].geometry + ',';
    delim = '';
  }

featureCollection = featureCollection.substring(0, featureCollection.length - 1);
featureCollection = featureCollection + ']}'



var values = data.toArray;// thought this would grab the data
improvementsHeaders = ["code", "include", "summary"];
for (var j = 0; j < improvementsHeaders.length; j++) {
        featureCollection.properties[improvementsHeaders[j]] = values[row][improvementsHeaders.indexOf(improvementsHeaders[j])];
      };
//index through retrieved data and attach to features 


  var geojsonStates = JSON.parse(featureCollection);

  var polygonStyle = {"color": "#2ca25f", "fillColor": "#99d8c9", "weight": 3};
  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);
        }
      });
    },
    style: polygonStyle,
  }).addTo(map);
}
  • It's not clear from your decription and code what you want to achieve. What are 'preceding columns'? Where should value of i come from in statement featureCollection.properties[improvementsHeaders[j]] = featureCollection[i][improvementsHeaders.indexOf(improvementsHeaders[j])];? What is statement var values = data[row]; doing? – TomazicM Sep 1 at 10:17
  • I've updated those two lines to include an indexing loops that I thought might work, but still no avail. I thought values = data would grab the information from the google sheet for use, but that doesn't seem to be the case. – bikingman Sep 1 at 12:34
  • Are these additional columns in the same spredsheet as features and so could be read at the same time as features themselves? – TomazicM Sep 1 at 14:59
  • Perhaps, but since the geometry column is already formatted as JSON, I"m not sure how to inject them into the string.. – bikingman Sep 1 at 15:15
1

Answer below is based on my answer to your previous question Reading JSON features from a Google spreadsheet using Tabletop into Leaflet web map?, I'm just adding code to read additional properties from spreadsheet columns to feature properties:

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

var addProp = ['code', 'include', 'summary'];

function showInfo(data, tabletop) {
  var feature;
  for (var row in data) {
    feature = JSON.parse(data[row].geometry);
    for (var i = 0; i < addProp.length; i++) {
      feature.properties[addProp[i]] = data[row][addProp[i]];
    }
    featureCollection.features.push(feature);
  }
  featureLayer = L.geoJSON(featureCollection).addTo(map);
  map.fitBounds(featureLayer.getBounds());
}

window.addEventListener('DOMContentLoaded', init)

Remark: This is not GIS question really, it's pure Java Script, it belongs more to https://stackoverflow.com/ site.

  • This works beautifully. Thank you so much! It looks like to me that the function doesn't match columns to the JSON in the geometry column by ID, but instead matches by row as the features are fed into the JSON.. – bikingman Sep 1 at 20:38
  • Yes, you are right. – TomazicM Sep 2 at 8:34

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.