When changes occur to line geojson sourced from state, map does not update

[brianbancroft]

Duplicate of #2366, but with example and reproduceability.

In this example, you have a map with two buttons: "toggle" and "append". Append adds a vertex to a line geojson-compliant object stored in React.useState:

export function CanvasMap() {
   const [data, setData] = useState({
    type: "Feature",
    properties: {},
    geometry: {
      type: "LineString",
      coordinates: [
        [-124.02, 49.039],
        [-124.03, 49.038],
      ],
    },
  });

  const [toggle, setToggle] = useState(false);

  const appendData = () => {
    const sourceData = { ...data };

    const deltaX = -0.01;
    const deltaY =
      0.001 * (sourceData.geometry.coordinates.length % 2 === 0 ? 1 : -1);

    const newCoordinates = [
      sourceData.geometry.coordinates[
        sourceData.geometry.coordinates.length - 1
      ][0] + deltaX,
      sourceData.geometry.coordinates[0][1] + deltaY,
    ];

    sourceData.geometry.coordinates.push(newCoordinates);

    setData(sourceData);
  };

  const visibleData = toggle
    ? {
        ...data,
        properties: { length: data.geometry.coordinates.length },
        geometry: { ...data.geometry, coordinates: [] },
      }
    : { ...data };

  return (
    <>
      <div className="w-full h-full min-h-[600px] xl:h-[650px]">
        <Map
          initialViewState={{
            latitude: 49.031,
            longitude: -124.02,
            zoom: 10.5,
          }}
          style={{
            height: "650px",
          }}
          mapStyle="mapbox://styles/mapbox/light-v9"
          doubleClickZoom={false}
          mapboxAccessToken={MAPBOX_TOKEN}
        >
          <Source type="geojson" data={visibleData}>
            <Layer
              type="line"
              layout={{
                "line-join": "round",
                "line-cap": "round",
              }}
              paint={{
                "line-color": "#888",
                "line-width": 8,
              }}
            />
          </Source>
        </Map>
      </div>
      <button onClick={appendData} className="bg-blue-500 text-white p-2 mt-12">
        append
      </button>

      <button
        onClick={() => setToggle(!toggle)}
        className="bg-blue-500 text-white p-2 mt-12"
      >
        toggle
      </button>
    </>
  );
  );
}

Clicking on "append" adds a vertex in a westward sawtooth pattern to the line geojson object, however the map fails to update. Clicking on "toggle" swaps the geojson object with an entirely separate object, and successfully updates the map. Clicking on toggle twice shows the sawtooth with the added vertices.

Example: https://codesandbox.io/p/sandbox/react-map-gl-update-geojson-2rtvdm?file=%2Fsrc%2FSawtoothMap.jsx

The basemap fails to render in this codesandbox on account of token 403-errors, but shape will render when the user clicks on the buttons as displayed in the video below:

Screen.Recording.2024-07-18.at.1.49.53.PM.mov

Is there an easy solution to this problem I'm missing?

[brianbancroft]

When adding an id attribute to the geojson feature, and changing it on feature change, the map will update on a press of the "append" button.

  const appendData = () => {
    const sourceData = { ...data };

    const deltaX = -0.01;
    const deltaY =
      0.001 * (sourceData.geometry.coordinates.length % 2 === 0 ? 1 : -1);

    const newCoordinates = [
      sourceData.geometry.coordinates[
        sourceData.geometry.coordinates.length - 1
      ][0] + deltaX,
      sourceData.geometry.coordinates[0][1] + deltaY,
    ];

    sourceData.geometry.coordinates.push(newCoordinates);
    sourceData.id = String(Number(sourceData.id) + 1);

    setData(sourceData);
  };