React-leaflet how to resetStyle

Question

I'm following Leaflet's Choropleth tutorial
http://leafletjs.com/examples/choropleth.html and using react-leaflet. I managed to setStyle without any modification from the original source code and it works.

highlightFeature(e) {
  var layer = e.target;

  layer.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
  });
}

The layer has a setStyle property. Now to resetStyle that I'm having propblems.

I tried to access it with

resetHighlight(e) { this.refs.geojson.resetStyle(e.target); }

while having GeoJson

    <GeoJson
        ref="geojson"
        data={this.state.data}
        style={this.getStyle.bind(this)}
        onEachFeature={this.onEachFeature.bind(this)}
      />

but it it doesn't have resetStyle property

Anyone can suggest another way of resetting the style in react-leaflet ?

Fi

Answer 1

The solution was to access the leafletElement of geojson which has resetStyle

resetHighlight(e) {
    this.refs.geojson.leafletElement.resetStyle(e.target);
}

Fi

Is there a similar solution for accessing this.refs for function components? – Dittman

@AdityaAnand On your functional component define const geoJsonRef = useRef();, then define your GeoJSON component with onEachFeature, like that <GeoJSON data={dumpData} style={dumpStyle} onEachFeature={onEachFeature} ref={geoJsonRef} />. Then on your resetStyle function (called by onEachFeature) do geoJsonRef.current.leafletElement.resetStyle(e.target); – Interpolate

@Interpolate For React Leaflet v3.0.5, you can simply do geoJsonRef.current.resetStyle(e.target);. – Tantrum

Answer 2

react-leaflet-choropleth is a way to handle choropleth if you are not wanting to write it from scratch. It is based off of the leaflet-choropleth plugin

import Choropleth from 'react-leaflet-choropleth'
import { Map } from 'react-leaflet'

const style = {
    fillColor: '#F28F3B', //default color filll
    weight: 2, //normal styling
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.5
}

const map = (geojson) => (
  <Map>
    <Choropleth
      data={{type: 'FeatureCollection', features: geojson}  /*feature collection or array*/}
      valueProperty={(feature) => feature.properties.value  /*value for choropleth*/}
      visible={(feature) => feature.id !== active.id        /*use choropleth color?*/}
      scale={['#b3cde0', '#011f4b']                         /*color range*/}
      steps={7                                              /*how many different colors to use?*/}
      mode={'e'                                             /*use equadistance mode, others include kmeans and quantile*/}
      style={style}
      onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.label)}
      ref={(el) => this.choropleth = el.leafletElement      /*get the geojson's layer container*/}
    />
  </Map>
)
ReactDom.render(<map geojson={...} />, document.body)

Chaise