Skip to content

Feature not found error when switching between move and edit modes in React + MapLibre integration #7

@SteAymar

Description

@SteAymar

Hello! I get the error “Feature not found” when switching between move and edit modes using Geoman with MapLibre in a React application.
The error appears in the console as soon as I try to edit or move a feature.

Steps to reproduce the error:

-Create a new MapLibre map in React.
-Initialize Geoman and activate the drawing tools.
-Draw a new feature (e.g., a line or polygon).
-Select move mode, move the feature, select edit mode, and when I try to edit the feature, the error appears in console.log().

Actual behavior:
Changing modes causes a “Feature not found” error, even though the feature has just been drawn and has not been deleted.

Additional information:

There are no preloaded elements; only new elements are drawn.

These versions are used:
@geoman-io/maplibre-geoman-free: 0.4.7
maplibre-gl: 5.0.1
react: 19.0.0

Minimal code snippet:

import { Geoman } from "@geoman-io/maplibre-geoman-free";
import ml from "maplibre-gl";
import React, { useEffect, useRef } from "react";

export const Map = () => {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (mapRef.current) {
      const map = new ml.Map({
        container: mapRef.current,
        style: /* ... */,
        center: [0, 51],
        zoom: 5,
      });

      const geoman = new Geoman(map, {});
      map.on("gm:loaded", () => {
        geoman.enableDraw("line");
      });
    }
  }, []);

  return <div ref={mapRef} style={{ width: "100vw", height: "100vh" }} />;
};

Error Logs:

Feature not found: feature-20 !== undefined null 
Object { type: "FeatureCollection", features: (6) […] }
<anonymous code>:1:147461
Uncaught Error: Feature not found
    getGeoJson feature-data.ts:94
    getPointsSnapping snapping.ts:181
    c snapping.ts:127
    getFeaturePointsSnapping snapping.ts:125
    getSnappedLngLat snapping.ts:90
    onMouseMove marker-pointer.ts:137
    Lodash 2
    controlHandler bus.ts:167
    controlHandler bus.ts:164
    fire evented.ts:132
    mousemove map_event.ts:122
    handleEvent handler_manager.ts:392
    addEventListener dom.ts:62
    Ea handler_manager.ts:212
    <anonymous> map.ts:711
    Map Map.tsx:37
    React 40
    performWorkUntilDeadline scheduler.development.js:45
feature-data.ts:94:13

Feature not found: feature-18 !== undefined null 
Object { type: "FeatureCollection", features: (6) […] }
<anonymous code>:1:147461
Uncaught Error: Feature not found
    getGeoJson feature-data.ts:94
    getPointsSnapping snapping.ts:181
    c snapping.ts:127
    getFeaturePointsSnapping snapping.ts:125
    getSnappedLngLat snapping.ts:90
    onMouseMove marker-pointer.ts:137
    Lodash 2
    controlHandler bus.ts:167
    controlHandler bus.ts:164
    fire evented.ts:132
    mousemove map_event.ts:122
    handleEvent handler_manager.ts:392
    addEventListener dom.ts:62
    Ea handler_manager.ts:212
    <anonymous> map.ts:711
    Map Map.tsx:37
    React 40
    performWorkUntilDeadline scheduler.development.js:45
feature-data.ts:94:13

Questions:

Are there any known issues with React state or lifecycle that could cause this?
Is there a recommended way to avoid this?

Thanks for your help!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions