React-map-gl: Error, when show/hide geojson layer with Source and Layer components

[ModKub]

Hi,

I got problem when using Source and Layer components. In my case i need to show or hide geojson layer.
My component looks like this:

import React from "react";
import { Layer, Source } from "react-map-gl";
import data from "data/GEOJSON/YVER-64_MT.geojson";

const fillLayer = {
  id: "fill",
  type: "fill",
  "paint": {
    "fill-color": [ "get", "fill" ],
    "fill-opacity": [ "get", "stroke-opacity" ],
  },
};

const lineLayer = {
  id: "line",
  type: "line",
  "paint": {
    "line-color": [ "get", "stroke" ],
    "line-opacity": [ "get", "fill-opacity" ],
    "line-width": [ "get", "stroke-width" ],
  },
};

const GeoJsonLayer = () => {
  return (
    <Source type="geojson" data={data}>
      <Layer {...fillLayer} />
      <Layer {...lineLayer} />
    </Source>
  );
};

export default GeoJsonLayer;

And depends on parent component state display/hide this GeoJosnLayer component.

I got error when hiding:

index.js:1437 Error: Source "jsx-source-2" cannot be removed while layer "fill" is using it.
    at i.removeSource (mapbox-gl.js:20157)
    at r.removeSource (mapbox-gl.js:24188)
    at Source.componentWillUnmount (source.js:44)
    at callComponentWillUnmountWithTimer (react-dom.development.js:21760)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:465)
    at safelyCallComponentWillUnmount (react-dom.development.js:21767)
    at commitUnmount (react-dom.development.js:22252)
    at unmountHostComponents (react-dom.development.js:22728)
    at commitDeletion (react-dom.development.js:22764)
    at commitMutationEffects (react-dom.development.js:25274)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:465)
    at commitRootImpl (react-dom.development.js:24997)
    at unstable_runWithPriority (scheduler.development.js:820)
    at runWithPriority$2 (react-dom.development.js:12280)
    at commitRoot (react-dom.development.js:24872)
    at finishSyncRender (react-dom.development.js:24249)
    at performSyncWorkOnRoot (react-dom.development.js:24223)
    at react-dom.development.js:12334
    at unstable_runWithPriority (scheduler.development.js:820)
    at runWithPriority$2 (react-dom.development.js:12280)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12329)
    at flushSyncCallbackQueue (react-dom.development.js:12317)
    at discreteUpdates$1 (react-dom.development.js:24363)
    at discreteUpdates (react-dom.development.js:1485)
    at dispatchDiscreteEvent (react-dom.development.js:5970) "

Is there different approach to hide/show layer without this error ?

[varun-juneja-daffodil]

I am facing the same issue, when the map component unmount it try to remove the source and layer and it gives the same error. can someone help me on this please

[Ayush1076]

I am having the same issue, please help me out here

[arjundaffodil]

Hmmm, I was getting the same error a while ago. Didn't got any working solution yet.

[MKaHead]

Hi @arjundaffodil, @Ayush1076, @varun-juneja-daffodil, @ModKub,

I had the same issue, I fixed the source clean up in this pull request. #916

[Pessimistress]

This should be fixed in 5.1.1.

[kjkurtz]

I'm still seeing this, although it's just a console error and doesn't seem to break anything. I have an array of GeoJson that I iterate over to show on the map. When I remove one from the array, I get Error: Source "xxx" cannot be removed while layer "xxx" is using it. Everything works fine, but the error occurs consistently upon removals.

{tempFeatures ?
        tempFeatures.map(feature => (
          <Source key={feature.id} id={feature.id} type="geojson" data={feature.data}>
            <Layer
              key={feature.id}
              id={feature.id}
              type="fill"
              paint={feature.paint}
            />
          </Source>
        )) : undefined}

Note: I'm on 5.1.3

[levitanong]

I'm experiencing the same issue as of 5.2.3

[kjkurtz]

@Pessimistress I noticed you said this was fixed above. If you see my use case above where I remove the Source and Layer together after swapping 'tempFeatures' to a new array, I'm still seeing the same error with the current version (5.2.7). Is there a better way to do this to avoid the error? Thanks!

[kjkurtz]

Never-mind, turns out the key to making it work properly is to make sure all of the ID's are unique. I had overlap which was causing the issue.