Rendering GeoJSON with react-leaflet

Question

I've got simple component to pick point on map and then display some GeoJSON data related to this point:

import React, { Component } from 'react';

import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import { connect } from 'react-redux';
import './style.css';

import { setPoint, fetchData } from '../../actions/map';

@connect(store => {
  return {
    map: store.map
  }
})
class MyMap extends Component {

  mapClick(e) {
    this.props.dispatch(setPoint(e.latlng));
    this.props.dispatch(fetchData(e.latlng));
  }

  render() {
    const marker = () => {
      if(this.props.map.point) {
        return <Marker position={this.props.map.point} />;
      }
    };

    const data = () => {
        if(this.props.map.data.length > 0) {
            const json = this.props.map.data;
            return <GeoJSON data={json} />
        }
    }

    return (
      <div className='my-map'>
        <div className='my-map__map-container'>
          <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
            {marker()}
            {data()}
          </Map>
        </div>
        <div className='my-map__debug'>
            {JSON.stringify(this.props.map)}
        </div>
      </div>
    );
  }
}

export default MyMap;

First time then I'm clicking on map marker appears and after some delay (XHR request) GeoJSON renders. But next time I'm clicking on map, I've got only changes in marker position, but old GeoJSON data remains on map. Debug part of component renders properly, and showing proper data. How can I force react-leaflet to re-render my GeoJSON data or maybe I'm doing something wrong?

UPD:

After asking author of react-leafet I've found how to reach expected behavior.

To force react to re-render my GeoJSON data I need to pass some data-uniq key to component:

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

Clop

Answer 1

After asking author of react-leafet I've found how to reach expected behavior.

To force react to re-render my GeoJSON data I need to pass some data-uniq key to component:

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

Clop

Any chance you can edit the original post with the full final solution you found? – Nassi

what keyFunction did you use? – Quin

Answer 2

import hash from 'object-hash';

render() {
let blah = this.state; //or this.props or whatever
<GeoJSON
  key={hash(blah)}
  data={blah} />

Training

Answer 3

Having your marker and geojson get called from a function that gets created each time the render method is called is not going to be very performant. Also, I think you may need to add a key to your map elements so they can get reused and updated properly.

Try this out:

render() {

    return (
      <div className='my-map'>
        <div className='my-map__map-container'>
          <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
            {this.props.map.point &&
              <Marker key='my-marker' position={this.props.map.point} />
            }
            {this.props.map.data.length > 0 && 
              <GeoJSON key='my-geojson' data={this.props.map.data.json} />
            }
          </Map>
        </div>
        <div className='my-map__debug'>
            {JSON.stringify(this.props.map)}
        </div>
      </div>
    );
  }

Amitosis

I've rewrote this piece of code as you advised me, but the problem persists - JSON data rendered only once :( – Clop

Answer 4

in new version of react i use below code

import { GeoJSON } from "react-leaflet/GeoJSON";

const [data, setData] = useState(null)

useEffect(() => {
    fetch("/geojson path...")
        .then((res) => {
            return res.json();
        })
        .then((geoJson) => {
            setData(geoJson);
        });
    },[])

    // use in JSX
    {currentGeoJsonData && (
        <GeoJSON
            ref={data}
            key={Math.random() + i}
            data={data}
        />
    )}
}

Apostolate