Leaflet: e.layer doesn't work with L.Marker or esri.featurelayer?

Question

I have a layer of centerpoints derived from polygons via an OnEachFeature event.

The first part of the behavior I'm looking for is for the polygon associated with that centerpoint to change style when clicked upon, which I've been successful at.

var ProjectMap = L.esri.featureLayer ({
      url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
      //making the polygons invisible
      weight: 0,
      fillOpacity: 0,


      onEachFeature: function(feature,layer){
        if (feature.geometry.type = 'Polygon') {

          var bounds = layer.getBounds();
          var center = bounds.getCenter();


          var centerpoints = L.marker(center);
          centerpointlayer.addLayer(centerpoints);


          centerpoints.on('click', function(e) {
            map.fitBounds(bounds);
            layer.setStyle({
              fillOpacity: 0.5,
            });
            info.update(layer.feature.properties);
          });

        };
      }

    }).addTo(map);

The second part of the behavior I want is for any previously clicked polygon to reset its style when a different centerpoint is clicked. I can't get this to work using e.target and e.layer and the GeoJSON resetStyle method, as suggested in many other threads on here.

      [...]

      var selected

      centerpoints.on('click', function(e) {
        if (selected){
          e.target.resetStyle(selected)
        }
        selected = e.layer
        map.fitBounds(bounds);
        selected.setStyle({
          fillOpacity: 0.5,
        });
        info.update(layer.feature.properties);
      });

The console throws back an error at me, at selected.setStyle({ of

'Uncaught TypeError: Cannot read property 'setStyle' of undefined'  at e.<anonymous> ((index):178)
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)

I'm a bit stumped at what's going on with Leaflet here-- is there another way to go about getting the esri.feature.layer to reset back to its default style, then changing the style of the selected centerpoint-polygon combo on click?

score 1 · Answer 1 · answered Aug 16 '17 at 12:57

1

I believe you need to listen to the click event on the layer and not the markers.

centerpointlayer.on('click', function(e) {
    if (selected){
      e.target.resetStyle(selected)
    }
    selected = e.layer
    map.fitBounds(bounds);
    selected.setStyle({
      fillOpacity: 0.5,
    });
    info.update(layer.feature.properties);
  });

answered Aug 16 '17 at 12:57

Joe

80,724
18
127
145

Thank you! That results in no errors being thrown, but also makes the map.FitBounds, info.update, etc... then apply to the markers, when I need it to apply to the polygons in the esri.featurelayer. This gives me an idea or two about creating a global variable or function that could serve as a container for the selected layer in esri.featurelayer that could be called from a click event on centerpointlayer, etc... – GeoJoeK Aug 16 '17 at 14:38

Leaflet: e.layer doesn't work with L.Marker or esri.featurelayer?

1 Answers1