CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-leaflet
Titenko Stanislav
Titenko Stanislav

Reputation: 545

Rendering GeoJSON with react-leaflet

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

Upvotes: 20

Views: 42968

Answers (4)

Abolfazl Taghavi
Abolfazl Taghavi

Reputation: 21

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}
        />
    )}
}

Upvotes: 0

Austin Gayler
Austin Gayler

Reputation: 4356

import hash from 'object-hash';

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

Upvotes: 7

Titenko Stanislav
Titenko Stanislav

Reputation: 545

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

Upvotes: 25

Evan Siroky
Evan Siroky

Reputation: 9408

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>
    );
  }

Upvotes: 2

Related Questions