How to add draw on drawed feature?

[maxiwer]

Hello mapbox-gl-draw team. How can I add a layer to draw object? I've tried this:

let ftr = {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: layer.coordinates[0],
      },
      properties: []
    };
    let featureIds = this.draw.add(ftr as Feature);
    ```
    but it throws an error: `ERROR TypeError: Cannot read properties of undefined (reading 'get')`. What's the problem?

[kumilange]

@maxiwer Hi, I can confirm that add behavior works (I'm not a maintainer for this library by the way).

Here is what the code looks like:

API reference https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md

[maxiwer]

@kumiko-haraguchi Is it just a layer? Where's the drawing tool's points?

[kumilange]

@maxiwer You can click the polygon and play with it in the same way as drawing it with the tool.

[maxiwer]

I don't understand where I'm getting this wrong. Could you please review this: Here I'm toggling "draw" tool when editing mode is on:

        if (isEditing) {
          this.map?.addControl(this.draw as any);
          this.test();
        }

and here I am trying to add kind of what you've wrote here:

  private test() {
    const layer = JSON.parse(this.currentLayer$.getValue().geom) as GeomModel;
    this.map?.on('load', () => {
      this.draw.add({
        id: 'sample-id',
        type: 'Feature',
        properties: [],
        geometry: {
          type: 'Polygon',
          coordinates: layer.coordinates[0],
        }
      });
    })
  }

What's wrong?

[kumilange]

@maxiwer Hi, it's hard to tell why your code isn't working from your code snippets.

Would you be able to provide your code by using jsbin like this? https://jsbin.com/suqewac/edit?html,output You can check the working code(don't forget to add your mapbox acccess token).

[derwaldgeist]

I'm getting the same error as the OP. Even the sample in the API doc won't work for me. No matter what I try (the Feature seems to be correct), I am getting: TypeError: Cannot read properties of undefined (reading 'get')

[derwaldgeist]

I tried to debug this, and it seems as if ctx.store is not defined here:

https://github.com/mapbox/mapbox-gl-draw/blob/main/src/api.js#L85

I am using mapbox-gl 1.x, since I am using it in combination with MapTiler and Urbica's react-map-gl implementation. Maybe map-gl-draw is not compatible with 1.x anymore?

EDIT: I tested with mapbox-gl 3.x and am seeing the same results.

[Nikhil22]

@derwaldgeist @maxiwer I was getting the exact same error, but I got it working by ensuring that map has the draw control, before trying to call draw.whatever().

Example:

  useEffect(() => {
    if (!draw?.current || !hasDrawControl) return
    draw.current.set({
      type: 'FeatureCollection',
      features
    })
  }, [draw, hasDrawControl])

hasDrawControl is simply a useState variable that is set like this:

      map.addControl(draw.current);
      setHasDrawControl(true)

Works because map.addControl is synchronous, as shown here too.

[kumilange]

@maxiwer @derwaldgeist I tried to reproduce the error by writing it in a Class but it seems to work fine for me...(confirmed with mapbox-gl-js 1.x, 2.x and 3.x | mapbox-gl-draw v1.4.3). I'm not sure how we are doing differently. If you could provide the code that reproduces the error, that would be helpful.

class MapboxGlDrawManager {
  constructor() {
    mapboxgl.accessToken = 'MAPBOX_ACCESS_TOKEN';

    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v11',
      center: [-68.137343, 45.137451],
      zoom: 5
    });

    this.draw = new MapboxDraw({
      controls: {
        polygon: true,
        trash: true
      },
    });

    this.init();
  }

  init() {
    this.map.addControl(this.draw);

    this.map.on('load', () => {
      this.draw.add({
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: // omit
            }
          },
        ],
      });
    });
  }
}

// Initialize MapboxGlDrawManager
const initialize = () => new MapboxGlDrawManager();

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initialize);
} else {
  initialize();
}

@stepankuzmin Were you able to verify this bug?