Can't get resetStyle to work in ngx-leaflet

Question

I'm trying to do something similar in Angular6 with ngx-leaflet as described here: https://leafletjs.com/examples/choropleth/

I can already show the default pop-up and change the style onmouseover, but can't get the resetStyle to work.

I'm loading several GeoJSON-datasets and add them as separate layers using a generic function. With these layers I want to change the style `onmouseover' and reset it 'onmouseout' and when clicked on the feature I want to show a chart in a div on the top-right of my page. Also the click-event is not working in my code.

My generic function to get the GeoJSON data from my backend:

private loadGeoJsonDataSet(path: string, dataset: string, geometryType: string, layerName: string, fitBounds: boolean): void {
  this.mapService.getGeoJson(path, dataset).pipe(first()).subscribe(json => {
    // Create layer and add to map:
    const geoJsonLayer = L.Proj.geoJson(null, {
        // onEachFeature: (feature, layer) => {
        //   layer.bindPopup('<h5> Test:' + feature.properties.gid + '</h5>');
        // },
        onEachFeature: this.onEachFeature.bind(this),
        attribution: 'CloudHydro'
      }
    ).addTo(this.map);

    // Set options:
    switch (geometryType) {
      case 'point': {
        geoJsonLayer.options.style = this.getPointStyle;
        geoJsonLayer.options.pointToLayer = (feature, latlng) => {
          return L.circleMarker(latlng, this.circleMarkerOptions);
        };
        break;
      }
      case 'polyline': {
        geoJsonLayer.options.style = this.getPolylineStyle;
        break;
      }
      case 'polygon': {
        geoJsonLayer.options.style = this.getPolygonStyle;
        break;
      }
      default: {
        geoJsonLayer.options.style = this.getPolygonStyle;
        break;
      }
    }
    // Add data to the layer:
    geoJsonLayer.addData(json);
    // Add layer to the layer control:
    this.layersControl.overlays[layerName] = geoJsonLayer;
    if (fitBounds) {
      this.map.flyToBounds(geoJsonLayer.getBounds());
      this.map.fitBounds(geoJsonLayer.getBounds());
    }
  });
}

My onEachFeature and style functions:

private highlightFeature(e) {
  const layer = e.target; 
  layer.setStyle({
    weight: 3, color: '#333',
  });
  if (!L.Browser.ie && !L.Browser.opera12) {
    layer.bringToFront();
  }
}

private resetHighlight(e) {
  const layer = e.target;
  --> Not working: layer.resetStyle(layer);
}

private clickedOnFeature(feature, layer) {
  --> Not working: console.log('In clickedOnFeature', feature);
}

private onEachFeature(feature, layer) {
  layer.bindPopup('<h5> GID:' + feature.properties.gid + '</h5>');
  layer.on({
    mouseover: this.highlightFeature,
    mouseout: this.resetHighlight,
    click: this.clickedOnFeature(feature, layer)
  });
}

Any help would be really appreciated. Converting the examples from leafletjs.com to Angular+ngx-leaflet would also help novices like me.

Paul Meems Paul Meems · Accepted Answer · 2018-10-12T07:03:37

I found the solution myself:

this.mapService.getGeoJson(path, dataset).pipe(first()).subscribe(json => {
  // Create layer and add to map:
  const geoJsonLayer = L.Proj.geoJson(null, {
      onEachFeature: (feature, layer) => {
        // Create popup with all properties of the layer:
        let popupContent = '<h5>' + layerName + '</h5><p style="width: 100%; line-height: 1.5;">';
        for (const key in feature.properties) {
          popupContent += '<b style="min-width:25%; margin-right: 5px; display: block; float: left;">' + key + '</b>' +
            '<span>' + feature.properties[key] + '</span><br>';
        }
        popupContent += '</p>';
        layer.bindPopup(popupContent, {minWidth: 250, maxWidth: 400});
        layer.on('mouseover', (e) => this.highlightFeature(e));
        layer.on('mouseout', (e) => geoJsonLayer.resetStyle(e.target));
        layer.on('click', () => this.selectedFeature(feature));
      },
      attribution: layerName + ' &copy; CloudHydro'
    }
  ).addTo(this.map);

The trick is to not use a separate function for onEachFeature but make an inline function. Then you have access to the geoJsonLayer object which is needed with resetStyle.

Can't get resetStyle to work in ngx-leaflet

1 Answers