I'm using a Leaflet offline map with React where I manually load in a countries.js GeoJSON file with every country in the world. I then conditionally color each country depending on data received from this.props.data, which works initially.

However, the issue es from updating the colors when new this.props.data is ing in.

I have tried managing it in these two ponents:

ponentWillReceiveProps(nextProps) {
    if(this.props.data) {
        let map = this.map;
        console.log(map); // It shows the leaflet object!
        console.log(nextProps.data); // It's logged
        console.log(this.props.data); // Also logged
        if (nextProps.data !== this.props.data) {
            map.clearLayers(); // Error es here?
            console.log("New data doesn't match old!"); // This logs correctly
        }
    }
},

ponentDidUpdate(prevProps, prevState) {
    if(this.props.data){
        let map = this.map;
        if (prevProps.data !== this.props.data) {
            L.geoJson(this.countries, { // from import
            }).addTo(map);
         }
    }
},

What am I doing wrong? The condition is met, if the old data doesn't match the new, the map should clear all layers with clearLayers();. I could understand this error if the map couldn't be found; but I am accessing it with this.map, so it doesn't appear to be a scoping issue.

I'm using a Leaflet offline map with React where I manually load in a countries.js GeoJSON file with every country in the world. I then conditionally color each country depending on data received from this.props.data, which works initially.

However, the issue es from updating the colors when new this.props.data is ing in.

I have tried managing it in these two ponents:

ponentWillReceiveProps(nextProps) {
    if(this.props.data) {
        let map = this.map;
        console.log(map); // It shows the leaflet object!
        console.log(nextProps.data); // It's logged
        console.log(this.props.data); // Also logged
        if (nextProps.data !== this.props.data) {
            map.clearLayers(); // Error es here?
            console.log("New data doesn't match old!"); // This logs correctly
        }
    }
},

ponentDidUpdate(prevProps, prevState) {
    if(this.props.data){
        let map = this.map;
        if (prevProps.data !== this.props.data) {
            L.geoJson(this.countries, { // from import
            }).addTo(map);
         }
    }
},

What am I doing wrong? The condition is met, if the old data doesn't match the new, the map should clear all layers with clearLayers();. I could understand this error if the map couldn't be found; but I am accessing it with this.map, so it doesn't appear to be a scoping issue.

• javascript
• reactjs
• leaflet

• 1 r u sure clearLayers() function exist ? check the spelling may be it could be a spelling mistake. – Mayank Shukla Commented Mar 22, 2017 at 10:06
• 1 clearLayers is method of the LayerGroup not of the map – xmojmr Commented Mar 22, 2017 at 10:35
• Seems like you're right, I have to objectify the geojson data and run clearLayers it with this to avoid scoping constraints. – cbll Commented Mar 22, 2017 at 10:46

1 Answer 1

clearLayers() is a method of L.LayerGroup, not a method of L.Map.

Store the instance of L.GeoJson that you create when running L.geoJson(...), and implement more fine-grained control of when it's added/removed from the map.