2

Im trying to create a webmap based on Leaflet - google spreedsheets example

I have a a "group" layer with three diferent group names.

I have added some easy buttons to click the layers on and off, but I have only been able to make it work on the entire "group" layer.

My buttons:

var buttons = {
  Agriculture: L.easyButton({
    position: 'topright',
    states: [{
      stateName: 'add-markers',
      icon: '<img alt="do this" src="http://www.freeiconspng.com/uploads/orange-agriculture-icon-png-0.png" height="40" width="40" align="left" style="opacity:0.4 "/><span id="text" class="btn--text"><font color="black"><b>Agriculturee</b></font></span>',
      title: 'add random markers',
      onClick: function(control) {
        map.addLayer(group);
        control.state('remove-markers');
      }
    }, {
      icon: '<img alt="do this" src="http://www.freeiconspng.com/uploads/orange-agriculture-icon-png-0.png" height="40" width="40" align="left"/><span id="text" class="btn--text"><font color="black"><b>Agriculturee</b></font></span>',
      stateName: 'remove-markers',
      onClick: function(control) {
        map.removeLayer(group);
        control.state('add-markers');
      },
      title: 'remove markers'
    }]
  }),

so im using map.addlayer, but it should more be something like map.addlayer(group.Transportationhub)

what function should a add to my code or how should a define each of the names in the group as individual layers?

"Group" is defined as:

var group = L.featureGroup(markerArray);

The icons are styled different based on the values in the spreedsheet:

  function determineLayers(points) {
    var layerNamesFromSpreadsheet = [];
    var layers = {};
    for (var i in points) {
      var pointLayerNameFromSpreadsheet = points[i].Group;
      if (layerNamesFromSpreadsheet.indexOf(pointLayerNameFromSpreadsheet) === -1) {
        markerColors.push(
          points[i]['Marker Icon'].indexOf('.') > 0
          ? points[i]['Marker Icon']
          : points[i]['Marker Color']
        );
        layerNamesFromSpreadsheet.push(pointLayerNameFromSpreadsheet);
      }
    }

Log.console(layerNamesFromSpreadsheet) : enter image description here

I have successfully used the easy buttons before with different filters based on the GeoJson, but this is different when the data is from spreedsheets.

Any simple funcktion a can use to seperate all the different names in the group?

  • After reading this, I'm not clear on where exactly you need help. Can you edit this question to indicate what exactly you need, and what is currently happening? – Devdatta Tengshe Jul 3 '18 at 5:49
  • Hi, I need my buttons to turn on and off each layer in the gogle spreedsheet. The layers are grouped by the "group" column. So in the above a only want "group" to contain of transporttationhub. I asked another question that is related to my issue: gis.stackexchange.com/questions/288256/… – student Jul 3 '18 at 6:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.