0

I'm using leaflet to build custom styles for my different map features in Angular.

export class MapComponent  {
    protected _map: Map;           // leaflet map
    public pads: string[] = [];

.
.
.
.

    L.geoJSON(geojsonFeature, {
        onEachFeature: this.onEachFeature,
        style: function (layer, feature, pads) {
            return {color: "#FFF"}
        }

    }).addTo(this._map);

In the style: call, I pass in pads as a parameter, but it's undefined within the function

if I make the function no longer in-line, 

    styler(feature, layer) {
       console.log(this.pads);
    }

Then update the call to:

    L.geoJSON(geojsonFeature, {
        onEachFeature: this.onEachFeature,
        style: this.styler;
        }

    }).addTo(this._map);

I cannot access the this keyword. I'm incredibly confused by the scoping of how all of this is interacting. I need to access my pads array from either an inline or outside function.

John L.
  • 75
  • 1
  • 8
  • *"I pass in pads as a parameter"* No you are not. You are *defining* that the function has a third parameter called `pads`. But you are *not calling* the function at that moment, and I doubt that it's you who calls the function, so you cannot *pass* any additional arguments to it. – Felix Kling Sep 18 '17 at 18:02
  • Makes sense. I am not calling this function. What are my options for accessing this variable? – John L. Sep 18 '17 at 18:02
  • See the duplicate. The short answer is: `style: this.styler.bind(this)`. – Felix Kling Sep 18 '17 at 18:07
  • Informative post, thanks. This is working. – John L. Sep 18 '17 at 18:10

0 Answers0