Initial FeatureCollection with Mapbox Draw

[bernatfortet]

Hi! First, thanks for the great library.

I'm trying to extend the draw-polygon example by adding an initial set of features to the editable set.

export default function DrawControl(props: DrawControlProps) {
  useControl(
    ({ map }: { map: MapboxMap }) => {
      map.on('draw.create', props.onCreate)
      map.on('draw.update', props.onUpdate)
      map.on('draw.delete', props.onDelete)
      const mapboxDraw = new MapboxDraw(props)
      mapboxDraw.set(props.initialFeatureCollection) // <--------- New
      return mapboxDraw
    },
    ({ map }: { map: MapboxMap }) => {
      map.off('draw.set', props.onSet)
      map.off('draw.create', props.onCreate)
      map.off('draw.update', props.onUpdate)
      map.off('draw.delete', props.onDelete)
    },
    {
      position: props.position,
    }
  )

  return null
}

I get this error:

Any thought on how to do this would be deeply appreciated.

Thanks!

[patrickkunzke]

Hi @bernatfortet, did you find a working solution? 👀
I have a similar use case where I would need to add an initial feature to the mapboxDraw, but I also get an error.

[engelzero]

Managed to get it working setting the initial features on map load works but im doing it with a timeout so the map gets instantiated first - see screenshots

export default function DrawControl(props: DrawControlProps) {
  useControl<MapboxDraw>(
    ({ map }: { map: MapRef }) => {
      map.on('draw.create', props.onCreate)
      map.on('draw.update', props.onUpdate)
      map.on('draw.delete', props.onDelete)

      const draw = new MapboxDraw(props)

      map.on('load', function () {
        const feature = { type: 'Point', coordinates: [0, 0] }
        console.log('on map load')
        setTimeout(() => {
          draw.add(feature)
          console.log('all feautures', draw.getAll())
        }, 3000)
      })

      return draw
    },
    ({ map }: { map: MapRef }) => {
      map.off('draw.create', props.onCreate)
      map.off('draw.update', props.onUpdate)
      map.off('draw.delete', props.onDelete)
    },
    {
      position: props.position
    }
  )

  return null
}

[engelzero]

Upgrading to "react-map-gl": "^7.0.19" solved the runtime error - #1952

hacky timeout not needed, just map.on('load', ...)

Have it working well with

export default function DrawControl(props: DrawControlProps) {
  let draw = useControl<MapboxDraw>(
    () => new MapboxDraw(props),
    ({ map }: { map: MapRef }) => {
      map.on('draw.create', props.onCreate)
      map.on('draw.update', props.onUpdate)
      map.on('draw.delete', props.onDelete)
      map.on('load', function () {
        console.log('on map load')
        const feature = simplify(routeData, 0.0069)
        draw.add(feature)
        // draw.changeMode('draw_line_string')
        console.log('all features', draw.getAll())
      })
    },
    ({ map }: { map: MapRef }) => {
      map.off('draw.create', props.onCreate)
      map.off('draw.update', props.onUpdate)
      map.off('draw.delete', props.onDelete)
    },
    {
      position: props.position
    }
  )

  return null
}

[engelzero]

@patrickkunzke @bernatfortet ^

[Pessimistress]

Per mapbox-gl-draw documentation:

Draw only works after the Mapbox GL JS map has loaded, so you must interact with Draw only after your map's load event

[engelzero]

How would one go about interacting with the Draw after map has loaded using useControl?